:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .content-section-title { display: flex; align-items: baseline; flex-wrap: wrap; text-align: left; color: #000; font-size: 26px; line-height: 32px; } @media only screen and (max-width: 768px) { .content-section-title { flex-direction: column; } } .content-section-title__subtitle { padding-left: 16px; padding-right: 0; color: #6e767e; font-size: 16px; line-height: 18px; } @media only screen and (max-width: 768px) { .content-section-title__subtitle { padding-left: 0; } } .content-section-title__subtitle_btn:hover { text-decoration: underline; } .content-section-title__divider { min-width: 100%; height: 2px; margin: 0; margin-top: 9px; border: none; background-color: #c8d0d8; } @media only screen and (max-width: 768px) { .content-section-title__divider { margin-left: 0; } }.pie-chart { position: relative; width: 100%; height: 0; padding-bottom: 100%; } .pie-chart__svg-container { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .pie-chart__sector_clickable { cursor: pointer; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .dashboard-pie-label { display: flex; align-items: center; justify-content: left; width: -moz-fit-content; width: fit-content; padding: 5px 0 5px 15px; cursor: pointer; transition-duration: 0.3s; color: #6e767e; font-weight: 600; } .dashboard-pie-label:hover { color: black; } .dashboard-pie-label_active { color: black; } .dashboard-pie-label__dot { width: 10px; min-width: 10px; height: 10px; margin-right: 15px; border-radius: 10px; } .dashboard-pie-label__sector-label { text-align: left; } @media only screen and (max-width: 768px) { .dashboard-pie-label__sector-label { font-size: 25px; } } .dashboard-pie-label_active { color: black; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .report-datails-title__text { color: #6e767e; font-size: 1.3em; font-weight: 600; text-transform: uppercase; } .report-datails-title__wrapper { margin: 30px; padding-bottom: 15px; text-align: left; border-bottom: 2px solid #6e767e; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .dashboard-pie-chart { display: flex; flex-direction: column; flex-grow: 1; } .dashboard-pie-chart_no-selection { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dashboard-pie-chart__caption { padding: 10px 0; font-weight: 600; } @media only screen and (max-width: 1400px) { .dashboard-pie-chart__caption { min-height: 70px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; } } .dashboard-pie-chart__pie-percent-value, .dashboard-pie-chart__pie-label, .dashboard-pie-chart__pie-value { font-weight: 700; text-anchor: middle; alignment-baseline: middle; } .dashboard-pie-chart__pie-percent-value { font-size: 18px; } .dashboard-pie-chart__pie-value { font-size: 7px; } .dashboard-pie-chart__pie-label { font-size: 7px; } .dashboard-pie-chart__pie-info-container { animation: fadeIn 3s ease-out; } .dashboard-pie-chart__dot { width: 10px; min-width: 10px; height: 10px; margin-right: 15px; border-radius: 10px; } .dashboard-pie-chart__sector-label { text-align: left; } .dashboard-pie-chart__labels { margin-top: 15px; } .dashboard-pie-chart__no-data-container { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; color: #6e767e; } .dashboard-pie-chart__no-data-label { padding-top: 10px; font-size: 25px; } .dashboard-pie-chart__no-data-icon { font-size: 50px; }.loader-image { text-align: center; } .loader-image .loader-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.loader { display: flex; align-items: center; flex-grow: 1; justify-content: center; animation: fadeIn 0.5s ease-out; } .loader__image { width: 55px; height: 55px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .tooltip { max-width: 200px; z-index: 10000 !important; border-radius: 3px; background-color: #000000; } .tooltip.show { opacity: 1; } .tooltip-wrapper { text-align: center; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; } .tooltip::before { z-index: -1 !important; }.segmented-control { position: relative; display: inline-block; border: 1px solid currentColor; font-style: normal; font-weight: normal; text-decoration: none; overflow: hidden; margin: 0.8em auto; border-radius: 2px; box-sizing: border-box; -moz-user-select: -moz-none; -webkit-user-select: none; user-select: none; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-tap-highlight-color: transparent; } .segmented-control > input { position: absolute; left: -10000px; opacity: 0; } .segmented-control > input[type='checkbox'] ~ label { transition-duration: 0; } .segmented-control > input[type='checkbox'] ~ label:before { opacity: 0; } /* this section controls the division of the slider if you have 2 options = 50%, 3 options = 33% and so on but also the selected input matters. (input-1)*percentage you'll also need to add a new entry for the new option to do so just copy the last entry and change the numbers to [new highest] and also make sure to set left: xx% correctly */ .segmented-control > input:disabled:nth-child(1) ~ label:nth-of-type(1) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):before { opacity: 1; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 0; } /* entry #2 */ .segmented-control > input:disabled:nth-child(2) ~ label:nth-of-type(2) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):before { opacity: 1; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 50%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 33.33333%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 25%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 20%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 16.66%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 14.28%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 12.5%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 11.1111%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 10%; } /* entry #3 */ .segmented-control > input:disabled:nth-child(3) ~ label:nth-of-type(3) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):before { opacity: 1; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 66.66667%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 50%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 40%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 33.3333%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 28.57%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 25%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 22.2222%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 20%; } /* entry #4 */ .segmented-control > input:disabled:nth-child(4) ~ label:nth-of-type(4) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):before { opacity: 1; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 75%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 60%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 50%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 42.86%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 37.5%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 33.333%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 30%; } /* entry #5 */ .segmented-control > input:disabled:nth-child(5) ~ label:nth-of-type(5) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(5):checked ~ label:nth-of-type(5):after, .segmented-control > input:nth-child(5):checked ~ label:nth-of-type(5):before { opacity: 1; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 80%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 66.6667%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 57.14%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 50%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 44.4444%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 40%; } /* entry #6 */ .segmented-control > input:disabled:nth-child(6) ~ label:nth-of-type(6) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(6):checked ~ label:nth-of-type(6):after, .segmented-control > input:nth-child(6):checked ~ label:nth-of-type(6):before { opacity: 1; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 83.3333%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 71.43%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 62.5%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 55.56%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 50%; } /* entry #7 */ .segmented-control > input:disabled:nth-child(7) ~ label:nth-of-type(7) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(7):checked ~ label:nth-of-type(7):after, .segmented-control > input:nth-child(7):checked ~ label:nth-of-type(7):before { opacity: 1; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 85.71%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 75%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 66.6667%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 60%; } /* entry #8 */ .segmented-control > input:disabled:nth-child(8) ~ label:nth-of-type(8) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(8):checked ~ label:nth-of-type(8):after, .segmented-control > input:nth-child(8):checked ~ label:nth-of-type(8):before { opacity: 1; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 87.5%; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 77.7778%; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 70%; } /* entry #9 */ .segmented-control > input:disabled:nth-child(9) ~ label:nth-of-type(9) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(9):checked ~ label:nth-of-type(9):after, .segmented-control > input:nth-child(9):checked ~ label:nth-of-type(9):before { opacity: 1; } .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 88.8889%; } .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 80%; } /* entry #10 */ .segmented-control > input:disabled:nth-child(10) ~ label:nth-of-type(10) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(10):checked ~ label:nth-of-type(10):after, .segmented-control > input:nth-child(10):checked ~ label:nth-of-type(10):before { opacity: 1; } .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 90%; } /* this section controls the size of the options for each number of total options */ .segmented-control > label:first-of-type:nth-last-of-type(1), .segmented-control > label:first-of-type:nth-last-of-type(1):after, .segmented-control > label:first-of-type:nth-last-of-type(1):before, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:before { width: 100%; } .segmented-control > label:first-of-type:nth-last-of-type(2), .segmented-control > label:first-of-type:nth-last-of-type(2):after, .segmented-control > label:first-of-type:nth-last-of-type(2):before, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:before { width: 50%; } .segmented-control > label:first-of-type:nth-last-of-type(3), .segmented-control > label:first-of-type:nth-last-of-type(3):after, .segmented-control > label:first-of-type:nth-last-of-type(3):before, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:before { width: 33.33333%; } .segmented-control > label:first-of-type:nth-last-of-type(4), .segmented-control > label:first-of-type:nth-last-of-type(4):after, .segmented-control > label:first-of-type:nth-last-of-type(4):before, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:before { width: 25%; } .segmented-control > label:first-of-type:nth-last-of-type(5), .segmented-control > label:first-of-type:nth-last-of-type(5):after, .segmented-control > label:first-of-type:nth-last-of-type(5):before, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label:before { width: 20%; } .segmented-control > label:first-of-type:nth-last-of-type(6), .segmented-control > label:first-of-type:nth-last-of-type(6):after, .segmented-control > label:first-of-type:nth-last-of-type(6):before, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label:before { width: 16.6667%; } .segmented-control > label:first-of-type:nth-last-of-type(7), .segmented-control > label:first-of-type:nth-last-of-type(7):after, .segmented-control > label:first-of-type:nth-last-of-type(7):before, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label:before { width: 14.2857%; } .segmented-control > label:first-of-type:nth-last-of-type(8), .segmented-control > label:first-of-type:nth-last-of-type(8):after, .segmented-control > label:first-of-type:nth-last-of-type(8):before, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label:before { width: 12.5%; } .segmented-control > label:first-of-type:nth-last-of-type(9), .segmented-control > label:first-of-type:nth-last-of-type(9):after, .segmented-control > label:first-of-type:nth-last-of-type(9):before, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label:before { width: 11.1111%; } .segmented-control > label:first-of-type:nth-last-of-type(10), .segmented-control > label:first-of-type:nth-last-of-type(10):after, .segmented-control > label:first-of-type:nth-last-of-type(10):before, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label:before { width: 10%; } .segmented-control > label { display: inline-block; padding: 0 0.71em; cursor: pointer; float: left; line-height: 3em; font-style: inherit; font-weight: inherit; text-decoration: inherit; transition-property: none; transition-duration: inherit; transition-timing-function: inherit; line-height: 200%; } .segmented-control > label:before, .segmented-control > label:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .segmented-control > label:after { color: white; content: attr(data-value); text-align: center; padding: inherit; z-index: 10; font-style: inherit; text-decoration: inherit; font-weight: inherit; opacity: 0; transition-property: opacity, left; transition-duration: inherit; transition-timing-function: inherit; } .segmented-control > label:after, .segmented-control > label { text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .segmented-control > label:before { content: ""; color: inherit; background: currentColor; transition-property: left; transition-duration: inherit; transition-timing-function: inherit; } .segmented-control.italic, .segmented-control .italic { font-style: italic; } .segmented-control.bold, .segmented-control .bold { font-weight: bold; } .segmented-control.underline, .segmented-control .underline { text-decoration: underline; } .segmented-control.line-through, .segmented-control .line-through { text-decoration: line-through; } .controlled-field__label-text { margin-right: 0; } .controlled-field__label-info-icon { display: inline-flex; vertical-align: middle; color: #000; cursor: help; flex-shrink: 0; } .controlled-field__required-mark { color: #ef4444; margin-left: 2px; line-height: 1; } [data-slot=form-item] { min-width: 0; width: 100%; max-width: 100%; } [data-slot=form-item] > * { min-width: 0; } [data-slot=form-item] [data-slot=form-control] { min-width: 0; width: 100%; max-width: 100%; } [data-slot=form-item] [data-slot=form-control] > * { min-width: 0; max-width: 100%; } [data-slot=form-item] button[data-slot=form-control].forms-checkbox__input { width: 16px; max-width: none; } [data-slot=form-item] .forms-checkbox { width: 16px; max-width: none; } [data-slot=form-item] .forms-checkbox label { text-wrap: nowrap; } [data-slot=form-item] textarea, [data-slot=form-item] .forms-textarea, [data-slot=form-item] .forms-textarea__field { min-width: 0; width: 100%; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } [data-slot=form-item] input, [data-slot=form-item] .forms-input, [data-slot=form-item] .forms-input__field { min-width: 0; max-width: 100%; } [data-slot=form-item] select, [data-slot=form-item] .forms-select { min-width: 0; max-width: 100%; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .multiselect_primary_whitelabeled { border-color: var(--primary-color); }.radix-select { width: 100%; } .radix-select__trigger { width: 100%; } .radix-select__trigger--invalid { color: #ef4444 !important; } .radix-select__trigger--invalid::after { background-color: #ef4444 !important; } .radix-select__content { max-height: 200px; } .radix-select__item--no-results { color: #9ca3af; font-style: italic; }.radix-select-field { display: flex; gap: 8px; text-wrap: nowrap; } .radix-select-field__label { font-size: 14px; font-weight: 500; color: #374151; line-height: 1.4; display: flex; align-items: center; justify-content: center; } .radix-select-field__required { color: #ef4444; } .radix-select-field__select { width: 100%; } .radix-select-field__invalid-label { font-size: 12px; color: #ef4444; margin-top: 4px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .range-picker-input { display: flex; width: 100%; height: 35px; padding: 0 5px 0 0; align-items: center; transition-duration: 0.3s; } .range-picker-input:hover, .range-picker-input:active, .range-picker-input:focus { cursor: pointer; } .range-picker-input_disabled, .range-picker-input_disabled:hover { cursor: initial; } .range-picker-input_active { border-color: #c8d0d8; } .range-picker-input__label { color: #333333; font-size: 14px; padding-right: 5px; } .range-picker-input__input-container { display: flex; align-items: center; width: 100%; } .range-picker-input__input-sign { font-size: 14px; text-align: right; color: #333333; padding: 0 2px 0 0; } .range-picker-input__input { width: 100%; text-overflow: ellipsis; border: 0; } .range-picker-input__input:focus, .range-picker-input__input:active { border: 0; outline: none; } .range-picker-input__input:-webkit-autofill { box-shadow: inset 0 0 0 50px #fff; -webkit-text-fill-color: #0f206e; } .range-picker-input__input:disabled { background: transparent; color: #c8d0d8; } .range-picker-input input[type=number]::-webkit-inner-spin-button, .range-picker-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .range-picker { font-size: 14px; transition: all 0.3s ease; } @media only screen and (max-width: 600px) { .range-picker { flex-direction: column; align-items: flex-start; height: auto; } } .range-picker__label { width: 120px; height: 35px; } @media only screen and (max-width: 600px) { .range-picker__label { padding-left: 5px; color: #6e767e; } } .range-picker__to-label { padding: 0 10px; } .range-picker_disabled { color: #6e767e; } .range-picker_disabled .range-picker-input, .range-picker_disabled .range-picker-input__input { cursor: not-allowed; } .range-picker_disabled .range-picker__text-input-container:hover { border-color: #ccc; } .range-picker_invalid { border-color: #ff2652; } .range-picker_invalid .range-picker__content { border-color: #ff2652; } .range-picker_invalid .range-picker__content:hover { border-color: #ff2652; } .range-picker_invalid .range-picker__text-input-container_first, .range-picker_invalid .range-picker__text-input-container_second { border-color: #ff2652; } .range-picker_invalid .range-picker__text-input-container_first:hover, .range-picker_invalid .range-picker__text-input-container_second:hover { border-color: #ff2652; } .range-picker__text-input { border: none; } .range-picker__content { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 5px; transition-duration: 0.3s; } @media only screen and (max-width: 600px) { .range-picker__content { width: 100%; color: #333333; } } @media only screen and (max-width: 500px) { .range-picker { flex-direction: column; } } .range-picker__text-input-container_first { border-bottom: 1px solid #ccc; margin-right: 10px; } @media only screen and (max-width: 500px) { .range-picker__text-input-container_first { width: 100%; } } .range-picker__text-input-container_first:hover { border-color: #333333; } .range-picker__text-input-container_second { border-bottom: 1px solid #ccc; } @media only screen and (min-width: 500px) { .range-picker__text-input-container_second { margin-left: 10px; } } @media only screen and (max-width: 500px) { .range-picker__text-input-container_second { width: 100%; } } .range-picker__text-input-container_second:hover { border-color: #333333; } .range-picker__invalid-label { color: #ff2652; overflow: hidden; max-height: 0; margin-top: 0; font-size: 12px; transition-duration: 0.5s; padding-left: 130px; } @media only screen and (max-width: 600px) { .range-picker__invalid-label { padding-left: 10px; } } .range-picker__invalid-label_visible { margin: 7px 0 5px 0; max-height: 50px; } .range-picker__tooltip-wrapper { margin-left: 10px; } .range-picker__wrapper { display: flex; flex-direction: column; }.autosuggesti-input-wrapper { width: 100%; position: relative; } .autofilled__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; pointer-events: auto; z-index: 1; } .autofilled__arrow:hover { color: #111827; } .radix-autosuggest__content { position: absolute; z-index: 10; width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08); margin-top: 4px; transition: opacity 0.15s; opacity: 1; pointer-events: auto; } .radix-autosuggest__content--hidden { opacity: 0; pointer-events: none; } .radix-autosuggest__content--open { opacity: 1; pointer-events: auto; } .radix-autosuggest__viewport { max-height: 240px; overflow-y: auto; } .radix-autosuggest__viewport--has-content { padding: 4px 0; } .radix-autosuggest__item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: #222; background: transparent; border: none; cursor: pointer; border-radius: 6px; transition: background 0.12s, color 0.12s; } .radix-autosuggest__item:hover, .radix-autosuggest__item:focus { background: #f0f4fa; } .radix-autosuggest__item_selected { background: #e6f0ff; color: #1a5cff; font-weight: 500; flex-direction: row-reverse; justify-content: space-between; } .radix-autosuggest__item__check { width: 12px !important; height: 12px !important; color: black; } .radix-autosuggest__no-results { padding: 12px 16px; color: #888; font-size: 15px; text-align: center; } .radix-autosuggest__input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; background: #fff; color: #222; outline: none; transition: border 0.15s, box-shadow 0.15s; } .radix-autosuggest__input:focus { border-color: #1a5cff; box-shadow: 0 0 0 2px rgba(26, 92, 255, 0.1); } .radix-autosuggest__input:disabled { background: #f5f5f5; color: #bbb; cursor: not-allowed; }.size-picker__text-input-container label { width: 120px; min-width: 120px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-input { width: 100%; position: relative; display: flex; flex-direction: column; gap: 4px; outline: none; } .forms-input__label { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text-primary, #333); margin: 0; } .forms-input__required { color: #ef4444; margin-left: 2px; line-height: 1; } .forms-input__description { font-size: 12px; color: var(--text-secondary, #666); margin: 0; } .forms-input--invalid .forms-input__field { border-color: #ef4444 !important; color: #ef4444; } .forms-input--invalid .forms-input__field::-moz-placeholder { color: rgba(239, 68, 68, 0.5); } .forms-input--invalid .forms-input__field::placeholder { color: rgba(239, 68, 68, 0.5); } .forms-input--invalid .forms-input__field:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-input--active .forms-input__field { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-input--disabled { opacity: 0.6; cursor: not-allowed; } .forms-input--disabled .forms-input__field { cursor: not-allowed; } .forms-input__field { width: 100%; transition: all 0.2s ease-in-out; border-color: #c9c9c9; } .forms-input__field::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-input__field::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-input__field:focus::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.4; } .forms-input__field:focus::placeholder { color: rgb(203, 213, 225); opacity: 0.4; }.react-calendar { width: 350px; max-width: 100%; background: white; border: 1px solid #a0a096; font-family: Arial, Helvetica, sans-serif; line-height: 1.125em; } .react-calendar, .react-calendar *, .react-calendar *:before, .react-calendar *:after { box-sizing: border-box; } .react-calendar button { margin: 0; border: 0; outline: none; } .react-calendar button:enabled:hover { cursor: pointer; } .react-calendar__navigation { height: 44px; margin-bottom: 1em; } .react-calendar__navigation button { min-width: 44px; background: none; } .react-calendar__navigation button:enabled:hover, .react-calendar__navigation button:enabled:focus { background-color: #e6e6e6; } .react-calendar__navigation button[disabled] { background-color: #f0f0f0; } .react-calendar__month-view__weekdays { text-align: center; text-transform: uppercase; font-weight: bold; font-size: 0.75em; } .react-calendar__month-view__weekdays__weekday { padding: 0.5em; } .react-calendar__month-view__weekNumbers { font-weight: bold; } .react-calendar__month-view__weekNumbers .react-calendar__tile { display: flex; align-items: center; justify-content: center; font-size: 0.75em; padding: calc(0.75em / 0.75) calc(0.5em / 0.75); } .react-calendar__month-view__days__day--weekend { color: #d10000; } .react-calendar__month-view__days__day--neighboringMonth { color: #757575; } .react-calendar__year-view .react-calendar__tile, .react-calendar__decade-view .react-calendar__tile, .react-calendar__century-view .react-calendar__tile { padding: 2em 0.5em; } .react-calendar__tile { max-width: 100%; text-align: center; padding: 0.75em 0.5em; background: none; } .react-calendar__tile:disabled { background-color: #f0f0f0; } .react-calendar__tile:enabled:hover, .react-calendar__tile:enabled:focus { background-color: #e6e6e6; } .react-calendar__tile--hasActive { background: #76baff; } .react-calendar__tile--hasActive:enabled:hover, .react-calendar__tile--hasActive:enabled:focus { background: #a9d4ff; } .react-calendar__tile--active { background: #006edc; color: white; } .react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus { background: #1087ff; } .react-calendar--selectRange .react-calendar__tile--hover { background-color: #e6e6e6; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .datepicker-input { height: 35px; font-family: HelveticaNeue, Hind, serif; font-size: 14px; border: 0; border-bottom: 1px solid #ccc; outline: none; transition-duration: 0.3s; padding-left: 10px; } .datepicker-input:active, .datepicker-input:focus { border-color: #333333; } .datepicker-input_invalid { border-color: #ff2652; } .datepicker-input_invalid:active, .datepicker-input_invalid:focus { border-color: #ff2652; } @media only screen and (max-width: 600px) { .datepicker-input { padding-left: 5px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .datepicker { height: 35px; position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; font-weight: 500; color: #333333; transition: all 0.3s; } @media only screen and (max-width: 600px) { .datepicker { flex-direction: column; align-items: unset; height: 50px; } } .datepicker__label { width: 130px; } @media only screen and (max-width: 600px) { .datepicker__label { width: 100%; height: 15px; padding: 0 5px; color: #6e767e; } } .datepicker__label_disabled { color: #969ea6; } .datepicker__input { flex-grow: 1; } .datepicker__input:disabled { color: red; cursor: not-allowed; } .datepicker__input:disabled::-moz-placeholder { color: #c8d0d8; } .datepicker__input:disabled::placeholder { color: #c8d0d8; } .datepicker__calendar-container { position: absolute; top: 100%; right: 20px; width: 280px; z-index: 1; } @media only screen and (max-width: 600px) { .datepicker__calendar-container { left: 0; width: 100%; } } .datepicker__buttons { display: flex; align-items: center; position: absolute; right: 0; bottom: 4px; } .datepicker__clear-button { padding: 14px; position: relative; display: inline-block; box-sizing: border-box; width: 15px; height: 15px; cursor: pointer; color: #000000; line-height: 15px; } .datepicker__clear-button::before, .datepicker__clear-button::after { position: absolute; top: 50%; left: 50%; display: block; width: 15px; height: 2px; margin-left: -7.5px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #000000; } .datepicker__clear-button::after { transform: rotate(45deg); } .datepicker__clear-button:hover::before, .datepicker__clear-button:hover::after { background-color: var(--primary-color); } .datepicker__clear-button:disabled { color: #969ea6; cursor: not-allowed; } .datepicker__clear-button:disabled::after, .datepicker__clear-button:disabled::before { background-color: #969ea6; } .datepicker__calendar-button { width: 28px; height: 28px; font-size: 15px; transition: color 0.2s ease-out; } .datepicker__calendar-button:hover { color: var(--primary-color); } .datepicker__calendar-button:disabled { cursor: not-allowed; } .datepicker__calendar-button:disabled:hover { color: #969ea6; } .datepicker__calendar { width: 100%; border-radius: 3px; } .datepicker__calendar .react-calendar__tile--now { background-color: #f3f4f5; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .datepicker-form__invalid-label { color: #ff2652; overflow: hidden; max-height: 0; margin-top: 0; font-size: 12px; transition-duration: 0.5s; padding-left: 130px; } @media only screen and (max-width: 600px) { .datepicker-form__invalid-label { padding-left: 5px; } } .datepicker-form_invalid .datepicker-form__invalid-label { margin: 7px 0 5px 0; max-height: 20px; } .datepicker-form_invalid .datepicker__input { border-color: #ff2652; } .datepicker-form .react-date-picker__calendar--above-label { top: 0; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .enhanced-multi-select { position: relative; width: 100%; } .enhanced-multi-select__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; max-height: 60px; border: none; border-bottom: 1.5px solid #d1d5db; border-radius: 0; padding: 8px 16px 8px 12px; font-size: 14px; background-color: white; color: #374151; transition: all 0.2s ease; cursor: pointer; gap: 8px; overflow: hidden; } .enhanced-multi-select__trigger:hover { background-color: #f9fafb; border-bottom: 1.5px solid var(--primary-color, #6034d4); } .enhanced-multi-select__trigger:focus { outline: none; border: none; border-bottom: 2px solid var(--primary-color, #6034d4); box-shadow: none; } .enhanced-multi-select__trigger--disabled { opacity: 0.5; cursor: not-allowed; background-color: #f3f4f6; } .enhanced-multi-select__selected-items { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; min-height: 24px; transition: all 0.2s ease; } .enhanced-multi-select__tags-container { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; width: 100%; overflow: hidden; min-height: 24px; transition: all 0.2s ease; } .enhanced-multi-select__tag { display: inline-flex; align-items: center; background-color: var(--primary-color-lightest, rgba(96, 52, 212, 0.1019607843)); border: 1px solid var(--primary-color, #6034d4); border-radius: 16px; padding: 2px 8px; font-size: 12px; color: var(--primary-color, #6034d4); max-width: 120px; min-width: 0; flex-shrink: 0; transition: all 0.2s ease; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: 20px; } .enhanced-multi-select__tag:hover { background-color: rgba(96, 52, 212, 0.15); border-color: #4B0082; } .enhanced-multi-select__tag-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .enhanced-multi-select__more-indicator { color: var(--primary-color, #6034d4); font-size: 12px; font-weight: 500; padding: 2px 6px; background-color: rgba(96, 52, 212, 0.1); border-radius: 12px; border: 1px solid var(--primary-color, #6034d4); flex-shrink: 0; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: 20px; display: flex; align-items: center; } .enhanced-multi-select__placeholder { color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; user-select: none; min-height: 24px; display: flex; align-items: center; } .enhanced-multi-select__icon { height: 16px; width: 16px; color: var(--primary-color, #6034d4); transition: transform 0.2s ease; flex-shrink: 0; pointer-events: none; } .enhanced-multi-select__icon--open { transform: rotate(180deg); } .enhanced-multi-select__content { overflow: hidden; background-color: white; border-radius: 8px; border: 1px solid rgba(96, 52, 212, 0.2); box-shadow: 0 10px 25px -5px rgba(96, 52, 212, 0.1), 0 10px 10px -5px rgba(96, 52, 212, 0.04); z-index: 1000; width: var(--radix-select-trigger-width); min-width: var(--radix-select-trigger-width); } .enhanced-multi-select__viewport { padding: 6px; max-height: 240px; overflow-y: auto; scroll-behavior: smooth; width: 100%; } .enhanced-multi-select__viewport::-webkit-scrollbar { width: 6px; } .enhanced-multi-select__viewport::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; } .enhanced-multi-select__viewport::-webkit-scrollbar-thumb { background: rgba(96, 52, 212, 0.3); border-radius: 3px; } .enhanced-multi-select__viewport::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #6034d4); } .enhanced-multi-select__item { display: flex; align-items: center; padding: 8px 12px; font-size: 14px; color: #374151; cursor: pointer; border-radius: 6px; transition: all 0.15s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-bottom: 2px; width: 100%; } .enhanced-multi-select__item:hover { background-color: rgba(96, 52, 212, 0.05); color: var(--primary-color, #6034d4); } .enhanced-multi-select__item:active { background-color: var(--primary-color-lightest, rgba(96, 52, 212, 0.1019607843)); transform: scale(0.98); } .enhanced-multi-select__item:last-child { margin-bottom: 0; } .enhanced-multi-select__item--selected { background-color: var(--primary-color-lightest, rgba(96, 52, 212, 0.1019607843)); color: var(--primary-color, #6034d4); } .enhanced-multi-select__item--selected:hover { background-color: rgba(96, 52, 212, 0.15); background-color: color-mix(in srgb, var(--primary-color-lightest, rgba(96, 52, 212, 0.1019607843)), black 5%); } .enhanced-multi-select__item--selected:active { background-color: rgba(96, 52, 212, 0.2); background-color: color-mix(in srgb, var(--primary-color-lightest, rgba(96, 52, 212, 0.1019607843)), black 10%); } .enhanced-multi-select__item-content { display: flex; align-items: center; width: 100%; gap: 10px; } .enhanced-multi-select__checkbox { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 4px; background: white; transition: all 0.2s ease; flex-shrink: 0; } .enhanced-multi-select__item--selected .enhanced-multi-select__checkbox { border-color: var(--primary-color, #6034d4); background: var(--primary-color, #6034d4); } .enhanced-multi-select__checkbox-icon { color: white; opacity: 0; transition: opacity 0.2s ease; } .enhanced-multi-select__item--selected .enhanced-multi-select__checkbox-icon { opacity: 1; } .enhanced-multi-select__item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enhanced-multi-select__no-options { padding: 12px; text-align: center; color: #9ca3af; font-style: italic; font-size: 14px; } .enhanced-multi-select[data-state=open] .enhanced-multi-select__content { animation: enhanced-multi-select-slide-down 0.2s ease-out; } .enhanced-multi-select[data-state=closed] .enhanced-multi-select__content { animation: enhanced-multi-select-slide-up 0.15s ease-in; } @keyframes enhanced-multi-select-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes enhanced-multi-select-slide-up { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } @media (max-width: 768px) { .enhanced-multi-select__trigger { min-height: 44px; max-height: 52px; padding: 10px 16px 10px 12px; } .enhanced-multi-select__tag { font-size: 11px; padding: 2px 6px; max-width: 80px; } .enhanced-multi-select__tag-text { font-size: 11px; } .enhanced-multi-select__more-indicator { font-size: 11px; padding: 1px 4px; } .enhanced-multi-select__content { max-width: calc(100vw - 32px); } } @media (max-width: 480px) { .enhanced-multi-select__trigger { min-height: 40px; max-height: 48px; padding: 8px 12px 8px 10px; } .enhanced-multi-select__tag { max-width: 60px; font-size: 10px; padding: 1px 4px; } .enhanced-multi-select__tag-text { font-size: 10px; } .enhanced-multi-select__more-indicator { font-size: 10px; padding: 1px 3px; } }.multi-select-field { display: flex; flex-direction: column; gap: 8px; } .multi-select-field__label { font-size: 14px; font-weight: 500; color: #374151; line-height: 1.4; } .multi-select-field__required { color: #ef4444; } .multi-select-field__select { width: 100%; } .multi-select-field__invalid-label { font-size: 12px; color: #ef4444; margin-top: 4px; } .multi-select-field_invalid .multi-select-field__label { color: #ef4444; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .advanced-search-filters { --field-label-width: 120px; --field-label-gap: 0.5rem; } @media only screen and (min-width: 600px) { .advanced-search-filters [data-slot=form-item][class*=grid-cols-12] { grid-template-columns: var(--field-label-width) minmax(0, 1fr); -moz-column-gap: var(--field-label-gap); column-gap: var(--field-label-gap); align-items: center; } .advanced-search-filters [data-slot=form-item][class*=grid-cols-12] > * { grid-column: 2; } .advanced-search-filters [data-slot=form-item][class*=grid-cols-12] > [data-slot=form-label] { grid-column: 1; width: auto; } .advanced-search-filters .range-picker[class*=grid-cols-5] { grid-template-columns: var(--field-label-width) minmax(0, 1fr); -moz-column-gap: var(--field-label-gap); column-gap: var(--field-label-gap); align-items: center; } .advanced-search-filters .range-picker[class*=grid-cols-5] > * { grid-column: 2; } .advanced-search-filters .range-picker[class*=grid-cols-5] > .range-picker__label { grid-column: 1; width: auto; height: auto; min-height: 35px; } .advanced-search-filters .range-picker__invalid-label { padding-left: 0; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .criterial-form { padding: 20px 0 40px 0; animation: fadeIn 0.5s ease; } .criterial-form__accordion { width: 100%; display: flex; flex-direction: row; } @media only screen and (max-width: 992px) { .criterial-form__accordion { flex-direction: column; } } .criterial-form__footer { display: flex; justify-content: flex-end; padding: 0 20px; } .criterial-form__form-btn { font-size: 14px; } .criterial-form__form-btn_submit { margin-left: 30px; } .criterial-form__inputs-container { display: flex; align-items: start; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } @media only screen and (max-width: 992px) { .criterial-form__inputs-container { flex-wrap: wrap; } } .criterial-form__inputs-container .range-picker-form-input { margin-bottom: 15px; } .criterial-form__column { flex-basis: 50%; } @media only screen and (max-width: 992px) { .criterial-form__column { flex-basis: 100%; display: contents; } .criterial-form__column .item__asset-details { order: 1; } .criterial-form__column .item__purchase-info { order: 2; } .criterial-form__column .item__appraisal-info { order: 3; } .criterial-form__column .item__other-details { order: 4; } .criterial-form__column .item__asset-management { order: 5; } } .criterial-form__dropdown, .criterial-form__input { margin-bottom: 15px; } .criterial-form__dropdown_units { max-width: 200px; } .criterial-form .dropdown__list-container { z-index: 4; } .criterial-form__checkboxes-container { display: flex; flex-direction: column; margin-bottom: 15px; } .criterial-form__checkboxes-label { width: 130px; font-size: 12pt; padding-bottom: 15px; text-align: start; } .criterial-form__checkboxes-content { display: flex; flex-wrap: wrap; width: 100%; } @media only screen and (min-width: 600px) { .criterial-form__checkboxes-content { padding-left: 15px; } } .criterial-form .range-picker__text-input-container { flex-grow: 1; } .criterial-form__media-container .criterial-form__checkbox { align-items: flex-start; } .criterial-form__checkbox { width: 50%; } @media only screen and (max-width: 600px) { .criterial-form__checkbox { width: 85%; } } .criterial-form__checkbox .checkbox { width: 100%; } .criterial-form__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .criterial-form__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .criterial-form__checkbox .checkbox__label { margin-left: 15px; padding-right: 5px; text-align: start; font-size: inherit; } .criterial-form__multiselect-container { margin-top: 23px; } .criterial-form__multiselect-container .multiselect-dropdown__label { display: none; } .criterial-form__multiselect-container .multiselect-dropdown__input { padding: 0 10px 0 0; } .criterial-form__multiselect-container .multiselect-dropdown__value { max-width: 350px; } .criterial-form__ownershipstatus-container .criterial-form__checkboxes-content { padding-left: 0; } @media only screen and (max-width: 400px) { .criterial-form__range-pickers { width: 100%; } } .criterial-form__range-pickers .range_picker { max-width: 500px; } .criterial-form__range-pickers .range-picker__content { justify-content: start; } .criterial-form__range-pickers .datepicker-input { border-bottom: none; } @media only screen and (max-width: 1200px) { .criterial-form__range-pickers__date .range-picker__text-input-container_second { margin: 0; } .criterial-form__range-pickers__date .range-picker__to-label { padding: 5px; align-self: start; } .criterial-form__range-pickers__date .range-picker__content { align-items: flex-start; flex-direction: column; } .criterial-form__range-pickers__date .range-picker__label { align-self: center; } } @media only screen and (max-width: 1200px) and (max-width: 600px) { .criterial-form__range-pickers__date .range-picker__label { align-self: start; } } @media only screen and (max-width: 992px) { .criterial-form__range-pickers .range-picker__label { padding: 10px 0 10px 5px; } .criterial-form__range-pickers .range-picker__to-label { align-self: center; padding: 10px; } .criterial-form__range-pickers .range-picker__text-input-container_first { margin-right: 0; } .criterial-form__range-pickers .range-picker__content { align-items: flex-start; flex-direction: row; } } @media only screen and (max-width: 400px) { .criterial-form__range-pickers .range-picker__content { flex-direction: column; width: 100%; } .criterial-form__range-pickers .range-picker__to-label { align-self: start; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .checkbox { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 100%; cursor: pointer; transition-duration: 0.3s; } .checkbox_active { opacity: 1; } .checkbox__icon { transition-duration: 0.3s; color: transparent; } .checkbox__icon_active { color: #fff; } .checkbox__icon-container { display: flex; align-items: center; justify-content: center; width: 19px; height: 18px; transition-duration: 0.3s; border: 2px solid var(--primary-color); border-radius: 2px; } .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .checkbox__check { position: absolute; top: 1px; box-sizing: border-box; width: 20px; height: 19px; padding: 2px; border-radius: 3px; background-color: #6e767e; } .checkbox__label { margin-left: 35px; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: #6e767e; font-family: "Source Sans Pro", sans-serif; font-size: 16px; line-height: 22px; } .checkbox_active .checkbox__check { border: 2px solid #6e767e; border-radius: 3px; background-color: #6e767e; line-height: 19px; } .checkbox_active .checkbox__label, .checkbox__label:hover { color: #333333; }.checkbox-form_invalid { border-bottom: 1px solid red; } .checkbox-form_invalid::before { height: 20px; opacity: 1; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .content-form { padding: 20px 0 40px 0; animation: fadeIn 0.5s ease; } .content-form__footer { display: flex; justify-content: flex-end; padding: 20px; } .content-form__form-btn { font-size: 14px; } .content-form__form-btn_submit { margin-left: 30px; } .content-form__inputs-container { display: flex; align-items: stretch; flex-direction: row; flex-wrap: nowrap; justify-content: start; } @media only screen and (max-width: 992px) { .content-form__inputs-container { flex-wrap: wrap; } } .content-form__inputs-container .range-picker-form-input { margin-bottom: 15px; } .content-form__column { flex-basis: 30%; } @media only screen and (max-width: 992px) { .content-form__column { flex-basis: 100%; } } .content-form__dropdown, .content-form__input { margin-bottom: 15px; } .content-form__dropdown_units { max-width: 200px; } .content-form .dropdown__list-container { z-index: 4; } .content-form__checkboxes-container { display: flex; flex-direction: column; margin-bottom: 15px; } .content-form__checkboxes-label { width: 130px; font-size: 14px; padding-bottom: 15px; } .content-form__checkboxes-content { display: flex; flex-wrap: wrap; width: 100%; } @media only screen and (max-width: 768px) { .content-form__checkboxes-content { padding-left: 15px; } } .content-form .range-picker__text-input-container { flex-grow: 1; } .content-form__checkbox { width: 100%; } @media only screen and (max-width: 768px) { .content-form__checkbox { width: 85%; } } .content-form__checkbox .checkbox { width: 100%; } .content-form__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .content-form__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .content-form__checkbox .checkbox__label { margin-left: 15px; padding-right: 5px; font-size: inherit; } .content-form__tags-container .multiselect-dropdown__label { display: none; } .content-form__tags-container .multiselect-dropdown__input { padding: 0 10px 0 0; } .content-form__tags-container .multiselect-dropdown__value { max-width: 350px; } .content-form .dropdown-list-item { text-align: left; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .button { display: inline-block; height: 40px; padding: 0 20px; transition: all 0.2s ease-in; text-decoration: none; letter-spacing: 1px; border-radius: 3px; font: normal normal 15px/15px HelveticaNeue, Hind, serif; } .button_full-width { display: block; width: 100%; } .button__content { display: flex; align-items: center; justify-content: center; height: 100%; } .button_primary { color: #fff; background: var(--primary-color); } .button_primary:hover { cursor: pointer; background: var(--primary-color-dark); } .button.button_primary_disabled, .button.button_primary_disabled:hover { cursor: not-allowed; color: #fff; background: #c8d0d8; } .button_secondary { box-sizing: border-box; color: var(--primary-color); border: 1px solid var(--primary-color); background: white; } .button_secondary:hover { cursor: pointer; color: var(--primary-color-dark); border: 1px solid var(--primary-color-dark); background: #f0f7fd; } @supports (background: color-mix(in srgb, white, var(--primary-color))) { .button_secondary:hover { color: color-mix(in srgb, var(--primary-color) 90%, black); border-color: color-mix(in srgb, var(--primary-color) 80%, black); background: color-mix(in srgb, var(--primary-color) 5%, transparent); } } .button.button_secondary_disabled, .button.button_secondary_disabled:hover { cursor: not-allowed; color: #c8d0d8; border: 1px solid #c8d0d8; background: transparent; } .button_cancel { color: var(--primary-color); background: transparent; } .button_cancel:hover { cursor: pointer; color: var(--primary-color-dark); } .button.button_cancel_disabled, .button.button_cancel_disabled:hover { cursor: not-allowed; color: #c8d0d8; }.spinner-button__spinner { display: inline-block; visibility: hidden; max-width: 0; margin-left: 0; transition: all 0.2s ease-in-out; animation: rotating 2s linear infinite; opacity: 0; font-size: 15px; } .spinner-button__spinner_visible { visibility: visible; max-width: 100px; margin-left: 5px; opacity: 1; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .range-picker__label:first-child { text-align: initial; } .report-builder { padding-top: 70px; animation: fadeIn 1s ease-out; } .report-builder [data-slot=form-item] label { text-wrap: wrap; white-space: normal; } .report-builder__actions { display: flex; flex-direction: row; justify-content: space-between; padding-top: 30px; } @media only screen and (max-width: 500px) { .report-builder__actions { flex-direction: column-reverse; } } .report-builder__search-group { display: flex; flex-wrap: nowrap; width: 100%; max-width: 450px; } @media only screen and (max-width: 768px) { .report-builder__search-group { align-items: flex-start; } } .report-builder__search-input-group { display: flex; align-items: center; width: 100%; transition: 0.2s ease; transform: scale(1); transform-origin: 0 0; } @media only screen and (max-width: 768px) { .report-builder__search-input-group { align-items: flex-start; flex-direction: column; } } .report-builder__search-input { width: 100%; margin-right: 20px; transition: all 0.3s linear; } @media only screen and (max-width: 768px) { .report-builder__search-input { margin: 0; } .report-builder__search-input input { padding: 0; } .report-builder__search-input .search-input__icon-container { display: none; } .report-builder__search-input i { font-size: 16px; } } .report-builder__search-input input { width: 100%; text-overflow: ellipsis; } .report-builder__criterial-btn { display: flex; cursor: pointer; font-weight: bold; } .report-builder__criterial-btn span { white-space: nowrap; } .report-builder__criterial-btn_desktop { margin-top: 15px; padding: 10px 0px; border-bottom: 2px solid #c8d0d8; font-size: 18px; } .report-builder__criterial-btn_desktop span { padding-left: 10px; } .report-builder__criterial-btn_mobile { display: none; margin-top: 10px; font-size: 14px; } @media only screen and (max-width: 768px) { .report-builder__criterial-btn_mobile { display: flex; } } .report-builder__criterial-arrow { margin-left: 10px; transition: transform 0.4s ease-in-out; vertical-align: middle; } .report-builder__criterial-arrow_down { transform: rotateX(180deg); } .report-builder__actions-right { display: flex; align-items: flex-start; justify-content: flex-end; } @media only screen and (max-width: 500px) { .report-builder__actions-right { margin-bottom: 10px; } } .report-builder__action-button { padding: 0 15px; line-height: 15px; } @media only screen and (max-width: 992px) { .report-builder__action-button { padding: 0 10px; } .report-builder__action-button:last-child { padding-right: 0; } .report-builder__action-button_mobile-hide { display: none; } } .report-builder__mobile-filters-container { display: none; width: 71px; height: 45px; } @media only screen and (max-width: 992px) { .report-builder__mobile-filters-container { display: block; } } .report-builder__mobile-filters-container .mobile-table-sort__icon { font-size: 23px; } .report-builder__mobile-filters-container .mobile-table-sort__filters-container { top: 46px; } .report-builder__mobile-search-button { display: none; padding: 1px 0 0 0; } @media only screen and (max-width: 768px) { .report-builder__mobile-search-button { display: block; } } .report-builder__mobile-search-button .image-add-button__icon { font-size: 18px; } .report-builder__table { padding-top: 20px; } .report-builder__mobile-filters { display: none; } @media only screen and (max-width: 992px) { .report-builder__mobile-filters { display: block; } } .report-builder__mobile-filters .mobile-table-sort__icon { font-size: 23px; } .report-builder__mobile-filters .mobile-table-sort__filters-container { top: 46px; } .report-builder .selected-items-footer__item { width: 16.66%; } .report-builder__bulk-update-button { height: 26px; font-size: 16px; }.content-section-title-with-actions__content { display: flex; flex-direction: row; justify-content: space-between; align-items: end; } .section-divider_hidden { display: none; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .report-summary { margin-top: 25px; display: flex; flex-direction: row; justify-content: space-around; align-items: start; flex-wrap: wrap; } .report-summary__number-value { padding-bottom: 0 !important; } .report-summary__download-summary-button { color: #6e767e; font-weight: 550; font-size: 10pt; font-family: HelveticaNeue, Hind, serif; text-decoration: underline; } .report-summary__download-summary-button .button__content { align-items: end; } .report-summary__download-summary-button:hover { color: black; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .report-by-options__line { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .report-by-options__line-header { align-items: flex-start; margin: 25px 0; } .report-by-options__line-header div { padding: 0 10px; font-size: 1em; } .report-by-options__item { width: 100%; } .report-by-options__value { padding-bottom: 30px; font-size: 1.5em; font-weight: 600; } .report-by-options__value-highlighter { color: blueviolet; } @media only screen and (max-width: 992px) { .report-by-options { overflow: auto; } .report-by-options__scrollable-table { min-width: 992px; overflow: hidden; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .report-trends { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: start; row-gap: 30px; } .report-trends__charts-section { width: 100%; } @media only screen and (max-width: 768px) { .report-trends__charts-section { justify-self: center; } } .report-trends__chart-title { font-size: 1.8em; text-transform: capitalize; font-weight: 600; color: #6e767e; margin-bottom: 25px; } .report-trends__charts-group { display: flex; flex-direction: row; justify-content: space-around; align-items: start; height: 100%; } .report-trends__empty-chart { font-size: 1.3em; } .report-trends__chart { width: 60% !important; padding: 0 !important; } @media only screen and (max-width: 768px) { .report-trends__chart { width: 85% !important; } .report-trends { grid-template-columns: 1fr; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .pagination__btn, .pagination__break, .pagination__item { width: 30px; height: 30px; cursor: pointer; text-align: center; line-height: 30px; } .pagination__btn-link, .pagination__item-link { display: inline-block; width: 100%; height: 100%; outline: none; } .pagination { display: flex; } .pagination__arrow { display: inline-block; padding: 4px; border: solid #838383; border-width: 0 2px 2px 0; } .pagination__arrow_left { transform: rotate(135deg); } .pagination__arrow_right { transform: rotate(-45deg); } .pagination__item { margin: 0 5px; border: 1px solid transparent; } .pagination__item_active { color: white; border-radius: 3px; background-color: var(--primary-color); font-weight: bold; } .pagination__item-link { text-decoration: none; color: black; } .pagination__item-link_active { color: white; } .pagination__item-link:focus-visible { box-shadow: 0 0 0 3px var(--primary-color-light); border-radius: 3px; } .pagination__break:focus-visible { box-shadow: 0 0 0 3px var(--primary-color-light); border-radius: 3px; } .pagination__btn_disabled { cursor: default; opacity: 0.5; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .table-header__row { border-bottom: 1px solid #c8d0d8; } .table-header th:first-child { padding-left: 20px; } .table-header th:last-child { padding-right: 20px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .table-header-cell { padding: 10px 5px; font-size: 0.85em; font-weight: bold; } .table-header-cell_text-align_left { text-align: left; } .table-header-cell_text-align_center { text-align: center; } .table-header-cell_text-align_right { text-align: right; } .table-header-cell__content { position: relative; display: inline-block; cursor: default; vertical-align: top; } .table-header-cell__content_sortable { cursor: pointer; } .table-header-cell__content_sortable_active { padding-right: 15px; } .table-header-cell__corner { position: absolute; top: 5px; right: 0; width: 0; height: 0; } .table-header-cell__corner_up { border-right: 5px solid transparent; border-bottom: 5px solid #c8d0d8; border-left: 5px solid transparent; } .table-header-cell__corner_down { border-top: 5px solid #c8d0d8; border-right: 5px solid transparent; border-left: 5px solid transparent; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .table-row { transition: 0.2s ease; border-bottom: 1px solid #d2dae2; color: #333333; } .table-row:hover { background-color: #f3f4f5; } .table-row td:first-child { padding-left: 20px; } .table-row td:last-child { padding-right: 20px; }.table-row-cell { height: 55px; padding: 10px 5px; vertical-align: middle; word-break: break-word; } .table-row-cell_text-align_left { text-align: left; } .table-row-cell_text-align_center { text-align: center; } .table-row-cell_text-align_right { text-align: right; }.linkable-table-row-cell { padding: 0; } .linkable-table-row-cell__link { display: flex; align-items: center; height: 100%; padding: 10px 5px; text-decoration: none; color: inherit; } .linkable-table-row-cell__link:active { color: inherit; } .linkable-table-row-cell__link:focus { outline: none; } .linkable-table-row-cell.table-row-cell_text-align_left .linkable-table-row-cell__link { justify-content: flex-start; } .linkable-table-row-cell.table-row-cell_text-align_center .linkable-table-row-cell__link { justify-content: center; } .linkable-table-row-cell.table-row-cell_text-align_right .linkable-table-row-cell__link { justify-content: flex-end; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .table_header_sticky th::after { position: absolute; left: 0; display: block; width: 100%; height: 1px; content: ""; background-color: #c8d0d8; } .table { width: 100%; } .table_header_sticky th { position: relative; /* IE11 fix */ position: sticky; z-index: 2; top: 0; background-color: #fff; } .table_header_sticky th::after { bottom: -1px; }.desktop-paginated-table { padding-bottom: 10px; } .desktop-paginated-table__loader { padding: 10px 0; } .desktop-paginated-table__pagination { padding: 10px 0; z-index: 1; background-color: white; } .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__pagination { position: sticky; top: 0; } .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__table th { top: 50px; } .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__table_attach_top th { top: 0; }.mobile-paginated-table__skeleton { margin-bottom: 50px; }.paginated-table { padding-bottom: 10px; } .paginated-table__loader { padding: 10px 0; } .paginated-table__pagination { padding: 10px 0; background-color: white; } .paginated-table_header-controls_sticky .paginated-table__pagination { position: sticky; top: 0; } .paginated-table_header-controls_sticky .paginated-table__table th { top: 50px; } .paginated-table_header-controls_sticky .paginated-table__table_attach_top th { top: 0; }.outside-click { width: 100%; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .dropdown-menu { position: relative; display: inline-block; } .dropdown-menu__content { position: absolute; z-index: 1; top: 100%; right: 50%; display: flex; visibility: hidden; align-items: stretch; flex-direction: column; transition: 0.2s ease-in-out; transform: scale(0); transform: translateX(50%) scale(0); transform-origin: 50% -10%; opacity: 0; border: 1px solid #c8d0d8; border-radius: 3px; background-color: #fff; box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); } .dropdown-menu__content-animation-enter-active, .dropdown-menu__content-animation-enter-done { visibility: visible; transform: translateX(50%) scale(1); opacity: 1; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } .asset-image-wrapper { display: flex; align-items: center; justify-content: center; } .asset-image { max-width: inherit; max-height: inherit; animation: fadeIn 0.2s; } .asset-image_loaded { cursor: pointer; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .ciq-selected-tags { display: flex; flex-wrap: wrap; } .ciq-selected-tags__tag { display: flex; margin: 5px; padding: 5px; border-radius: 5px; background-color: #efeeea; } .ciq-selected-tags__tag-label { overflow: hidden; max-width: 200px; margin-right: 5px; white-space: nowrap; text-overflow: ellipsis; line-height: 19px; } .ciq-selected-tags__tag-label__nowrap { white-space: unset; } .ciq-selected-tags__tag-clear-button { align-self: center; position: relative; display: inline-block; box-sizing: border-box; width: 10px; height: 10px; cursor: pointer; color: #000000; line-height: 10px; } .ciq-selected-tags__tag-clear-button::before, .ciq-selected-tags__tag-clear-button::after { position: absolute; top: 50%; left: 50%; display: block; width: 10px; height: 2px; margin-left: -5px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #000000; } .ciq-selected-tags__tag-clear-button::after { transform: rotate(45deg); } .ciq-selected-tags__tag-clear-button:hover::before, .ciq-selected-tags__tag-clear-button:hover::after { background-color: #333333; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-table-row { text-decoration: none; text-transform: capitalize; color: #333333; } .collection-table-row__title { text-transform: none; } .collection-table-row:hover { cursor: pointer; } .collection-table-row__mail-to { display: inline-block; padding: 0; text-align: left; text-decoration: underline; color: var(--primary-color); font-size: 16px; } .collection-table-row__dimensions { display: block; margin-top: 5px; text-transform: lowercase; color: #6e767e; } .collection-table-row__asset { max-width: 121px; height: 80px; max-height: 80px; } .collection-table-row__button { color: #c8d0d8; } .collection-table-row__button:hover { color: #6e767e; } .collection-table-row__button_active, .collection-table-row__button_active:hover { color: #000000; } .collection-table-row__icon { font-size: 18px; } .collection-table-row__action { width: 100%; padding: 10px 15px; transition: 0.2s ease; -moz-text-align-last: left; text-align-last: left; white-space: nowrap; text-decoration: none; color: #000; font-size: 14px; } .collection-table-row__action:hover { background-color: #f3f4f5; } .collection-table-row__price { display: block; margin-bottom: 10px; } .collection-table-row__date { color: #6e767e; } .collection-table-row__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .collection-table-row__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-mobile-table-row { display: flex; align-items: center; min-height: 140px; margin-bottom: 12px; padding: 10px 0; cursor: pointer; text-decoration: none; color: inherit; border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); } @media only screen and (max-width: 480px) { .collection-mobile-table-row { flex-direction: column; justify-content: center; height: auto; } } .collection-mobile-table-row__mail-to { display: inline-block; margin-left: 5px; padding: 0; text-align: left; color: var(--primary-color); font-size: 16px; line-height: unset; } @media only screen and (max-width: 480px) { .collection-mobile-table-row__mail-to { margin: 10px 0; text-align: center; } .collection-mobile-table-row__content { text-align: center; } } .collection-mobile-table-row:not(:first-child) { border-top: 0; } .collection-mobile-table-row__image-container { width: 190px; padding: 0 30px 0 30px; } .collection-mobile-table-row__asset { overflow: hidden; width: 100%; max-width: 130px; max-height: 100px; border-radius: 3px; } @media only screen and (max-width: 480px) { .collection-mobile-table-row__asset { max-width: 100%; max-height: 150px; } } .collection-mobile-table-row__artist, .collection-mobile-table-row__title, .collection-mobile-table-row__cost-basis, .collection-mobile-table-row__appraisal, .collection-mobile-table-row__type-field { padding: 3px 0; } .collection-mobile-table-row__cost-basis, .collection-mobile-table-row__appraisal { display: flex; } @media only screen and (max-width: 480px) { .collection-mobile-table-row__cost-basis, .collection-mobile-table-row__appraisal { flex-direction: column; justify-content: center; margin-top: 10px; } .collection-mobile-table-row__type-field { margin-top: 10px; } } .collection-mobile-table-row__artist { color: var(--primary-color); font-size: 14px; } @media only screen and (max-width: 480px) { .collection-mobile-table-row__artist { padding-top: 20px; } } .collection-mobile-table-row__title { text-decoration: none; color: inherit; font-weight: 600; } .collection-mobile-table-row__price-content { margin-left: 5px; } @media only screen and (max-width: 480px) { .collection-mobile-table-row__price-content { margin: 10px 0; } } .collection-mobile-table-row__value_price { display: block; margin-bottom: 5px; } .collection-mobile-table-row__value_date { color: #6e767e; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-skeleton { display: flex; align-items: center; border: 1px solid #c8d0d8; border-radius: 3px; height: 120px; box-shadow: 0 0 3px 0px rgba(206, 206, 206, 0.5); text-decoration: none; color: inherit; } @media only screen and (max-width: 480px) { .collection-skeleton { flex-direction: column; justify-content: center; height: auto; padding: 10px 0; } .collection-skeleton__content { text-align: center; } } .collection-skeleton:not(:first-child) { border-top: 0; } .collection-skeleton__image-container { width: 130px; height: 100px; margin: 0 30px 0 30px; padding: 0 30px 0 30px; border-radius: 5px; animation: skeletonGradient 3s ease infinite; background: linear-gradient(-45deg, #ffffff, #e5e5e5, #dfdfdf, #e3e3e3, #ffffff); background-size: 400% 400%; } @media only screen and (max-width: 480px) { .collection-skeleton__image-container { width: 80%; margin: 0 auto; } } .collection-skeleton__artist, .collection-skeleton__title, .collection-skeleton__cost-basis { width: 70px; padding: 10px 0; margin: 10px 0; border-radius: 5px; animation: skeletonGradient 3s ease infinite; background: linear-gradient(-45deg, #ffffff, #e5e5e5, #dfdfdf, #e3e3e3, #ffffff); background-size: 400% 400%; } @media only screen and (max-width: 480px) { .collection-skeleton__artist, .collection-skeleton__title, .collection-skeleton__cost-basis { margin: 10px auto; } } .collection-skeleton__artist { font-size: 14px; width: 100px; color: var(--primary-color); } .collection-skeleton__title { width: 150px; font-weight: 600; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .report-assets-list__top-title { display: flex; justify-content: start; align-items: center; flex-direction: row; } @media only screen and (max-width: 768px) { .report-assets-list__top-title { flex-direction: column; } } .report-assets-list__buttons-group { display: flex; align-items: center; justify-content: space-around; } @media only screen and (max-width: 768px) { .report-assets-list__buttons-group { margin-bottom: 20px; justify-content: flex-start; } } .report-assets-list__title { flex-grow: 1; } @media only screen and (max-width: 768px) { .report-assets-list .content-form__form-btn_submit:first-child { margin: 0px; } } .report-assets-list .content-form__form-btn_submit:first-child_disabled { pointer-events: none; color: #fff; background: var(--primary-color); }.modal-container { position: fixed; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(251, 254, 255, 0.93); } .modal-container_shadow-disabled { background-color: transparent; } .modal-container_shadow-extra::after { position: absolute; top: 100%; width: 100%; height: 100%; content: ""; background-color: rgba(251, 254, 255, 0.93); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .modal-header { display: flex; flex-shrink: 0; box-sizing: border-box; height: 80px; padding: 20px 30px; border-bottom: 1px solid #c8d0d8; } .modal-header__title { align-self: flex-end; flex-grow: 1; color: black; font-size: 24px; font-weight: bold; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .modal-header__cross-icon { position: relative; display: inline-block; box-sizing: border-box; width: 25px; height: 25px; cursor: pointer; color: #6e767e; line-height: 25px; } .modal-header__cross-icon::before, .modal-header__cross-icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 25px; height: 3px; margin-left: -12.5px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #6e767e; } .modal-header__cross-icon::after { transform: rotate(45deg); } .modal-header__cross-icon:hover::before, .modal-header__cross-icon:hover::after { background-color: rgb(149.5550847458, 156.25, 162.9449152542); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .modal-footer { display: flex; justify-content: flex-end; margin-top: auto; padding: 20px; } .modal-footer__submit-btn { margin-left: 30px; } .modal-footer__loader { width: 30px; height: 30px; margin-top: -30px; margin-left: 10px; } @media only screen and (max-width: 600px) { .modal-footer { padding: 20px 30px 10px 30px; flex-shrink: 0; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .modal { animation: fadeIn 0.1s ease-out; } .modal__window { display: flex; flex-direction: column; width: 100%; max-width: 800px; max-height: 75%; border: 2px solid #cecece; border-radius: 4px; background-color: #fff; box-shadow: 0 0 15px 0 #cecece; } @media only screen and (max-width: 600px) { .modal__window { max-height: 90%; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-select { width: 100%; border-color: #c9c9c9; } .forms-select__trigger[data-placeholder] [data-slot=select-value] { color: rgb(203, 213, 225); opacity: 0.6; } .forms-select__trigger { width: 100%; border: 1px solid #c9c9c9 !important; border-radius: 10px !important; } .forms-select__trigger::after { display: none; } .forms-select__trigger--invalid { color: #ef4444 !important; border-color: #ef4444 !important; } .forms-select__trigger--invalid::after { background-color: #ef4444 !important; } .forms-select__trigger--active { border-color: #3b82f6 !important; } .forms-select__trigger--active::after { background-color: #3b82f6 !important; } .forms-select__content { max-height: 200px; } .forms-select__item { cursor: pointer; } .forms-select__item--no-results { padding: 0.5rem 0.75rem; color: #9ca3af; font-style: italic; text-align: center; cursor: default; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-checkbox { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .forms-checkbox--disabled { opacity: 0.5; cursor: not-allowed; } .forms-checkbox--invalid .forms-checkbox__input { border-color: #ef4444 !important; } .forms-checkbox--invalid .forms-checkbox__label { color: #ef4444; } .forms-checkbox--active .forms-checkbox__input { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .forms-checkbox__input { flex-shrink: 0; cursor: pointer; border: 1px solid rgb(96, 52, 212); width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; min-height: 1.25rem !important; } .forms-checkbox__input svg { width: 1rem !important; height: 1rem !important; } .forms-checkbox__input[data-state=checked] { background-color: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; } .forms-checkbox__input:disabled { cursor: not-allowed; } .forms-checkbox__label { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .forms-checkbox__label--disabled { cursor: not-allowed; opacity: 0.7; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .forms-autosuggest { width: 100%; position: relative; } .forms-autosuggest--invalid .forms-autosuggest__trigger { border-color: #ef4444 !important; } .forms-autosuggest--invalid .forms-autosuggest__trigger::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest--invalid .forms-autosuggest__trigger::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest--invalid .forms-autosuggest__trigger:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-autosuggest--active .forms-autosuggest__trigger { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-autosuggest--disabled { opacity: 0.6; cursor: not-allowed; } .forms-autosuggest--disabled .forms-autosuggest__trigger { cursor: not-allowed; background: #f5f5f5; } .forms-autosuggest__wrapper { width: 100%; position: relative; } .forms-autosuggest__input-container { position: relative; width: 100%; } .forms-autosuggest__input-container [cmdk-input-wrapper] { border-bottom: none !important; padding: 0 !important; } .forms-autosuggest--with-search-icon .forms-autosuggest__input-container [cmdk-input-wrapper] { border-bottom: none !important; padding: 0 !important; display: flex; align-items: center; border: 1px solid #c9c9c9 !important; border-radius: 10px !important; background: #fff; height: 40px; transition: all 0.2s ease-in-out; } .forms-autosuggest--with-search-icon .forms-autosuggest__input-container [cmdk-input-wrapper] svg { margin-left: 12px; margin-right: 8px; color: #6b7280; flex-shrink: 0; } .forms-autosuggest--with-search-icon .forms-autosuggest__trigger { padding-left: 8px !important; border: none !important; height: auto !important; box-shadow: none !important; } .forms-autosuggest--with-search-icon .forms-autosuggest__trigger:focus { border: none !important; box-shadow: none !important; } .forms-autosuggest--with-search-icon .forms-autosuggest__input-container [cmdk-input-wrapper]:focus-within { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-autosuggest--with-search-icon.forms-autosuggest--invalid .forms-autosuggest__input-container [cmdk-input-wrapper] { border-color: #ef4444 !important; } .forms-autosuggest--with-search-icon.forms-autosuggest--invalid .forms-autosuggest__input-container [cmdk-input-wrapper]:focus-within { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-autosuggest--with-search-icon.forms-autosuggest--active .forms-autosuggest__input-container [cmdk-input-wrapper] { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-autosuggest--with-search-icon .forms-autosuggest__arrow { right: 12px; z-index: 1; } .forms-autosuggest--with-search-icon.forms-autosuggest--disabled .forms-autosuggest__input-container [cmdk-input-wrapper] { background: #f5f5f5; cursor: not-allowed; } .forms-autosuggest__trigger { width: 100%; border: 1px solid #c9c9c9 !important; border-radius: 10px !important; padding: 10px 35px 10px 15px !important; height: 40px !important; transition: all 0.2s ease-in-out; background: #fff; font-size: 14px; color: #222; } .forms-autosuggest__trigger::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest__trigger::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest__trigger:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-autosuggest__trigger--invalid { border-color: #ef4444 !important; } .forms-autosuggest__trigger--invalid::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest__trigger--invalid::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-autosuggest__trigger--invalid:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-autosuggest__trigger--active { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-autosuggest__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #666; cursor: pointer; pointer-events: auto; transition: transform 0.2s ease; } .forms-autosuggest__arrow--open { transform: translateY(-50%) rotate(180deg); } .forms-autosuggest__dropdown-wrapper { position: relative; margin-top: 4px; } .forms-autosuggest__content { position: absolute; z-index: 10; width: 100%; background: #fff; border-radius: 10px; border: 1px solid #c9c9c9; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08); transition: opacity 0.15s; opacity: 1; pointer-events: auto; } .forms-autosuggest__content--hidden { opacity: 0; pointer-events: none; display: none; } .forms-autosuggest__content--open { opacity: 1; pointer-events: auto; display: block; } .forms-autosuggest__viewport { max-height: 200px; overflow-y: auto; } .forms-autosuggest__viewport--has-content { padding: 4px 0; } .forms-autosuggest__group { display: flex; flex-direction: column; gap: 2px; padding: 4px; } .forms-autosuggest__item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; color: #222; background: transparent; border: none; cursor: pointer; border-radius: 6px; transition: background 0.12s, color 0.12s; } .forms-autosuggest__item:hover, .forms-autosuggest__item:focus { background: #f0f4fa; outline: none; } .forms-autosuggest__item--selected { background: #e6f0ff; color: #1a5cff; font-weight: 500; flex-direction: row-reverse; justify-content: space-between; } .forms-autosuggest__item--selected:hover { background: #d9e7ff; } .forms-autosuggest__item--create { font-weight: 500; color: #1a5cff; } .forms-autosuggest__item--create:hover { background: #edf2ff; } .forms-autosuggest__item-check { width: 14px !important; height: 14px !important; color: #1a5cff; flex-shrink: 0; } .forms-autosuggest__no-results { padding: 12px 16px; color: #9ca3af; font-size: 14px; text-align: center; font-style: italic; } .forms-autosuggest__loading { display: flex; align-items: center; justify-content: center; padding: 16px; gap: 8px; color: #6b7280; } .forms-autosuggest__loading-icon { animation: spin 1s linear infinite; color: #3b82f6; flex-shrink: 0; } .forms-autosuggest__loading-text { font-size: 14px; color: #6b7280; } .forms-autosuggest__item-icon { flex-shrink: 0; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-range-picker { width: 100%; position: relative; font-size: 14px; } .forms-range-picker--invalid .forms-range-picker__input-wrapper { border-color: #ef4444 !important; } .forms-range-picker--invalid .forms-range-picker__input-wrapper:hover { border-color: #ef4444 !important; } .forms-range-picker--invalid .forms-range-picker__input .forms-input__field { border-color: transparent !important; color: #ef4444; } .forms-range-picker--invalid .forms-range-picker__input .forms-input__field::-moz-placeholder { color: rgba(239, 68, 68, 0.5); } .forms-range-picker--invalid .forms-range-picker__input .forms-input__field::placeholder { color: rgba(239, 68, 68, 0.5); } .forms-range-picker--active .forms-range-picker__input-wrapper { border-color: #3b82f6 !important; } .forms-range-picker--disabled { opacity: 0.6; cursor: not-allowed; } .forms-range-picker--disabled .forms-range-picker__input-wrapper { cursor: not-allowed; background-color: #f9fafb; } .forms-range-picker--disabled .forms-range-picker__input { cursor: not-allowed; } .forms-range-picker__content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; } @media only screen and (max-width: 500px) { .forms-range-picker__content { flex-direction: column; gap: 12px; } } .forms-range-picker__input-wrapper { position: relative; flex: 1; display: flex; align-items: center; transition: border-color 0.2s ease-in-out; } @media only screen and (max-width: 500px) { .forms-range-picker__input-wrapper { width: 100%; } } .forms-range-picker__input-wrapper:hover { border-color: #333333; } @media only screen and (max-width: 500px) { .forms-range-picker__input-wrapper--first { margin-right: 0; } } .forms-range-picker__input-wrapper--second { position: relative; } @media only screen and (max-width: 500px) { .forms-range-picker__input-wrapper--second { margin-left: 0; } } .forms-range-picker__mask { font-size: 14px; color: #6e767e; margin-right: 4px; flex-shrink: 0; } .forms-range-picker__input { flex: 1; min-width: 0; } .forms-range-picker__input .forms-input { width: 100%; } .forms-range-picker__input .forms-input__field { border: none !important; box-shadow: none !important; padding: 4px 8px; height: auto; min-height: 32px; background: transparent; } .forms-range-picker__input .forms-input__field:focus { outline: none; box-shadow: none !important; border: none !important; } .forms-range-picker__separator { padding: 0 8px; color: #6e767e; font-size: 14px; flex-shrink: 0; } @media only screen and (max-width: 500px) { .forms-range-picker__separator { display: none; } } .forms-range-picker__error { position: absolute; bottom: -18px; left: 0; font-size: 12px; color: #ef4444; margin-top: 4px; white-space: nowrap; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .file-preview { display: flex; align-items: center; width: 100%; height: 52px; border: 1px solid #dee1e5; border-radius: 3px; outline: none; padding: 0 20px; transition-duration: 0.3s; } .file-preview:hover { border-color: #333333; } .file-preview--error { border-color: #ff2652; } .file-preview__icon { width: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .file-preview__icon svg, .file-preview__icon i { width: 100%; height: auto; } .file-preview__name { flex-grow: 1; padding: 0 20px; color: #010101; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-preview__link { text-decoration: none; color: #010101; flex-grow: 1; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dropzone-form .dropzone { min-height: 120px; display: flex; border-radius: 3px; transition: all 0.3s ease; } .dropzone-form .dropzone__drop-area-container { position: relative; display: flex; flex-grow: 1; width: 100%; cursor: pointer; } .dropzone-form .dropzone__drop-area { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; border-radius: 3px; padding: 20px; background: transparent; transition: all 0.3s ease; } .dropzone-form .dropzone__drop-area--drag-over { background-color: #f8f9fa; } .dropzone-form .dropzone__drop-area-caption { width: 100%; text-align: center; font-size: 1.8em; color: #666; font-weight: 500; } .dropzone-form .dropzone__validation { padding-top: 20px; color: #e74c3c; font-size: 14px; } .dropzone-form_invalid { border: 1px solid #e74c3c; }.forms-radio-group { display: flex; flex-direction: column; width: 100%; } .forms-radio-group--disabled { opacity: 0.6; cursor: not-allowed; } .forms-radio-group--invalid .forms-radio-group__radio { border-color: var(--color-error, #ef4444); } .forms-radio-group__container { display: flex; flex-direction: column; gap: 16px; } .forms-radio-group__item { display: flex; align-items: center; gap: 10px; } .forms-radio-group__radio { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #d1d5db; border-radius: 50%; background: white; position: relative; cursor: pointer; transition: all 0.2s ease; } .forms-radio-group__radio:hover { border-color: #9ca3af; } .forms-radio-group__radio:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); border-color: var(--primary-color); } .forms-radio-group__radio[data-state=checked] { border-color: var(--color-primary, #6366f1); background: white; } .forms-radio-group__radio[data-state=checked]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); } .forms-radio-group__radio[data-disabled] { opacity: 0.5; cursor: not-allowed; border-color: #e5e7eb; } .forms-radio-group__label { font-size: 14px; line-height: 1.5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: #374151; flex: 1; } .forms-radio-group__label--disabled { cursor: not-allowed; opacity: 0.6; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-multi-select { position: relative; width: 100%; } .forms-multi-select--invalid .forms-multi-select__trigger { border-color: #ef4444 !important; } .forms-multi-select--invalid .forms-multi-select__trigger:hover { border-color: #dc2626 !important; } .forms-multi-select--invalid .forms-multi-select__trigger:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-multi-select--active .forms-multi-select__trigger { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-multi-select--disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .forms-multi-select--disabled .forms-multi-select__trigger { cursor: not-allowed; background-color: #f3f4f6; } .forms-multi-select__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; max-height: 60px; border: 1px solid #c9c9c9; border-radius: 10px; padding: 8px 16px 8px 12px; font-size: 14px; background-color: white; color: #374151; transition: all 0.2s ease; cursor: pointer; gap: 8px; overflow: hidden; } .forms-multi-select__trigger:hover { background-color: #f9fafb; border-color: var(--primary-color, #6034d4); } .forms-multi-select__trigger:focus { outline: none; border-color: var(--primary-color, #6034d4); box-shadow: 0 0 0 2px rgba(96, 52, 212, 0.1); } .forms-multi-select__selected-items { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; min-height: 24px; transition: all 0.2s ease; } .forms-multi-select__tags-container { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; width: 100%; overflow: hidden; min-height: 24px; transition: all 0.2s ease; } .forms-multi-select__tag { display: inline-flex; align-items: center; background-color: rgba(96, 52, 212, 0.1); border: 1px solid var(--primary-color, #6034d4); border-radius: 16px; padding: 2px 8px; font-size: 12px; color: var(--primary-color, #6034d4); max-width: 120px; min-width: 0; flex-shrink: 0; transition: all 0.2s ease; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: 20px; } .forms-multi-select__tag:hover { background-color: rgba(96, 52, 212, 0.15); border-color: #4B0082; } .forms-multi-select__tag-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .forms-multi-select__more-indicator { color: var(--primary-color, #6034d4); font-size: 12px; font-weight: 500; padding: 2px 6px; background-color: rgba(96, 52, 212, 0.1); border-radius: 12px; border: 1px solid var(--primary-color, #6034d4); flex-shrink: 0; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: 20px; display: flex; align-items: center; } .forms-multi-select__placeholder { color: rgb(203, 213, 225); opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; user-select: none; min-height: 24px; display: flex; align-items: center; } .forms-multi-select__icon { height: 16px; width: 16px; color: var(--primary-color, #6034d4); transition: transform 0.2s ease; flex-shrink: 0; pointer-events: none; } .forms-multi-select__icon--open { transform: rotate(180deg); } .forms-multi-select__content { overflow: hidden; background-color: white; border-radius: 10px; border: 1px solid #c9c9c9; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); z-index: 1000; width: var(--radix-select-trigger-width); min-width: var(--radix-select-trigger-width); } .forms-multi-select__viewport { padding: 6px; max-height: 240px; overflow-y: auto; scroll-behavior: smooth; width: 100%; } .forms-multi-select__viewport::-webkit-scrollbar { width: 6px; } .forms-multi-select__viewport::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; } .forms-multi-select__viewport::-webkit-scrollbar-thumb { background: rgba(96, 52, 212, 0.3); border-radius: 3px; } .forms-multi-select__viewport::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #6034d4); } .forms-multi-select__item { display: flex; align-items: center; padding: 8px 12px; font-size: 14px; color: #374151; cursor: pointer; border-radius: 6px; transition: all 0.15s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-bottom: 2px; width: 100%; } .forms-multi-select__item:hover { background-color: rgba(96, 52, 212, 0.05); color: var(--primary-color, #6034d4); } .forms-multi-select__item:active { background-color: rgba(96, 52, 212, 0.1); transform: scale(0.98); } .forms-multi-select__item:last-child { margin-bottom: 0; } .forms-multi-select__item--selected { background-color: rgba(96, 52, 212, 0.1); color: var(--primary-color, #6034d4); } .forms-multi-select__item--selected:hover { background-color: rgba(96, 52, 212, 0.15); } .forms-multi-select__item--selected:active { background-color: rgba(96, 52, 212, 0.2); } .forms-multi-select__item-content { display: flex; align-items: center; width: 100%; gap: 10px; } .forms-multi-select__checkbox { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 4px; background: white; transition: all 0.2s ease; flex-shrink: 0; } .forms-multi-select__item--selected .forms-multi-select__checkbox { border-color: var(--primary-color, #6034d4); background: var(--primary-color, #6034d4); } .forms-multi-select__checkbox-icon { color: white; opacity: 0; transition: opacity 0.2s ease; } .forms-multi-select__item--selected .forms-multi-select__checkbox-icon { opacity: 1; } .forms-multi-select__item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forms-multi-select__no-options { padding: 12px; text-align: center; color: #9ca3af; font-style: italic; font-size: 14px; } .forms-multi-select__add-new { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; background-color: #f9fafb; } .forms-multi-select__add-new-input { flex: 1; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; outline: none; transition: all 0.2s ease; } .forms-multi-select__add-new-input:focus { border-color: var(--primary-color, #6034d4); box-shadow: 0 0 0 2px rgba(96, 52, 212, 0.1); } .forms-multi-select__add-new-input::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-multi-select__add-new-input::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-multi-select__add-new-button { padding: 6px 12px; background-color: var(--primary-color, #6034d4); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .forms-multi-select__add-new-button:hover { background-color: #4B0082; transform: translateY(-1px); } .forms-multi-select__add-new-button:active { transform: translateY(0); } @keyframes forms-multi-select-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes forms-multi-select-slide-up { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } @media (max-width: 768px) { .forms-multi-select__trigger { min-height: 44px; max-height: 52px; padding: 10px 16px 10px 12px; } .forms-multi-select__tag { font-size: 11px; padding: 2px 6px; max-width: 80px; } .forms-multi-select__tag-text { font-size: 11px; } .forms-multi-select__more-indicator { font-size: 11px; padding: 1px 4px; } .forms-multi-select__content { max-width: calc(100vw - 32px); } } @media (max-width: 480px) { .forms-multi-select__trigger { min-height: 40px; max-height: 48px; padding: 8px 12px 8px 10px; } .forms-multi-select__tag { max-width: 60px; font-size: 10px; padding: 1px 4px; } .forms-multi-select__tag-text { font-size: 10px; } .forms-multi-select__more-indicator { font-size: 10px; padding: 1px 3px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .forms-search-input { position: relative; width: 100%; display: flex; align-items: center; } .forms-search-input--filled .forms-search-input__clear-button { display: flex; } .forms-search-input--invalid .forms-search-input__field { border-color: #ef4444 !important; } .forms-search-input--active .forms-search-input__field { border-color: #3b82f6 !important; } .forms-search-input--disabled { opacity: 0.6; cursor: not-allowed; } .forms-search-input__icon-container { position: absolute; left: 12px; z-index: 1; display: flex; align-items: center; pointer-events: none; } .forms-search-input__icon { color: #6e767e; } .forms-search-input__field { padding-left: 40px !important; padding-right: 12px !important; } .forms-search-input__tooltip-wrapper { position: absolute; right: 12px; z-index: 2; display: flex; align-items: center; pointer-events: auto; } .forms-search-input__info-icon { color: #6e767e; cursor: help; transition: color 0.2s ease; } .forms-search-input__info-icon:hover { color: #333333; } .forms-search-input__clear-button { position: absolute; right: 12px; z-index: 3; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; cursor: pointer; color: #6e767e; transition: color 0.2s ease; } .forms-search-input__clear-button:hover { color: #333333; } .forms-search-input__clear-button:focus { outline: none; color: #333333; } .forms-search-input--with-tooltip .forms-search-input__field { padding-right: 40px !important; } .forms-search-input--filled .forms-search-input__clear-button { display: flex; } .forms-search-input--filled .forms-search-input__field { padding-right: 40px !important; } .forms-search-input--filled.forms-search-input--with-tooltip .forms-search-input__field { padding-right: 60px !important; } .forms-search-input--filled.forms-search-input--with-tooltip .forms-search-input__tooltip-wrapper { right: 40px; }.forms-textarea { width: 100%; position: relative; } .forms-textarea--invalid .forms-textarea__field { border-color: #ef4444 !important; color: #ef4444; } .forms-textarea--invalid .forms-textarea__field::-moz-placeholder { color: rgba(239, 68, 68, 0.5); } .forms-textarea--invalid .forms-textarea__field::placeholder { color: rgba(239, 68, 68, 0.5); } .forms-textarea--invalid .forms-textarea__field:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .forms-textarea--active .forms-textarea__field { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .forms-textarea--disabled { opacity: 0.6; cursor: not-allowed; } .forms-textarea--disabled .forms-textarea__field { cursor: not-allowed; } .forms-textarea--over-limit .forms-textarea__field { border-color: #f97316 !important; } .forms-textarea--over-limit .forms-textarea__field:focus { border-color: #f97316 !important; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1); } .forms-textarea__field { width: 100%; transition: all 0.2s ease-in-out; padding-bottom: 2rem; min-height: 100px; resize: none; overflow: hidden; field-sizing: content; height: auto; } .forms-textarea__field::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-textarea__field::placeholder { color: rgb(203, 213, 225); opacity: 0.6; } .forms-textarea__field:focus::-moz-placeholder { color: rgb(203, 213, 225); opacity: 0.4; } .forms-textarea__field:focus::placeholder { color: rgb(203, 213, 225); opacity: 0.4; } .forms-textarea__counter { position: absolute; bottom: 0.5rem; right: 0.5rem; font-size: 0.75rem; line-height: 1rem; pointer-events: none; } .forms-textarea__counter-text { color: #9ca3af; } .forms-textarea__counter-text--over-limit { color: #ef4444; font-weight: 600; }.dashboard-checkboxes-group__container { display: flex; flex-direction: column; gap: 8px; } .dashboard-checkboxes-group__checkbox { display: flex; align-items: center; } .dashboard-checkboxes-group__invalid-label { display: none; color: #ff2652; font-size: 12px; margin-top: 4px; } .dashboard-checkboxes-group__invalid-label_visible { display: block; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .manage-dashboard-model { width: 1500px !important; } .manage-dashboard-model__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .manage-dashboard-model .content-form__column { flex-basis: 50% !important; gap: 40px; display: flex; } @media only screen and (max-width: 992px) { .manage-dashboard-model .content-form__column { flex-basis: 100% !important; flex-wrap: wrap; } } .manage-dashboard-model .content-form__checkboxes-content { width: 100%; } @media only screen and (max-width: 992px) { .manage-dashboard-model .content-form__checkboxes-content { width: 100%; } } .manage-dashboard-model__select { width: 100%; } .manage-dashboard-model .content-form__checkboxes-label { width: 100%; } @media only screen and (max-width: 992px) { .manage-dashboard-model .content-form__checkboxes-label { padding-left: 15px; } } .manage-dashboard-model .content-form__checkbox { align-items: flex-start !important; width: 100%; } .manage-dashboard-model__model-wrapper { display: flex; flex-direction: column; padding: 0 30px; } @media only screen and (max-width: 992px) { .manage-dashboard-model__model-wrapper { gap: 0; padding: 0; } } .content-form__checkboxes-container { width: 100%; } .error-label { font-size: 16px; color: red; margin: 5px 0; text-align: left; } .form-field-array-wrapper { width: 100%; }.notification { display: flex; border-radius: 2px; background-color: white; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2); border-top: 3px solid; font-family: "Source Sans Pro", sans-serif; } .notification_normal { min-height: 77px; } .notification_small { min-height: 20px; /* for css animation */ } .notification__icon-container { display: flex; align-items: center; flex-shrink: 0; flex-direction: column; justify-content: flex-start; padding: 14px 0; border: 1px solid #d8e1e8; border-top: none; border-right: none; width: 60px; } .notification__icon-container_small { padding: 9px 0; } .notification__icon-wrapper { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; border-radius: 15px; } .notification__icon__loader { height: 30px; width: 30px; } .notification__content { display: flex; flex-grow: 1; padding: 20px 15px 20px 0; border: 1px solid #d8e1e8; border-top: none; border-left: none; } .notification__content_small { padding: 14px 15px 14px 0; } .notification__details { display: flex; flex-grow: 1; width: 100%; } .notification__details_small { display: flex; } .notification__details_normal { flex-direction: column; justify-content: space-between; } .notification__title { font-size: 16px; font-weight: bold; line-height: 20px; } .notification__title_small { padding-right: 15px; line-height: 18px; } .notification__title_normal { padding-bottom: 15px; } .notification__description { color: #001837; font-size: 14px; line-height: 20px; } .notification__close-icon-container { flex-shrink: 0; } .notification__close-icon { position: relative; width: 15px; height: 15px; margin-left: 15px; cursor: pointer; } .notification__close-icon-line { position: absolute; top: 45%; width: 100%; height: 2px; background-color: #d8e1e8; } .notification__close-icon-line:first-child { transform: rotate(45deg); } .notification__close-icon-line:last-child { transform: rotate(-45deg); }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } .hint-box { margin-bottom: 10px; margin-top: 10px; padding: 10px; display: flex; flex-direction: row; justify-content: start; align-items: center; cursor: pointer; min-height: 40px; animation: fadeIn 0.2s ease-out; border: 2px solid black; border-radius: 5px; } .hint-box__info { background-color: rgba(201, 187, 241, 0.38); border-color: var(--primary-color-default); } .hint-box__warning { background-color: rgba(241, 216, 187, 0.38); border-color: #d48934; } .hint-box__danger { background-color: rgba(241, 187, 187, 0.38); border-color: #d43434; } .hint-box__minimal { background-color: transparent; border-top: none; border-right: none; border-bottom: none; border-radius: 0; } .hint-box__content { display: flex; height: 100%; flex-direction: column; justify-content: space-between; align-items: start; } .hint-box__content_no-description { display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: start; } .hint-box_title { font-weight: bold; font-size: 14px; margin: 0; } .hint-box_text { font-size: 12px; font-weight: 400; margin-top: 10px; text-align: start; } .hint-box_info-icon_box { padding: 5px; } .hint-box__info-icon { margin-right: 10px; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } .page-banner { margin: 15px 60px; animation: fadeIn 1s ease; } @media only screen and (max-width: 1100px) { .page-banner { margin: 10px 0; } } .page-banner .hint-box_title { font-size: 16px; } .page-banner .hint-box_text { font-size: 14px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .dashboard-portfolio { animation: fadeIn 3s ease-out; } .dashboard-portfolio__main-dashboard-conterols { display: flex; justify-content: flex-end; flex-direction: row; margin-top: 10px; } .dashboard-portfolio__segmented_control { color: var(--primary-color); } .dashboard-portfolio__content { display: flex; justify-content: space-between; padding: 45px 30px 0 35px; } @media only screen and (max-width: 992px) { .dashboard-portfolio__content { flex-direction: column; } } .dashboard-portfolio__chart { display: flex; flex-direction: column; width: 25%; padding-right: 30px; } @media only screen and (max-width: 992px) { .dashboard-portfolio__chart { width: 40%; margin-bottom: 40px; } } @media only screen and (max-width: 600px) { .dashboard-portfolio__chart { width: 100%; margin-bottom: 40px; padding-right: 0; } } .dashboard-portfolio__tooltip { font-weight: 400; } .dashboard-portfolio__charts { display: flex; justify-content: space-between; width: 75%; } @media only screen and (max-width: 992px) { .dashboard-portfolio__charts { flex-wrap: wrap; width: 100%; } } @media only screen and (max-width: 600px) { .dashboard-portfolio__charts { justify-content: center; } } .dashboard-portfolio__total-values { width: 20%; text-align: left; } @media only screen and (max-width: 992px) { .dashboard-portfolio__total-values { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } } .dashboard-portfolio__value-purchase { font-size: 100%; } @media only screen and (max-width: 992px) { .dashboard-portfolio__value { width: 40%; } } @media only screen and (max-width: 600px) { .dashboard-portfolio__value { flex-direction: column; width: 100%; } } .dashboard-portfolio__total-value-caption { color: #6e767e; font-size: 14px; font-weight: 600; } .dashboard-portfolio__total-value-subcaption { color: #6e767e; font-size: 14px; font-weight: 600; padding-bottom: 30px; } .dashboard-portfolio__total-value-content { padding-bottom: 10px; font-size: 4em; font-weight: 600; } .dashboard-portfolio__cash { padding-right: 5px; text-transform: capitalize; font-size: 0.6em; } .dashboard-portfolio__count-up { line-height: normal; } .dashboard-portfolio__loader { min-height: 200px; } .dashboard-portfolio__appraised-count-info { margin-top: 5px; font-size: 14px; font-weight: 400; } .dashboard-portfolio__sumarry_header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .dashboard-portfolio__sumarry_header_icon { margin-left: 5px; } .dashboard-portfolio__info-icon { color: #c8d0d8; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .dashboard { text-align: center; } .dashboard__content { max-width: 1400px; margin: 0 auto; padding: 55px 0; } .dashboard__content_with-banner { padding-top: 10px; } @media only screen and (max-width: 600px) { .dashboard__portfolio_mobile-hidden { display: none; } }.loader-content { display: flex; flex-direction: column; width: 100%; height: 100vh; justify-content: center; align-items: center; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .accessible-to-manage { position: relative; } .accessible-to-manage__container { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: auto; text-align: center; background: rgba(238, 238, 238, 0.65); } .accessible-to-manage__link { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-decoration: underline; color: var(--primary-color); font-size: 28px; font-weight: bold; } @media only screen and (max-width: 768px) { .accessible-to-manage__link { align-self: flex-start; margin-top: 45px; } } .accessible-to-manage__link_mobile-app { cursor: auto; text-decoration: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collapse-section__header { display: flex; align-items: baseline; padding: 10px 0px; border-bottom: 2px solid #c8d0d8; font-size: 24px; } .collapse-section__header-handler { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .collapse-section__header-text { vertical-align: middle; display: inline; } .collapse-section__header-titles { width: 305px; } .collapse-section__header-subtitle { padding-left: 20px; color: #6e767e; font-size: 14px; } .collapse-section__header-arrow { margin-left: 10px; transition: all 0.4s ease-in-out; transform: rotateX(0deg); vertical-align: middle; } .collapse-section__header-arrow_rotate { transform: rotateX(180deg); } .collapse-section__header-action { display: flex; flex-grow: 1; justify-content: flex-end; } .collapse-section__content { padding: 10px 0; transition: all 0.4s ease-in-out; transform: scaleY(1); transform-origin: top; opacity: 1; } .collapse-section__content_hidden { overflow: hidden; max-height: 0; transform: scaleY(0); transform-origin: top; opacity: 0; } .collapse-section__content-enter-done { max-height: 0; } .collapse-section__accessible-hoc { height: auto; } .collapse-section__accessible-hoc_disabled { height: 0px; padding: 0; } .collapse-section__accessible-hoc_disabled .accessible-to-manage__link { display: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .contact-client-modal { width: 700px; min-height: 400px; text-align: left; background-color: #fff; border: 2px solid #969ea6; } .contact-client-modal__form { max-height: 500px; height: 100%; padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .contact-client-modal__form-field { display: flex; margin-bottom: 15px; } @media only screen and (max-width: 600px) { .contact-client-modal__form-field { flex-direction: column; } } .contact-client-modal__form-field-label { width: 130px; font-size: 14px; font-weight: 500; color: #333333; display: flex; align-items: center; margin-right: 10px; cursor: pointer; } @media only screen and (max-width: 600px) { .contact-client-modal__form-field-label { padding: 5px 0; } } .contact-client-modal__form-btn { display: block; margin: auto; margin-top: 30px; margin-bottom: 30px; padding: 0 60px; max-width: 200px; width: 100%; } .contact-client-modal .field-wrapper { width: 100%; margin-bottom: 12px; } .contact-client-modal__multiselect { width: 100%; } .contact-client-modal__textarea-field { width: 100%; min-height: 100px; } .contact-client-modal__textarea-input { font-size: 14px; line-height: 15px; resize: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-header-cell { padding: 10px 5px; font-size: 0.85em; font-weight: bold; } .alerts-header-cell_text-align_left { text-align: left; } .alerts-header-cell_text-align_center { text-align: center; } .alerts-header-cell_text-align_right { text-align: right; } .alerts-header-cell__content { position: relative; display: inline-block; cursor: default; vertical-align: top; } .alerts-header-cell__content_sortable { cursor: pointer; padding-right: 15px; } .alerts-header-cell__content_sortable_active { padding-right: 15px; } .alerts-header-cell__corner { position: absolute; top: 5px; right: 0; width: 0; height: 0; } .alerts-header-cell__corner_up { border-right: 5px solid transparent; border-bottom: 5px solid #c8d0d8; border-left: 5px solid transparent; } .alerts-header-cell__corner_down { border-top: 5px solid #c8d0d8; border-right: 5px solid transparent; border-left: 5px solid transparent; }.paginated-table { padding-bottom: 10px; } .paginated-table__loader { padding: 10px 0; } .paginated-table__pagination { padding: 10px 0; background-color: white; } .paginated-table_header-controls_sticky .paginated-table__pagination { position: sticky; top: 0; } .paginated-table_header-controls_sticky .paginated-table__table th { top: 50px; } .paginated-table_header-controls_sticky .paginated-table__table_attach_top th { top: 0; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } .asset-image-wrapper { display: flex; align-items: center; justify-content: center; } .asset-image { max-width: inherit; max-height: inherit; animation: fadeIn 0.2s; } .asset-image_loaded { cursor: pointer; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-row { display: flex; padding: 10px 10px; align-items: center; font-size: 14px; text-align: left; text-decoration: none; color: inherit; } .alerts-row:not(:last-child) { border-bottom: 1px solid #d2dae2; } @media only screen and (max-width: 480px) { .alerts-row { flex-direction: column; justify-content: center; height: auto; padding: 10px; } } .alerts-row__icon { font-size: 18px; } @media only screen and (max-width: 480px) { .alerts-row__content { text-align: center; } } .alerts-row:not(:first-child) { border-top: 0; } .alerts-row__image-container { flex-basis: 141px; } .alerts-row__image { max-width: 121px; height: 80px; max-height: 80px; margin: 0 auto; } .alerts-row__image_artist { max-width: 80px; margin: auto; filter: grayscale(100%); } .alerts-row__image_artist .asset-image { width: 100%; height: 100%; border-radius: 100%; -o-object-fit: cover; object-fit: cover; } .alerts-row__image_pure .asset-image { cursor: default; } @media only screen and (max-width: 480px) { .alerts-row__image { max-width: 100%; max-height: 141px; height: auto; } .alerts-row__image_artist { width: 100%; max-width: 141px; } .alerts-row__image_artist .asset-image { width: 100%; max-width: 141px; height: 141px; } } .alerts-row__type, .alerts-row__title { font-size: 16px; font-weight: 600; line-height: 22px; } .alerts-row__type { color: var(--primary-color); } .alerts-row__title { margin-bottom: 5px; cursor: pointer; text-decoration: underline; color: #010101; } .alerts-row__title_pure { cursor: default; } .alerts-row__title:hover { text-decoration: none; } .alerts-row__text { line-height: 24px; word-break: break-word; } .alerts-row__content { padding: 0 5px; flex: 1; } .alerts-row__updated, .alerts-row__clients { max-width: 170px; width: 100%; padding: 0 5px; color: #010101; font-weight: bold; } .alerts-row__button { max-width: 220px; width: 100%; padding: 0 15px; text-align: right; } .alerts-row__details { max-width: 120px; width: 100%; text-align: center; } .alerts-row__details-button { color: #c8d0d8; } .alerts-row__details-button:hover { color: #6e767e; } .alerts-row__details-button_active, .alerts-row__details-button_active:hover { color: #000000; } .alerts-row__action { display: block; padding: 10px 15px; width: 100%; cursor: pointer; transition: 0.2s ease; -moz-text-align-last: left; text-align-last: left; white-space: nowrap; text-decoration: none; color: #000; font-size: 14px; } .alerts-row__action:hover { background-color: #f3f4f5; } @media only screen and (max-width: 1200px) { .alerts-row__button, .alerts-row__details { display: none; } } @media only screen and (max-width: 900px) { .alerts-row { border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); margin-bottom: 12px; } .alerts-row__updated, .alerts-row__clients { display: none; } .alerts-row__image { border-radius: 3px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .divider { border: 0; } .divider--horizontal { width: 100%; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(229, 231, 235, 0.3) 10%, rgba(229, 231, 235, 0.8) 30%, rgb(229, 231, 235) 50%, rgba(229, 231, 235, 0.8) 70%, rgba(229, 231, 235, 0.3) 90%, transparent 100%); } .divider--horizontal.divider--spacing-none { margin: 0; } .divider--horizontal.divider--spacing-small { margin: 8px 0; } .divider--horizontal.divider--spacing-medium { margin: 16px 0; } .divider--horizontal.divider--spacing-large { margin: 24px 0; } .divider--vertical { width: 1px; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(229, 231, 235, 0.3) 10%, rgba(229, 231, 235, 0.8) 30%, rgb(229, 231, 235) 50%, rgba(229, 231, 235, 0.8) 70%, rgba(229, 231, 235, 0.3) 90%, transparent 100%); } .divider--vertical.divider--spacing-none { margin: 0; } .divider--vertical.divider--spacing-small { margin: 0 8px; } .divider--vertical.divider--spacing-medium { margin: 0 16px; } .divider--vertical.divider--spacing-large { margin: 0 24px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .manage-alerts-modal { max-width: 800px; text-align: left; } .manage-alerts-modal .text-field__label { width: 290px; } .manage-alerts-modal__description { margin-bottom: 20px; color: #333333; } .manage-alerts-modal__dropdown { margin-bottom: 15px; } .manage-alerts-modal__alert-delivery-frequency-container { display: flex; flex-direction: row; gap: 20px; } @media (max-width: 768px) { .manage-alerts-modal__alert-delivery-frequency-container { flex-direction: column; gap: 0; } } .manage-alerts-modal__alert_delivery-dropdown { margin-bottom: 15px; width: 100%; } .manage-alerts-modal__alert_frequency-dropdown { margin-bottom: 15px; width: 100%; } .manage-alerts-modal__content { padding: 30px 30px 15px 30px; overflow: scroll; overflow-x: hidden; } .manage-alerts-modal__form { height: 100%; display: flex; flex-direction: column; gap: 10px; } .manage-alerts-modal__range-picker-input { margin-bottom: 10px; } .manage-alerts-modal__range-picker-input .range-picker { justify-content: center; } .manage-alerts-modal__range-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #333; } .manage-alerts-modal__range-inputs { display: flex; align-items: center; gap: 10px; } .manage-alerts-modal__range-separator { font-size: 14px; color: #666; margin: 0 8px; } .manage-alerts-modal__currency-prefix { position: absolute; left: 10px; z-index: 1; color: #666; } .manage-alerts-modal__media-section { margin-bottom: 15px; } .manage-alerts-modal__checkboxes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; } @media (max-width: 768px) { .manage-alerts-modal__checkboxes-grid { grid-template-columns: repeat(2, 1fr); } } .manage-alerts-modal__checkbox-item { margin: 0; } .manage-alerts-modal__additional-emails { margin-bottom: 12px; } .manage-alerts-modal__hot-cool-checkbox { margin-top: 12px; } .manage-alerts-modal__hot-cool-checkbox .checkbox__label { margin-left: 13px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .services-checkboxes-group__container { -moz-column-count: 2; column-count: 2; } @media only screen and (max-width: 600px) { .services-checkboxes-group__container { -moz-column-count: 1; column-count: 1; } } .services-checkboxes-group__checkbox { -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: 5px; } .services-checkboxes-group__field-wrapper { margin-bottom: 0; display: block !important; grid-template-columns: none !important; gap: 0; } .services-checkboxes-group__checkbox-input { width: 100%; } .services-checkboxes-group__checkbox-input .forms-checkbox__label { display: block; margin-left: 0.5rem; } .services-checkboxes-group__invalid-label { overflow: hidden; max-height: 0; margin-top: 0; transition: 0.5s ease; opacity: 0; color: #ff2652; font-size: 12px; } @media only screen and (max-width: 600px) { .services-checkboxes-group__invalid-label { padding-left: 5px; } } .services-checkboxes-group__invalid-label_visible { max-height: 30px; margin: 7px 0 5px 0; padding: 3px 0; opacity: 1; } @media only screen and (max-width: 600px) { .services-checkboxes-group__invalid-label_visible { padding: 3px 0; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .services-modal { width: 700px; min-height: 540px; } .services-modal__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .services-modal__description { font-size: 18px; line-height: 24px; font-weight: 600; } .services-modal__form-field { margin-top: 20px; } .services-modal__form-field-description { margin-bottom: 10px; font-size: 16px; line-height: 22px; font-weight: 600; } .services-modal__form-field-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: inherit; cursor: default; } .services-modal__form-text-area .text-area-form__input { width: 100%; } .services-modal__form-text-area .text-area-form__place-holder { display: none; } .services-modal__form-text-area .text-area-form__container { flex-direction: column; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-section { text-align: left; margin-bottom: 20px; } .alerts-section__table-header { display: flex; padding: 0 10px; border-bottom: 1px solid #c8d0d8; } @media only screen and (max-width: 900px) { .alerts-section__table-header { display: none; } } .alerts-section__empty { font-size: 16px; padding: 10px 20px; } .alerts-section__table-header-col_image { width: 141px; } .alerts-section__table-header-col_type { flex-grow: 1; } .alerts-section__table-header-col_client, .alerts-section__table-header-col_updated { width: 170px; } .alerts-section__table-header-col_action { width: 220px; } .alerts-section__table-header-col_details { width: 40px; } @media only screen and (max-width: 1200px) { .alerts-section__table-header-col_action, .alerts-section__table-header-col_details { display: none; } } .alerts-section__empty-results { margin: 20px 0; font-size: 16px; } .alerts-section__empty-results-link { padding-top: 10px; cursor: pointer; color: #333333; font-weight: bold; } .alerts-section__empty-results-link:hover { color: #000000; } .alerts-section__show-more { width: 100%; } .alerts-section__line { height: 1px; border: none; margin: 0; background-color: #c8d0d8; } .alerts-section__contact-client-modal { background-color: rgba(251, 254, 255, 0.63); } .alerts-section__header-actions { font-size: 14px; padding: 0 10px 0 0; } @media only screen and (max-width: 500px) { .alerts-section__header-actions { padding: 10px 0 0 0; } } .alerts-section__header-actions-item { display: flex; cursor: pointer; border-bottom: 2px solid transparent; padding: 3px; } .alerts-section__header-actions-item:hover { border-bottom: 2px solid #333; } .alerts-section__header-actions-item-icon { width: 20px; } @media only screen and (max-width: 500px) { .alerts-section .collapse-section__header { flex-direction: column; } }.autosuggesti-input-wrapper { width: 100%; position: relative; } .radix-autosuggest__content { position: absolute; z-index: 10; width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08); margin-top: 4px; transition: opacity 0.15s; opacity: 1; pointer-events: auto; } .radix-autosuggest__content--hidden { opacity: 0; pointer-events: none; } .radix-autosuggest__content--open { opacity: 1; pointer-events: auto; } .radix-autosuggest__viewport { max-height: 240px; overflow-y: auto; } .radix-autosuggest__viewport--has-content { padding: 4px 0; } .radix-autosuggest__item { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: #222; background: transparent; border: none; cursor: pointer; border-radius: 6px; transition: background 0.12s, color 0.12s; } .radix-autosuggest__item:hover, .radix-autosuggest__item:focus { background: #f0f4fa; } .radix-autosuggest__item_selected { background: #e6f0ff; color: #1a5cff; font-weight: 500; flex-direction: row-reverse; justify-content: space-between; } .radix-autosuggest__item__check { width: 12px !important; height: 12px !important; color: black; } .radix-autosuggest__no-results { padding: 12px 16px; color: #888; font-size: 15px; text-align: center; } .radix-autosuggest__input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; background: #fff; color: #222; outline: none; transition: border 0.15s, box-shadow 0.15s; } .radix-autosuggest__input:focus { border-color: #1a5cff; box-shadow: 0 0 0 2px rgba(26, 92, 255, 0.1); } .radix-autosuggest__input:disabled { background: #f5f5f5; color: #bbb; cursor: not-allowed; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-filters { font-size: 15px; } .alerts-filters__main { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media only screen and (max-width: 1100px) { .alerts-filters__main { grid-template-columns: 1fr; } } .alerts-filters__main-col { width: 100%; padding: 20px; padding-top: 0; } @media only screen and (max-width: 1100px) { .alerts-filters__main-col { width: 100%; } } @media only screen and (max-width: 600px) { .alerts-filters__main-col { padding: 20px 0; } } @media only screen and (max-width: 1100px) { .alerts-filters__main-col--first { display: contents; } .alerts-filters__main-col--second { display: contents; } } .alerts-filters__row { display: flex; flex-direction: column; padding: 10px 0; } .alerts-filters__row--horizontal { flex-direction: row; } @media only screen and (max-width: 1100px) { .alerts-filters__row--artist { order: 1; } .alerts-filters__row--auction-house { order: 2; } .alerts-filters__row--horizontal { order: 3; } .alerts-filters__row--sale-date { order: 4; } .alerts-filters__row--clients { order: 5; } } .alerts-filters__search-input { width: 100%; padding: 10px 0; } .alerts-filters__col { flex-grow: 1; } .alerts-filters__col_label { flex-grow: 0; flex-shrink: 0; width: 130px; } .alerts-filters__label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #333; } .alerts-filters__search-input { width: 100%; padding: 10px 0; } .alerts-filters__search-input--auction-house { padding: 0; } .alerts-filters__range { display: flex; align-items: center; gap: 12px; width: 100%; } .alerts-filters__range .range-picker__content { padding: 0; } .alerts-filters__range .range-picker__text-input-container { flex-grow: 1; } .alerts-filters__range .range-picker__to-label { padding: 0 10px; } @media only screen and (max-width: 600px) { .alerts-filters__range .datepicker { height: inherit; } } .alerts-filters__range .datepicker-input { width: 100%; border-bottom: 0; } .alerts-filters__range-separator { color: #666; font-size: 14px; padding: 0 4px; } @media only screen and (max-width: 600px) { .alerts-filters__range_date { flex-direction: column; align-items: flex-start; } .alerts-filters__range_date .range-picker__content { align-items: flex-start; flex-direction: column; } .alerts-filters__range_date .range-picker__text-input-container_first, .alerts-filters__range_date .range-picker__text-input-container_second { width: 100%; margin: 0; } .alerts-filters__range_date .range-picker__to-label { padding: 10px; } } .alerts-filters__dropdown .multiselect-dropdown__label { display: none; } .alerts-filters__dropdown .multiselect-dropdown__value { font-size: 15px; color: black; } .alerts-filters__dropdown .multiselect-dropdown__input { padding-left: 0; } .alerts-filters__checkbox, .alerts-filters .mediums-checkbox-group__checkbox { float: left; margin-bottom: 5px; width: 50%; } @media only screen and (max-width: 600px) { .alerts-filters__checkbox, .alerts-filters .mediums-checkbox-group__checkbox { width: 100%; } } .alerts-filters__checkbox .checkbox, .alerts-filters .mediums-checkbox-group__checkbox .checkbox { width: 100%; } .alerts-filters__checkbox .checkbox__icon-container, .alerts-filters .mediums-checkbox-group__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .alerts-filters__checkbox .checkbox__icon-container_active, .alerts-filters .mediums-checkbox-group__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .alerts-filters__checkbox .checkbox__label, .alerts-filters .mediums-checkbox-group__checkbox .checkbox__label { margin-left: 15px; padding-right: 5px; font-size: inherit; } .alerts-filters__btns { display: flex; justify-content: flex-end; } @media only screen and (max-width: 450px) { .alerts-filters__btns { flex-direction: column; } } .alerts-filters__btn { min-width: 110px; } @media only screen and (max-width: 450px) { .alerts-filters__btn { width: 100%; } } .alerts-filters__btn_offset_right { margin-right: 15px; } @media only screen and (max-width: 450px) { .alerts-filters__btn_offset_right { width: 100%; margin-right: 0; } } .auction-houses__search { width: 100%; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .advisor-alerts { text-align: center; padding-top: 40px; max-width: 1400px; margin: 0 auto; } .advisor-alerts__content { max-width: 1400px; margin: 0 auto; padding-top: 55px; } .advisor-alerts__table { padding-top: 20px; } .advisor-alerts__empty-results { margin: 20px 0; text-align: left; font-size: 16px; } .advisor-alerts__empty-results-link { padding-top: 10px; cursor: pointer; color: #333333; font-weight: bold; } .advisor-alerts__empty-results-link:hover { color: #000000; } .advisor-alerts__filters-section { text-align: left; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-table-row { font-size: 14px; } .alerts-table-row__image { max-width: 121px; height: 80px; max-height: 80px; } .alerts-table-row__image_artist { max-width: 80px; margin: auto; filter: grayscale(100%); } .alerts-table-row__image_artist .asset-image { width: 100%; height: 100%; border-radius: 100%; -o-object-fit: cover; object-fit: cover; } .alerts-table-row__button { color: #c8d0d8; } .alerts-table-row__button:hover { color: #6e767e; } .alerts-table-row__button_active, .alerts-table-row__button_active:hover { color: #000000; } .alerts-table-row__icon { font-size: 18px; } .alerts-table-row__action { display: block; width: 100%; padding: 10px 15px; transition: 0.2s ease; -moz-text-align-last: left; text-align-last: left; white-space: nowrap; text-decoration: none; color: #000; font-size: 14px; } .alerts-table-row__action:hover { background-color: #f3f4f5; } .alerts-table-row__type, .alerts-table-row__title { font-size: 16px; font-weight: 600; line-height: 22px; } .alerts-table-row__generated { font-size: 14px; color: #8b939a; } .alerts-table-row__type { color: #6e767e; } .alerts-table-row__title { margin-bottom: 5px; cursor: pointer; text-decoration: underline; color: #010101; } .alerts-table-row__title:hover { text-decoration: none; } .alerts-table-row__text { line-height: 24px; } .alerts-table-row__link-button-container { min-width: 200px; } .alerts-table-row__link-button { font-size: 14px; } .alerts-table-row__result-button { white-space: nowrap; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts-mobile-table-row { display: flex; align-items: center; min-height: 140px; margin-bottom: 12px; padding: 10px 30px 10px 0; text-align: left; text-decoration: none; color: inherit; border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); } @media only screen and (max-width: 480px) { .alerts-mobile-table-row { flex-direction: column; justify-content: center; height: auto; padding: 10px; } .alerts-mobile-table-row__content { text-align: center; } } .alerts-mobile-table-row:not(:first-child) { border-top: 0; } .alerts-mobile-table-row__image-container { padding: 0 30px 0 30px; } .alerts-mobile-table-row__image { overflow: hidden; width: 130px; max-width: 130px; max-height: 100px; border-radius: 3px; } .alerts-mobile-table-row__image_artist { filter: grayscale(100%); } .alerts-mobile-table-row__image_artist .asset-image { max-width: 100px; width: 100%; height: 100px; border-radius: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (max-width: 480px) { .alerts-mobile-table-row__image { max-width: 100%; max-height: 150px; } .alerts-mobile-table-row__image_artist { width: 100%; max-width: 150px; } .alerts-mobile-table-row__image_artist .asset-image { width: 100%; max-width: 150px; height: 150px; } } .alerts-mobile-table-row__type, .alerts-mobile-table-row__title { font-size: 16px; font-weight: 600; line-height: 22px; } .alerts-mobile-table-row__type { color: #6e767e; } .alerts-mobile-table-row__title { margin-bottom: 5px; color: #010101; } .alerts-mobile-table-row__text { line-height: 24px; } .alerts-mobile-table-row__action { flex-shrink: 0; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .confirm-modal { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 600px; padding: 50px 0 30px 0; background-color: white; border: 2px solid #6e767e; } .confirm-modal__controlls { display: flex; justify-content: space-between; width: 100%; padding: 0 50px; } .confirm-modal__content { margin-bottom: 50px; padding: 0 50px; } .confirm-modal__title { width: 100%; font-size: 24px; font-weight: bold; } .confirm-modal__subtitle { width: 100%; margin-top: 20px; font-size: 20px; } .confirm-modal__subtitle-name { text-decoration: underline; } .confirm-modal__confirm, .confirm-modal__reject { width: 100%; max-width: 200px; border-width: 2px; font-weight: 600; } .confirm-modal__confirm:hover, .confirm-modal__reject:hover { border-width: 2px; } .confirm-modal__close-icon-container { position: absolute; top: 25px; right: 25px; } .confirm-modal__close-icon { position: relative; display: inline-block; box-sizing: border-box; width: 22px; height: 22px; cursor: pointer; color: #969ea6; line-height: 22px; } .confirm-modal__close-icon::before, .confirm-modal__close-icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 22px; height: 2px; margin-left: -11px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #969ea6; } .confirm-modal__close-icon::after { transform: rotate(45deg); } .confirm-modal__close-icon:hover::before, .confirm-modal__close-icon:hover::after { background-color: #c8d0d8; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .client-alerts__link-button { display: block; margin-bottom: 5px; padding: 0; color: var(--primary-color); font-size: 16px; } .client-alerts__link-button:hover { text-decoration: underline; } .client-alerts__filters-section { text-align: left; } .client-alerts__table { padding: 20px 0; } .client-alerts__header { padding: 10px 0; border-bottom: 2px solid #c8d0d8; display: flex; justify-content: space-between; font-size: 26px; line-height: 32px; align-items: flex-end; } .client-alerts__header-actions { display: flex; flex-direction: column; font-size: 14px; line-height: 18px; min-width: 125px; } .client-alerts__header-actions2 { display: inline-block; font-size: 14px; line-height: 18px; min-width: 125px; padding-right: 10px; } .client-alerts__link-button { width: 100%; text-align: right; } .client-alerts__link-button a { text-decoration: none; color: var(--primary-color); } .client-alerts__header-actions-item { display: flex; align-items: center; margin-top: 5px; border-bottom: 2px solid transparent; padding: 3px; cursor: pointer; } .client-alerts__header-actions-item:hover { border-bottom: 2px solid #333; } .client-alerts__header-actions-item_disabled, .client-alerts__header-actions-item_disabled:hover { border-bottom: 2px solid transparent; color: #c8d0d8; text-decoration: none; cursor: default; } .client-alerts__header-actions-item-icon { width: 18px; margin-right: 8px; text-align: center; } .client-alerts__empty-results { margin: 20px 0; text-align: left; font-size: 16px; } .client-alerts__empty-results-link { padding-top: 10px; cursor: pointer; color: #333333; font-weight: bold; } .client-alerts__empty-results-link:hover { color: #000000; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .alerts { text-align: center; } .alerts__content { max-width: 1400px; margin: 0 auto; padding-top: 55px; } .alerts__content_with-banner { padding-top: 10px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .from-to-year-select { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .from-to-year-select .basic-details-fields__field { flex: 1; max-width: calc(50% - 8px); } @media only screen and (max-width: 600px) { .from-to-year-select { flex-direction: column; margin-bottom: 15px; } .from-to-year-select .basic-details-fields__field { width: 100%; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .cataloguing-locked-field { position: relative; } .cataloguing-locked-field_locked { padding: 12px 12px 10px 10px; margin-top: 2px; margin-bottom: 10px; border-radius: 8px; border: 1px solid rgba(200, 208, 216, 0.75); background: #f3f4f5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .cataloguing-locked-field_locked > *:not(.cataloguing-locked-field__lock-badge):not(.cataloguing-locked-field__shield) + *:not(.cataloguing-locked-field__lock-badge):not(.cataloguing-locked-field__shield) { margin-top: 10px; } .cataloguing-locked-field_locked .basic-details-fields__field:not(:last-child), .cataloguing-locked-field_locked .additional-details__field:not(:last-child), .cataloguing-locked-field_locked .asset-management__field:not(:last-child) { margin-bottom: 0 !important; } .cataloguing-locked-field_locked [data-slot=form-label], .cataloguing-locked-field_locked .forms-input__label, .cataloguing-locked-field_locked .dimensions-group__legend { color: #333333 !important; font-weight: 500; } .cataloguing-locked-field_locked .forms-input__field, .cataloguing-locked-field_locked .forms-textarea__field, .cataloguing-locked-field_locked .forms-select__trigger, .cataloguing-locked-field_locked input[data-slot=input], .cataloguing-locked-field_locked textarea[data-slot=textarea] { background-color: #ececed !important; border-color: #cfd4db !important; color: #2b2b2b !important; box-shadow: none !important; } .cataloguing-locked-field_locked input[data-slot=input]::-moz-placeholder, .cataloguing-locked-field_locked textarea[data-slot=textarea]::-moz-placeholder, .cataloguing-locked-field_locked .forms-input__field::-moz-placeholder, .cataloguing-locked-field_locked .forms-textarea__field::-moz-placeholder { color: rgba(43, 43, 43, 0.52) !important; opacity: 1 !important; } .cataloguing-locked-field_locked input[data-slot=input]::placeholder, .cataloguing-locked-field_locked textarea[data-slot=textarea]::placeholder, .cataloguing-locked-field_locked .forms-input__field::placeholder, .cataloguing-locked-field_locked .forms-textarea__field::placeholder { color: rgba(43, 43, 43, 0.52) !important; opacity: 1 !important; } .cataloguing-locked-field_locked .forms-select__trigger[data-placeholder] { color: rgba(43, 43, 43, 0.52) !important; } .cataloguing-locked-field_locked .forms-select__trigger[data-placeholder] [data-slot=select-value] { color: rgba(43, 43, 43, 0.52) !important; opacity: 1 !important; } .cataloguing-locked-field_locked .forms-select__trigger:not([data-placeholder]) { color: #2b2b2b !important; } .cataloguing-locked-field_locked .forms-select .forms-select__trigger { opacity: 1; } .cataloguing-locked-field_locked .text-muted-foreground { color: rgba(43, 43, 43, 0.52) !important; } .cataloguing-locked-field_locked .dimensions-group { margin-bottom: 0; border-color: rgba(207, 212, 219, 0.95); } .cataloguing-locked-field_locked .basic-details-fields__edition { opacity: 1; } .cataloguing-locked-field__lock-badge { position: absolute; top: 6px; right: 12px; z-index: 0; display: inline-flex; align-items: center; justify-content: center; padding: 3px 4px; border-radius: 6px; background: rgba(96, 52, 212, 0.07); border: 1px solid rgba(96, 52, 212, 0.18); color: var(--primary-color, #6034d4); pointer-events: none; line-height: 0; } .cataloguing-locked-field__lock-badge svg { flex-shrink: 0; } .cataloguing-locked-field__shield { position: absolute; inset: 0; z-index: 2; cursor: not-allowed; background: transparent; border-radius: 8px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .basic-details-fields__field:not(:last-child) { margin-bottom: 15px; } .basic-details-fields textarea { resize: none; } .basic-details-fields .dimensions-group { border: 1px solid var(--secondary-lightest-color); border-radius: 8px; margin-bottom: 20px; } .basic-details-fields .dimensions-group__legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; } .basic-details-fields .dimensions-group__row { display: flex; align-items: center; gap: 12px; } .basic-details-fields .dimensions-group__cell { display: flex; flex-direction: column; } .basic-details-fields .dimensions-group__cell--unit { min-width: 100px; } .basic-details-fields .dimensions-group__cell input { height: 40px; } .basic-details-fields__edition { display: flex; width: 100%; justify-content: space-between; gap: 10px; } .basic-details-fields__edition:not(:last-child) { margin-bottom: 20px; } @media only screen and (max-width: 600px) { .basic-details-fields__edition { flex-direction: column; } } .basic-details-fields__separated-field { width: 30%; } @media only screen and (max-width: 600px) { .basic-details-fields__separated-field { width: 100%; } } .basic-details-fields__separated-field .text-field__input { width: 100%; } @media only screen and (max-width: 600px) { .basic-details-fields__separated-field .text-field__input { width: auto; } } .basic-details-fields__separated-field .text-field-form__invalid-label { padding: 3px 0; } .basic-details-fields__plus { display: flex; align-items: end; margin-bottom: 8px; } @media only screen and (max-width: 600px) { .basic-details-fields__plus { display: none; } } .basic-details-fields__separated-field_reverse .text-field { flex-direction: row-reverse; } @media only screen and (max-width: 600px) { .basic-details-fields__separated-field_reverse .text-field { flex-direction: column; } } .basic-details-fields__separated-field_reverse .text-field__label { display: flex; justify-content: flex-end; } @media only screen and (max-width: 600px) { .basic-details-fields__separated-field_reverse .text-field__label { display: block; } }.pricing-block__field:not(:last-child) { margin-bottom: 15px; } .pricing-block__field_indent { margin-top: 70px; } .pricing-block__field .autosuggest-input-form__label { width: 120px; }.information-block__caption { padding: 12px 5px; border-bottom: 2px solid #e4e8ec; font-weight: 600; } .information-block__content { padding: 30px 5px 0 5px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .add-appraisal-modal.modal__window { max-height: 90%; } .add-appraisal-modal__form { padding: 20px 30px 8px; overflow-x: hidden; overflow-y: auto; } .add-appraisal-modal__field { margin-bottom: 12px; } .add-appraisal-modal__field:last-child { margin-bottom: 4px; } .add-appraisal-modal__pair { display: flex; gap: 16px; align-items: flex-start; } @media only screen and (max-width: 600px) { .add-appraisal-modal__pair { flex-direction: column; gap: 12px; } } .add-appraisal-modal__pair-item { flex: 1; min-width: 0; } .add-appraisal-modal__pair-item--currency { flex: 0 0 200px; max-width: 200px; } @media only screen and (max-width: 600px) { .add-appraisal-modal__pair-item--currency { flex: 1; max-width: 100%; } } .add-appraisal-modal__pair-item--number { flex: 0 0 140px; max-width: 140px; } @media only screen and (max-width: 600px) { .add-appraisal-modal__pair-item--number { flex: 1; max-width: 100%; } } .add-appraisal-modal__checkbox { margin: 0 0 12px 2px; } .add-appraisal-modal input[data-slot=input], .add-appraisal-modal .forms-input__field, .add-appraisal-modal .forms-datepicker__field { height: 40px; min-height: 40px; box-sizing: border-box; } .add-appraisal-modal textarea { resize: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .image-add-button { display: inline-block; cursor: pointer; text-align: center; color: #6e767e; } .image-add-button_disabled, .image-add-button_disabled:hover { color: #c8d0d8; pointer-events: none; } .image-add-button_disabled svg use, .image-add-button_disabled:hover svg use { fill: #c8d0d8; } .image-add-button:hover { color: #000000; } .image-add-button:hover svg use { fill: #000000; } .image-add-button__icon { padding-bottom: 3px; display: flex; align-items: center; justify-content: center; } .image-add-button__label { font-size: 15px; font-weight: 500; white-space: nowrap; text-wrap: wrap; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisal-card__notes-label, .appraisal-card__detail-label { color: #6e767e; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .appraisal-card { position: relative; margin-bottom: 12px; padding: 12px 16px; border: 1px solid #c8d0d8; border-radius: 5px; } @media only screen and (max-width: 600px) { .appraisal-card { width: 100%; padding: 10px 12px; } } .appraisal-card_dimmed { opacity: 0.6; background-color: #dddddd; } .appraisal-card__actions { position: absolute; top: 8px; right: 10px; display: flex; flex-direction: row; align-items: center; gap: 4px; } .appraisal-card__actions > * { display: flex; align-items: center; justify-content: center; } .appraisal-card__lock-icon { width: 28px; height: 28px; padding: 0; border: none; background: transparent; line-height: 0; } .appraisal-card__lock-icon svg { display: block; fill: transparent; } .appraisal-card__title { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #c8d0d8; } .appraisal-card__title-text { min-width: 0; flex: 1 1 auto; font-weight: 600; word-break: break-word; } .appraisal-card_has-actions .appraisal-card__title { padding-right: 96px; } .appraisal-card__title-date { color: #6e767e; font-weight: 400; } .appraisal-card__value { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: baseline; gap: 6px 16px; margin-bottom: 16px; } .appraisal-card__value-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .appraisal-card__value-primary { font-size: 20px; font-weight: 700; word-break: break-word; } .appraisal-card__value-original { color: #6e767e; font-size: 13px; font-weight: 400; word-break: break-word; } .appraisal-card__value-inline-detail { color: #6e767e; font-size: 14px; font-weight: 400; word-break: break-word; } .appraisal-card__badge { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #c8d0d8; border-radius: 999px; color: #333333; font-size: 12px; font-weight: 600; } .appraisal-card__badge-icon { stroke: rgb(var(--primary)); } .appraisal-card__lock-tooltip { max-width: 240px; } .appraisal-card__badge-label-short { display: none; } @media only screen and (max-width: 600px) { .appraisal-card__badge-label-full { display: none; } .appraisal-card__badge-label-short { display: inline; } } .appraisal-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 16px; } .appraisal-card__detail { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .appraisal-card__detail-value { font-size: 14px; font-weight: 400; word-break: break-word; } .appraisal-card__detail-value_emphasized { font-weight: 600; } .appraisal-card__notes { margin-top: 4px; font-size: 14px; font-weight: 400; white-space: pre-wrap; word-break: break-word; } .appraisal-card__notes_divided { margin-top: 8px; padding-top: 8px; border-top: 1px solid #c8d0d8; } .appraisal-card__notes-label { display: block; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisal-block-item { display: flex; flex-direction: column; position: relative; } .appraisal-block-item__icon-button, .appraisal-block-item__menu-button { width: 28px; height: 28px; padding: 0; border: none; background: transparent; line-height: 0; } .appraisal-block-item__icon-button svg, .appraisal-block-item__menu-button svg { display: block; } .appraisal-block-item__icon-button .image-add-button__icon { padding-bottom: 0; } .appraisal-block-item__icon-button .image-add-button__label { display: none; } .appraisal-block-item__menu-button { color: #6e767e; } .appraisal-block-item__menu-button:hover { color: #000000; } .appraisal-block-item__menu-content { overflow: hidden; border-radius: 5px; } .appraisal-block-item__menu-action { width: 100%; padding: 10px 20px; white-space: nowrap; text-align: left; color: #000; font-size: 14px; } .appraisal-block-item__menu-action:hover { background-color: #f3f4f5; } .appraisal-block-item__add { align-self: flex-start; margin-top: 4px; font-size: 14px; }.additional-details textarea { resize: none; } .additional-details__field:not(:last-child) { margin-bottom: 15px; } .additional-details__field_indent { margin-top: 70px; }.sortable-list { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }.sortable-item { background-color: #fff; list-style: none; }.drag-handle { display: flex; width: 12px; padding: 15px; align-items: center; justify-content: center; flex: 0 0 auto; touch-action: none; cursor: var(--cursor, pointer); border-radius: 5px; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; -webkit-tap-highlight-color: transparent; } .drag-handle:hover { background-color: rgba(0, 0, 0, 0.05); } .drag-handle:focus-visible { box-shadow: 0 0px 0px 2px #4c9ffe; } .drag-handle svg { flex: 0 0 auto; margin: auto; height: 100%; overflow: visible; fill: #919eab; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .media-upload-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px 10px 10px 20px; border: 1px solid #c8d0d8; border-radius: 3px; } @media only screen and (max-width: 600px) { .media-upload-item { flex-direction: column; padding: 5px 5px 10px 5px; } } .media-upload-item__content { padding: 10px 20px 10px 20px; } .media-upload-item__content__edit { padding: 5px 20px 5px 10px; } .media-upload-item__content__buttons { display: flex; gap: 10px; } .media-upload-item__image { max-height: 130px; max-width: 100%; } .media-upload-item__name { display: block; margin-top: 5px; transition-duration: 0.3s; text-decoration: none; color: inherit; } .media-upload-item__name_link:hover { color: var(--primary-color); } .media-upload-item__remove { font-size: 14px; } @media only screen and (max-width: 600px) { .media-upload-item__remove { width: 90%; margin-top: 10px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .media-uploads { display: flex; } .media-uploads__drop-area { margin-right: 22px; } .media-uploads__drop-area-container { display: flex; align-items: center; margin-bottom: 20px; } .media-uploads__label { margin-right: 20px; } .media-uploads__area-label { padding: 11px 0; } .media-uploads__name-input { padding: 5px; transition-duration: 0.3s; border: none; border-bottom: 1px solid #c8d0d8; font-size: 16px; font-weight: 600; } @media only screen and (max-width: 600px) { .media-uploads__name-input { margin-top: 10px; } } .media-uploads__name-input:focus { border-color: gray; outline: none; } .media-uploads__name-input:-webkit-autofill { box-shadow: inset 0 0 0 50px #fff; } .media-uploads__button { font-size: 14px; }.title-image-block__field:not(:last-child) { margin-bottom: 15px; } .title-image-block__field_indent { margin-top: 70px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .media-file-upload-item { position: relative; margin-bottom: 40px; padding: 30px 30px 15px 30px; border: 1px solid #c8d0d8; border-radius: 3px; flex-direction: column; } @media only screen and (max-width: 600px) { .media-file-upload-item { flex-direction: column; padding: 10px 15px; } } .media-file-upload-item__edit { position: absolute; top: 8px; right: 10px; display: flex; flex-direction: row; align-items: center; gap: 4px; } .media-file-upload-item__content { display: flex; padding: 15px 20px 15px 0px; align-items: center; width: 100%; } @media only screen and (max-width: 600px) { .media-file-upload-item__content { flex-direction: column; } } .media-file-upload-item__image { max-height: 100px; max-width: 100%; } .media-file-upload-item__name { display: block; transition-duration: 0.3s; text-decoration: none; color: inherit; } .media-file-upload-item__name_link:hover { color: var(--primary-color); } .media-file-upload-item__remove { font-size: 14px; } .media-file-upload-item__preview { max-width: 180px; width: 100%; padding: 10px 0; text-align: center; } .media-file-upload-item__info { width: 100%; } .media-file-upload-item__info-item { display: flex; margin-bottom: 5px; margin-left: 20px; } .media-file-upload-item__info-label { flex-shrink: 0; width: 80px; } .media-file-upload-item__info-value { font-weight: bold; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisal-modal .modal__window { max-height: 85%; } .appraisal-modal__form { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .appraisal-modal__form-input { margin-bottom: 20px; } .appraisal-modal__form-input .text-field__label { width: 130px; } @media only screen and (max-width: 600px) { .appraisal-modal__form-input .text-field__label { width: 100%; } } .appraisal-modal__form-dropdown { margin-bottom: 20px; } .appraisal-modal__form-dropdown > label { min-width: 120px; justify-content: flex-start; } @media only screen and (max-width: 600px) { .appraisal-modal__form-dropdown > label { width: 100%; } } .appraisal-modal__dropzone { height: 150px; } .appraisal-modal__dropzone.dropzone-form_has-document { height: auto; }.files-upload-group__label { display: flex; align-items: center; } .files-upload-group__button-area { display: flex; align-items: center; } .files-upload-group__button-label { padding-left: 10px; }.media-block__field:not(:last-child) { margin-bottom: 15px; } .media-block__field_indent { margin-top: 70px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .global-custom-fields-block-item__text-input { margin-bottom: 10px; } @media only screen and (max-width: 600px) { .global-custom-fields-block-item__text-input .text-field__label { padding: 0; } } .global-custom-fields-block-item__text-input .text-field__input { padding-left: 5px; } @media only screen and (max-width: 600px) { .global-custom-fields-block-item__text-input .text-field__input { padding: 0; } } .global-custom-fields-block-item__separator { margin: 30px 0; border: 1px solid #e4e8ec; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .add-custom-field-modal__form { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .add-custom-field-modal__field { margin-bottom: 0 !important; } .add-custom-field-modal__field:last-child { margin-bottom: 5px; } .add-custom-field-modal__field_indent { margin-top: 70px; } .add-custom-field-modal__text-area textarea { font-size: 14px; line-height: 15px; resize: none; } .add-custom-field-modal__text-area .text-area-field__place-holder { color: #010101; } .add-custom-field-modal__checkbox-field { align-items: center; flex-direction: row-reverse; min-height: 35px; } .add-custom-field-modal__checkbox-field:not(:last-child) { margin-bottom: 15px; } .add-custom-field-modal__checkbox-field .checkbox__icon-wrapper { flex-grow: 1; } .add-custom-field-modal__checkbox-field .checkbox__label { margin-right: 35px; margin-left: 0; letter-spacing: 0.15px; color: #333333; font-size: 14px; font-weight: 500; } .add-custom-field-modal__checkbox-container { display: inline-block; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .custom-fields-block-item__container { display: flex; width: 100%; margin-bottom: 10px; } @media only screen and (max-width: 600px) { .custom-fields-block-item__container { flex-direction: column; } } .custom-fields-block-item__field-content-container { display: flex; flex-grow: 1; gap: 10px; border-bottom: 1px solid #c8d0d8; } .custom-fields-block-item__field-name-container { display: flex; align-items: center; margin-right: 10px; } .custom-fields-block-item__field-name { width: 120px; color: #333333; font-size: 14px; font-weight: 500; line-height: 18px; } .custom-fields-block-item__field-value { overflow: hidden; flex-grow: 1; padding: 7px 5px; font-family: HelveticaNeue, Hind, serif; font-size: 14px; } @media only screen and (max-width: 600px) { .custom-fields-block-item__field-value { width: 100%; padding: 10px 0px; } } .custom-fields-block-item__edit { display: flex; align-items: center; justify-content: center; } .custom-fields-block-item__edit svg { width: 20px; height: 20px; } .custom-fields-block-item__delete { display: flex; align-items: center; justify-content: center; } .custom-fields-block-item__delete .fa-trash-alt { font-size: 20px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .asset-management textarea { resize: none; } .asset-management__field:not(:last-child) { margin-bottom: 15px; } .asset-management__field_indent { margin-top: 70px; } .asset-management__admin-notes { color: #a34631 !important; } .collection-artwork-details__ownership-status .collection-artwork-basic-field__title { width: 140px; font-weight: 500; } .collection-artwork-details__ownership-status .collection-artwork-basic-field__text { width: calc(100% - 140px); } .collection-artwork-details__read_only { padding-left: 0px; padding-bottom: 0px; } .collection-artwork-details__read_only .collection-artwork-basic-field__title { font-weight: 500; width: 135px; } .collection-artwork-details__read_only .collection-artwork-basic-field__text { background-color: rgb(191, 187, 187); padding-left: 4px; padding-top: 4px; }.asset-location { margin-bottom: 50px; } .asset-location__field:not(:last-child) { margin-bottom: 15px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .asset-previous-locations__location { position: relative; margin-top: 15px; padding: 15px; padding-right: 20px; border: 1px solid #c8d0d8; } .asset-previous-locations__location-item { display: flex; padding-bottom: 10px; font-size: 14px; } .asset-previous-locations__location-item:last-child { padding-bottom: 0; } .asset-previous-locations__location-item-title { flex-shrink: 0; width: 110px; text-transform: capitalize; font-weight: 600; } .asset-previous-locations__location-item-value { flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } .asset-previous-locations__close-icon-container { position: absolute; top: 5px; right: 5px; } .asset-previous-locations__close-icon { position: relative; display: inline-block; box-sizing: border-box; width: 15px; height: 15px; cursor: pointer; color: #969ea6; line-height: 15px; } .asset-previous-locations__close-icon::before, .asset-previous-locations__close-icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 15px; height: 2px; margin-left: -7.5px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #969ea6; } .asset-previous-locations__close-icon::after { transform: rotate(45deg); } .asset-previous-locations__close-icon:hover::before, .asset-previous-locations__close-icon:hover::after { background-color: #6e767e; }.asset-location { margin-bottom: 50px; } .asset-location textarea { resize: none; } .asset-location__field:not(:last-child) { margin-bottom: 15px; } .asset-location__checkbox { margin-bottom: 25px; } .asset-location__checkbox .checkbox__label { color: #333333; font-size: 14px; font-weight: 500; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .ownership-block__field:not(:last-child) { margin-bottom: 15px; } .ownership-block__field_indent { margin-top: 70px; } .ownership-block__field_textarea textarea { resize: none; } @media only screen and (max-width: 600px) { .ownership-block__field_textarea .text-area-form__place-holder { width: 100%; } } .ownership-block__field_textarea .text-area-form__input { font-size: 14px; } .ownership-block__checkbox { margin-left: 5px; } .ownership-block__checkbox:not(:last-child) { margin-bottom: 5px; } .ownership-block__checkbox_last:not(:last-child) { margin-bottom: 15px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .category-block__field:not(:last-child) { margin-bottom: 15px; } .category-block__field_indent { margin-top: 70px; } @media only screen and (max-width: 600px) { .category-block__field_textarea .text-area-form__place-holder { width: 100%; } } .category-block__field_textarea .text-area-form__input { font-size: 14px; } .category-block__checkbox { margin-left: 5px; } .category-block__checkbox:not(:last-child) { margin-bottom: 5px; } .category-block__checkbox_last:not(:last-child) { margin-bottom: 15px; }.insurance-block__field:not(:last-child) { margin-bottom: 15px; } .insurance-block__readonly-fields { display: flex; flex-direction: column; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .asset-data-form { max-width: 1400px; margin: 0 auto; padding: 20px; font-family: HelveticaNeue, Hind, serif; } .asset-data-form textarea { resize: none; } @media only screen and (max-width: 768px) { .asset-data-form { padding: 0; } } .asset-data-form__content { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } @media only screen and (max-width: 992px) { .asset-data-form__content { justify-content: center; } } @media only screen and (max-width: 600px) { .asset-data-form__content { padding: 0; } } .asset-data-form__content-column { width: 48%; } @media only screen and (max-width: 992px) { .asset-data-form__content-column { width: 100%; min-width: 200px; } } .asset-data-form__information-block { margin-bottom: 50px; } .asset-data-form__footer-container { position: sticky; bottom: 0; } .asset-data-form__empty-space { width: 100%; height: 15px; background-color: transparent; background-image: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); } .asset-data-form__footer { display: flex; justify-content: flex-end; padding: 10px 0; border-top: 2px solid #e4e8ec; background-color: #fff; } @media only screen and (max-width: 1580px) { .asset-data-form__footer { padding-right: 100px; } } @media only screen and (max-width: 600px) { .asset-data-form__footer { justify-content: flex-start; padding-right: 0; } } .asset-data-form__submit { margin-left: 30px; } .asset-data-form__submit[aria-disabled=true] { opacity: 0.55; cursor: not-allowed; } .asset-data-form__submit-tooltip-trigger { display: inline-flex; } .asset-data-form__submit-spinner { margin-right: 10px; animation: rotating 2s linear infinite; font-size: 15px; } .asset-data-form .breadcrumbs { margin-bottom: 40px; }.add-asset-page { padding-top: 30px; }.edit-asset-page { padding-top: 30px; }.si { position: relative; display: inline-flex; align-items: center; width: 100%; } .si__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; color: #94a3b8; transition: color 0.18s ease; z-index: 1; } .si__input { box-shadow: none !important; outline: none !important; border-radius: 10px; height: 36px; padding-left: 34px !important; padding-right: 12px; font-size: 13.5px; background: #f8fafc; border-color: #e2e8f0; color: #0f172a; } .si__input::-moz-placeholder { color: #94a3b8; opacity: 1; } .si__input::placeholder { color: #94a3b8; opacity: 1; } .si__input:focus { background: #fff; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.18) !important; } .si__input--with-clear { padding-right: 30px; } .si__input--with-tooltip { padding-right: 48px; } .si__input--with-clear.si__input--with-tooltip { padding-right: 62px; } .si__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: #e2e8f0; color: #64748b; cursor: pointer; padding: 0; transition: background 0.15s ease, color 0.15s ease; z-index: 1; } .si__clear:hover { background: #cbd5e1; color: #1e293b; } .si__tooltip-wrap { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } .si__tooltip { width: 200px; } .si__info-icon { color: #94a3b8; } .si__info-icon:hover { color: #64748b; } .si--filled .si__icon, .si--focused .si__icon { color: #6366f1; } .si--disabled { pointer-events: none; opacity: 0.55; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .advanced-search-form { padding: 20px 0 40px 0; animation: fadeIn 0.5s ease; border-bottom: 2px solid #c8d0d8; } .advanced-search-form__footer { display: flex; justify-content: flex-end; padding: 0 20px; } .advanced-search-form__form-btn { font-size: 14px; } .advanced-search-form__form-btn_submit { margin-left: 30px; } .advanced-search-form__inputs-container { display: flex; align-items: stretch; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } @media only screen and (max-width: 992px) { .advanced-search-form__inputs-container { flex-wrap: wrap; } } .advanced-search-form__inputs-container .range-picker-form-input { margin-bottom: 15px; } .advanced-search-form__column { flex-basis: 32%; } @media only screen and (max-width: 992px) { .advanced-search-form__column { flex-basis: 100%; } } .advanced-search-form__dropdown, .advanced-search-form__input { margin-bottom: 15px; } .advanced-search-form__dropdown_units { max-width: 200px; } .advanced-search-form .dropdown__list-container { z-index: 4; } .advanced-search-form__checkboxes-container { display: flex; margin-bottom: 15px; } @media only screen and (min-width: 600px) { .advanced-search-form__checkboxes-container { flex-direction: column; } } .advanced-search-form__checkboxes-label { width: 130px; font-size: 14px; } @media only screen and (min-width: 600px) { .advanced-search-form__checkboxes-label { padding-bottom: 15px; } } .advanced-search-form__checkboxes-content { display: flex; flex-wrap: wrap; width: calc(100% - 130px); } @media only screen and (min-width: 600px) { .advanced-search-form__checkboxes-content { width: 100%; padding-left: 15px; } } .advanced-search-form .range-picker__text-input-container { flex-grow: 1; } .advanced-search-form__media-container .advanced-search-form__checkbox { align-items: flex-start; } .advanced-search-form__checkbox { width: 50%; } @media only screen and (max-width: 600px) { .advanced-search-form__checkbox { width: 85%; } } .advanced-search-form__checkbox .checkbox { width: 100%; } .advanced-search-form__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .advanced-search-form__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .advanced-search-form__checkbox .checkbox__label { margin-left: 15px; padding-right: 5px; font-size: inherit; } .advanced-search-form__multiselect-container .multiselect-dropdown__label { display: none; } .advanced-search-form__multiselect-container .multiselect-dropdown__input { padding: 0 10px 0 0; } .advanced-search-form__multiselect-container .multiselect-dropdown__value { max-width: 350px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .mobile-table-sort { position: relative; cursor: pointer; color: #6e767e; } .mobile-table-sort:hover { color: #000000; } .mobile-table-sort__icon-container { display: flex; justify-content: center; align-items: center; flex-direction: column; } .mobile-table-sort__icon { font-size: 20px; } .mobile-table-sort__filters-container { position: absolute; top: 40px; right: 0; background-color: #fff; width: 70vw; max-width: 200px; padding: 10px 0; border: 1px solid #6e767e; border-radius: 3px; box-shadow: 9px 9px 10px 0px rgba(206, 206, 206, 0.5); z-index: 3; } .mobile-table-sort__filter { width: 100%; padding: 10px 15px; display: flex; align-items: center; transition-duration: 0.3s; } .mobile-table-sort__filter:hover { background-color: #f3f4f5; } .mobile-table-sort__filter_active { transition-duration: 0.3s; font-weight: 600; } .mobile-table-sort__portal-animation-enter { visibility: visible; transition: all 300ms linear; opacity: 0; transform: translate3d(50%, -50%, 0) scale(0); } .mobile-table-sort__portal-animation-enter-active { transition: all 300ms linear; opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .mobile-table-sort__portal-animation-exit-active { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .mobile-table-sort__portal-animation-exit { transition: all 300ms linear; opacity: 0; transform: translate3d(50%, -50%, 0) scale(0); } .mobile-table-sort__corner { width: 10px; height: 0; margin-right: 10px; } .mobile-table-sort__corner_up { width: 0; border-right: 5px solid transparent; border-bottom: 5px solid #c8d0d8; border-left: 5px solid transparent; } .mobile-table-sort__corner_down { width: 0; border-top: 5px solid #c8d0d8; border-right: 5px solid transparent; border-left: 5px solid transparent; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .selected-items-footer { position: fixed; z-index: 2; bottom: 0; left: 0; display: flex; align-items: center; flex-wrap: wrap; width: 100%; padding: 25px 60px 0; animation: fadeIn 0.3s ease; border-top: 3px solid #666; background-color: #efefef; } @media only screen and (max-width: 600px) { .selected-items-footer { padding: 20px 40px 0; } } .selected-items-footer__item { display: flex; align-items: center; justify-content: center; width: 20%; min-width: 200px; height: 100%; padding-bottom: 25px; } @media only screen and (max-width: 600px) { .selected-items-footer__item { width: 50%; min-width: auto; padding-bottom: 20px; } } .selected-items-footer__item_block { display: block; text-align: center; } .selected-items-footer__item-content { padding: 0 3px 3px 3px; border-bottom: 2px solid transparent; } .selected-items-footer__item-content:hover { cursor: pointer; border-color: black; } .selected-items-footer__item-icon { padding-right: 10px; font-size: 22px; } .selected-items-footer__item-description { display: inline; } .selected-items-footer__item-description_bold { padding-bottom: 3px; font-weight: 600; } .selected-items-footer__deselect { display: inline; padding: 0 3px; cursor: pointer; border-bottom: 2px solid transparent; font-style: italic; } .selected-items-footer__deselect:hover { border-color: black; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .tearsheet-fields--collection-pdf { color: #111827; } .tearsheet-fields--collection-pdf .forms-checkbox__label { color: #111827; } .tearsheet-fields__description { margin-bottom: 20px; font-size: 16px; } .tearsheet-fields__title { padding-top: 15px; margin-bottom: 10px; } .tearsheet-fields__include-all-container { display: flex; flex-direction: column; margin-top: 20px; } .tearsheet-fields__include-all-title { font-weight: 600; margin-bottom: 3px; } .tearsheet-fields__include-all-large-collections-note { margin-top: 5px; font-size: 14px; font-style: italic; color: grey; } .tearsheet-fields__include-all-checkbox { margin-top: 1px; width: 100% !important; } .tearsheet-fields__include-all-radio { margin-top: 4px; } .tearsheet-fields__include-all-radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .tearsheet-fields__include-all-radio-input { cursor: pointer; width: 16px; height: 16px; flex-shrink: 0; } .tearsheet-fields__prepared { display: flex; } .tearsheet-fields__field { max-width: 460px; margin: 25px 0; } .tearsheet-fields__appraisalsAll { width: 100% !important; margin-top: 5px; } .tearsheet-fields .checkbox-form { width: 50%; } @media only screen and (max-width: 600px) { .tearsheet-fields .checkbox-form { width: 100%; } } .tearsheet-fields .text-area-form__place-holder { width: 140px; } .tearsheet-fields__selectable-fields-container { display: flex; flex-wrap: wrap; } .tearsheet-fields__selectable-fields-container--two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 10px; } @media only screen and (max-width: 600px) { .tearsheet-fields__selectable-fields-container--two-columns { grid-template-columns: 1fr; } } .tearsheet-fields__selectable-fields-container--single-column { display: flex; flex-direction: column; gap: 8px; } .tearsheet-fields__selectable-fields-container-title { margin-top: 12px; margin-bottom: 7px; } .tearsheet-fields__selectable-fields-container-subtitle { margin-top: 7px; margin-bottom: 12px; font-size: 14px; color: grey; } .tearsheet-fields__checkbox-item { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; } .tearsheet-fields__checkbox-item .forms-checkbox { width: auto !important; flex-shrink: 0; } .tearsheet-fields__checkbox-control { width: auto !important; } .tearsheet-fields__checkbox-label { flex: 1; min-width: 0; color: #111827; font-family: HelveticaNeue, Hind, serif; font-size: 14px; line-height: 1.4; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .tearsheet-fields__checkbox-label--bold { font-weight: 600; } .tearsheet-fields__checkbox-info-slot { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; overflow: visible; position: relative; z-index: 2; } .tearsheet-fields__checkbox-info-icon { color: #111827; flex-shrink: 0; cursor: help; } .tearsheet-fields__checkbox { width: 100%; } .tearsheet-fields__checkbox span { font-family: HelveticaNeue, Hind, serif; } .tearsheet-fields__checkbox-bold { margin-bottom: 8px; } .tearsheet-fields__dropdown { max-width: 300px; margin: 25px 0; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .print-modal { color: #111827; } .print-modal .modal-header__title { font-weight: 400; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .print-modal { height: 75%; } } @media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) { .print-modal { height: 90%; } } .print-modal__content { padding: 24px 32px 8px; overflow: auto; overflow-x: hidden; color: #111827; } .print-modal__description { font-size: 15px; font-weight: 400; line-height: 1.55; color: #374151; margin: 0 0 8px; } .print-modal__form { display: flex; flex-direction: column; gap: 4px; } .print-modal__section { display: flex; flex-direction: column; gap: 12px; } .print-modal__section-title { font-size: 12px; font-weight: 600; line-height: 1.35; color: #111827; text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 4px; } .print-modal__section-title--first { margin-top: 8px; } .print-modal__section-title--additional-fields { margin-bottom: 14px; } .print-modal__divider { border: none; height: 1px; margin: 24px 0; background: linear-gradient(to right, transparent 0%, #e5e7eb 6%, #e5e7eb 94%, transparent 100%); } .print-modal__field-group { display: flex; flex-direction: column; gap: 4px; max-width: 420px; } .print-modal__form-radio-group { display: flex; flex-direction: column; gap: 4px; max-width: 100%; margin: 0; } .print-modal__form-radio { padding: 4px 0; color: #111827; } @media only screen and (max-width: 600px) { .print-modal__form-radio { padding: 4px 0; } } .print-modal__note, .print-modal__subdescription { margin: 12px 0 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; } .print-modal [data-slot=form-label] { gap: 2px; } .print-modal .controlled-field__required-mark, .print-modal .forms-input__required { color: #ef4444 !important; margin-left: 2px; } .print-modal .forms-radio-group { gap: 12px; } .print-modal .forms-radio-group__label { color: #111827; font-size: 14px; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__description { display: none; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__title { display: none; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__selectable-fields-container-subtitle { display: none; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__selectable-fields-container-title { display: none; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__field, .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__dropdown { max-width: 420px; margin: 16px 0; } .print-modal .tearsheet-fields--collection-pdf .print-modal__section-title { margin-top: 0; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__checkbox-label { flex: 0 1 auto; } .print-modal .tearsheet-fields--collection-pdf .tearsheet-fields__checkbox-info-slot { margin-left: 0; } .print-modal__title-emphasis { font-weight: 700; } .print-modal__bulk-export-title { margin: 24px 0 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827; } .print-modal__form-radio-group--first { margin-top: 4px; } .print-modal__form-select { max-width: 420px; } .print-modal__note--excel { margin: 8px 0 0; padding: 0; font-size: 14px; font-style: italic; line-height: 1.45; color: #6b7280; background: none; border: none; border-radius: 0; } .print-modal--excel .print-modal__content { padding-bottom: 4px; } .print-modal--excel .print-modal__field-group, .print-modal--excel .print-modal__form-radio, .print-modal--excel .print-modal__form-select { max-width: 420px; } .print-modal--excel .print-modal__section { margin-top: 16px; gap: 16px; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-table__header-cell_asset { width: 14%; } .collection-table__header-cell_artist { width: 15%; } .collection-table__header-cell_title { width: 15%; } .collection-table__header-cell_created { width: 10%; } .collection-table__header-cell_cost-basis { width: 10%; } .collection-table__header-cell_appraisal { width: 12%; } .collection-table__header-cell_category { width: 10%; } .collection-table__header-cell_action { width: 4%; } .collection-table_client-impersonated .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__pagination { top: 54px; } .collection-table_client-impersonated .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__table th { top: 104px; } .collection-table_client-impersonated.collection-table_hide-pagination .desktop-paginated-table_header-controls_sticky .desktop-paginated-table__table th { top: 54px; } .collection-table__header-checkbox .checkbox__icon-container { border-color: var(--primary-color); } .collection-table__header-checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .bulk-upload__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .bulk-upload__main-info { display: flex; margin-bottom: 30px; } @media only screen and (max-width: 768px) { .bulk-upload__main-info { flex-direction: column; } } .bulk-upload__form { transition-duration: 0.3s; } .bulk-upload__description { width: 50%; font-size: 16px; } .bulk-upload__description span { display: block; padding-top: 10px; font-weight: bold; font-size: 14px; } @media only screen and (max-width: 768px) { .bulk-upload__description { width: 100%; } } .bulk-upload__button { width: 50%; display: flex; align-items: center; } @media only screen and (max-width: 768px) { .bulk-upload__button { width: 100%; } } .bulk-upload__button { justify-content: center; } @media only screen and (max-width: 768px) { .bulk-upload__button { margin-top: 30px; justify-content: flex-start; } } .bulk-upload__dropzone { height: 150px; } .bulk-upload__dropzone.dropzone-form_has-document { height: auto; } @media only screen and (max-width: 768px) { .bulk-upload__dropzone { height: 75px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .bulk-update-appraisals__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .bulk-update-appraisals__main-info { display: flex; margin-bottom: 30px; } @media only screen and (max-width: 768px) { .bulk-update-appraisals__main-info { flex-direction: column; } } .bulk-update-appraisals__form { transition-duration: 0.3s; } .bulk-update-appraisals__description { width: 50%; font-size: 16px; } .bulk-update-appraisals__description span { display: block; padding-top: 10px; font-weight: bold; font-size: 14px; } @media only screen and (max-width: 768px) { .bulk-update-appraisals__description { width: 100%; } } .bulk-update-appraisals__button { width: 50%; display: flex; align-items: center; } @media only screen and (max-width: 768px) { .bulk-update-appraisals__button { width: 100%; } } .bulk-update-appraisals__button { justify-content: center; } @media only screen and (max-width: 768px) { .bulk-update-appraisals__button { margin-top: 30px; justify-content: flex-start; } } .bulk-update-appraisals__dropzone { height: 150px; } .bulk-update-appraisals__dropzone.dropzone-form_has-document { height: auto; } @media only screen and (max-width: 768px) { .bulk-update-appraisals__dropzone { height: 75px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-bulk-update__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .collection-bulk-update__field { margin-bottom: 15px; } .collection-bulk-update__field_tags { display: flex; } .collection-bulk-update__field_tags .tags-block { flex-grow: 1; } .collection-bulk-update__field_tags .ciq-tags__search-tag-container { margin: 0; } .collection-bulk-update__tags-field-label { display: flex; align-items: center; flex-shrink: 0; width: 130px; color: #333333; font-size: 14px; font-weight: 500; } @media only screen and (max-width: 600px) { .collection-bulk-update__tags-field-label { padding: 5px 0; } } .collection-bulk-update__error { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; padding: 10px; color: #fff; border-radius: 3px; background-color: #ff5368; font-size: 16px; } .collection-bulk-update__instruction { margin-bottom: 10px; font-weight: bold; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-settings { color: #111827; } .collection-settings.modal__window { max-height: 92%; max-width: 880px; } .collection-settings .modal-header { height: 64px; padding: 12px 28px; } .collection-settings .modal-header__title { font-size: 20px; line-height: 24px; font-weight: 600; } .collection-settings .modal-footer { padding: 12px 28px; flex-shrink: 0; } @media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) { .collection-settings { height: 92%; } } .collection-settings__content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 28px 6px; } .collection-settings__intro { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #edf0f6; border-radius: 8px; background: linear-gradient(180deg, #fbfcff 0%, #fff 100%); } .collection-settings__info { margin: 0; flex: 1; font-size: 13px; line-height: 1.35; color: #374151; } .collection-settings__info-accent { color: #333333; font-weight: 600; } .collection-settings__counter { display: inline-flex; align-items: baseline; flex-shrink: 0; gap: 2px; padding: 5px 9px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .collection-settings__counter-value { font-size: 13px; color: #111827; } .collection-settings__counter-separator { opacity: 0.55; } .collection-settings__counter--complete { border-color: color-mix(in srgb, var(--primary-color) 35%, #fff); background: var(--primary-color-lightest); color: var(--primary-color); } .collection-settings__counter--complete .collection-settings__counter-value { color: var(--primary-color); } .collection-settings__counter--invalid { border-color: #fecdd3; background: #fff1f2; color: #be123c; } .collection-settings__counter--invalid .collection-settings__counter-value { color: #be123c; } .collection-settings__form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; overflow: auto; } .collection-settings__sections { display: flex; flex-direction: column; gap: 8px; } .collection-settings__section { padding: 8px 10px 9px; border: 1px solid #edf0f6; border-radius: 8px; background: #fff; min-width: 0; } .collection-settings__section-name { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } .collection-settings__checkboxes-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; } .collection-settings__checkbox { display: flex; align-items: center; min-width: 0; min-height: 28px; padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; background: #f8fafc; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .collection-settings__checkbox:hover { background: #f1f5f9; border-color: #e2e8f0; } .collection-settings__checkbox--checked { background: var(--primary-color-lightest); border-color: color-mix(in srgb, var(--primary-color) 28%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 8%, transparent); } .collection-settings__checkbox .forms-checkbox { width: 100%; gap: 0.35rem; } .collection-settings__checkbox .forms-checkbox__input { width: 1rem !important; height: 1rem !important; min-width: 1rem !important; min-height: 1rem !important; } .collection-settings__checkbox .forms-checkbox__input svg { width: 0.75rem !important; height: 0.75rem !important; } .collection-settings__checkbox .forms-checkbox__label { font-size: 12px; font-weight: 500; line-height: 1.2; color: #1f2937; } .collection-settings__validation-error { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; max-height: 0; margin-bottom: 0; overflow: hidden; transition-duration: 0.3s; opacity: 0; color: #fff; border-radius: 8px; background-color: #ff5368; font-size: 12px; } .collection-settings__validation-error_visible { max-height: 80px; margin-bottom: 8px; padding: 8px 10px; opacity: 1; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .cvd-import__main-info { display: flex; margin-bottom: 30px; } @media only screen and (max-width: 768px) { .cvd-import__main-info { flex-direction: column; } } .cvd-import__form { transition-duration: 0.3s; } .cvd-import__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .cvd-import__description { width: 50%; font-size: 16px; } .cvd-import__description span { display: block; padding-top: 10px; font-weight: bold; font-size: 14px; } @media only screen and (max-width: 768px) { .cvd-import__description { width: 100%; } } .cvd-import__ul { list-style: inside; } .cvd-import__button { width: 50%; display: flex; align-items: center; } @media only screen and (max-width: 768px) { .cvd-import__button { width: 100%; } } .cvd-import__button { justify-content: center; } @media only screen and (max-width: 768px) { .cvd-import__button { margin-top: 30px; justify-content: flex-start; } } .cvd-import__dropzone { height: 80px; } .cvd-import__dropzone.dropzone-form_has-document { height: auto; } @media only screen and (max-width: 768px) { .cvd-import__dropzone { height: 75px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .full-import__main-info { display: flex; margin-bottom: 30px; } @media only screen and (max-width: 768px) { .full-import__main-info { flex-direction: column; } } .full-import__form { transition-duration: 0.3s; } .full-import__content { padding: 30px 30px 20px 30px; overflow: scroll; overflow-x: hidden; } .full-import__description { width: 50%; font-size: 16px; } .full-import__description span { display: block; padding-top: 10px; font-weight: bold; font-size: 14px; } @media only screen and (max-width: 768px) { .full-import__description { width: 100%; } } .full-import__button { width: 50%; display: flex; align-items: center; } @media only screen and (max-width: 768px) { .full-import__button { width: 100%; } } .full-import__button { justify-content: center; } @media only screen and (max-width: 768px) { .full-import__button { margin-top: 30px; justify-content: flex-start; } } .full-import__dropzone { height: 80px; } .full-import__dropzone.dropzone-form_has-document { height: auto; } @media only screen and (max-width: 768px) { .full-import__dropzone { height: 75px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .works-counter { padding-left: 10px; } .works-counter span { padding-left: 0; margin-left: 5px; } .works-counter__tooltip { display: inline; vertical-align: baseline; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection__advanced-search-works-count { font-weight: normal; color: grey; font-size: 17px; } .collection__advanced-search-works-count__underlined { padding-left: 5px; text-decoration: underline; transition: 0.1s ease; } .collection__advanced-search-works-count__underlined:hover { color: #333333; } .collection__advanced-search-works-count_mobile { font-size: 14px; padding-left: 5px; }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } :root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection__mobile-filters .mobile-table-sort__filters-container { right: unset !important; } .collection { padding-top: 70px; animation: fadeIn 1s ease-out; } .collection__actions { display: flex; flex-direction: row; justify-content: space-between; padding-top: 30px; } @media only screen and (max-width: 500px) { .collection__actions { flex-direction: column-reverse; } } .collection__search-group { display: flex; flex-wrap: nowrap; width: 100%; max-width: 450px; } @media only screen and (max-width: 768px) { .collection__search-group { align-items: flex-start; } } .collection__search-input-group { display: flex; align-items: center; width: 100%; transition: 0.2s ease; transform: scale(1); transform-origin: 0 0; } @media only screen and (max-width: 768px) { .collection__search-input-group { align-items: flex-start; flex-direction: column; } } .collection__search-input { width: 100%; margin-right: 20px; transition: all 0.3s linear; } @media only screen and (max-width: 768px) { .collection__search-input { margin: 0; } .collection__search-input input { padding: 0; } .collection__search-input .search-input__icon-container { display: none; } .collection__search-input i { font-size: 16px; } } .collection__search-input input { width: 100%; text-overflow: ellipsis; } .collection__advanced-search-btn { display: flex; cursor: pointer; font-weight: bold; } .collection__advanced-search-btn span { white-space: nowrap; } .collection__advanced-search-btn_desktop { margin-top: 15px; padding: 10px 0px; border-bottom: 2px solid #c8d0d8; font-size: 18px; } @media only screen and (max-width: 768px) { .collection__advanced-search-btn_desktop { display: none; } } .collection__advanced-search-btn_desktop > span { padding-left: 10px; } .collection__advanced-search-btn_mobile { display: none; margin-top: 10px; font-size: 14px; } @media only screen and (max-width: 768px) { .collection__advanced-search-btn_mobile { display: flex; } } .collection__advanced-search-arrow { margin-left: 10px; transition: transform 0.4s ease-in-out; vertical-align: middle; } .collection__advanced-search-arrow_down { transform: rotateX(180deg); } .collection__actions-right { display: flex; align-items: flex-start; justify-content: flex-end; } @media only screen and (max-width: 500px) { .collection__actions-right { margin-bottom: 10px; } } .collection__action-button { padding: 5px 15px; line-height: 15px; max-width: 100%; flex: 1; } @media only screen and (max-width: 992px) { .collection__action-button { padding: 0 10px; } .collection__action-button:last-child { padding-right: 0; } .collection__action-button_mobile-hide { display: none; } } .collection__action-button:focus-visible { box-shadow: 0 0 0 3px var(--primary-color-light); border-radius: 3px; outline: none; } .collection__mobile-filters-container { display: none; width: 71px; height: 45px; } @media only screen and (max-width: 992px) { .collection__mobile-filters-container { display: block; } } .collection__mobile-filters-container .mobile-table-sort__icon { font-size: 23px; } .collection__mobile-filters-container .mobile-table-sort__filters-container { top: 46px; } .collection__mobile-search-button { display: none; padding: 1px 0 0 0; } @media only screen and (max-width: 768px) { .collection__mobile-search-button { display: block; } } .collection__mobile-search-button .image-add-button__icon { font-size: 18px; } .collection__table { padding-top: 20px; } .collection__mobile-filters { display: none; } @media only screen and (max-width: 992px) { .collection__mobile-filters { display: block; } } .collection__mobile-filters .mobile-table-sort__icon { font-size: 23px; } .collection__mobile-filters .mobile-table-sort__filters-container { top: 46px; } .collection .selected-items-footer__item { width: 16.66%; } .collection__bulk-update-button { height: 26px; font-size: 16px; } .collection_with-banner { padding-top: 10px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-artwork-description { position: relative; display: flex; align-items: flex-start; justify-content: space-between; } @media only screen and (max-width: 600px) { .collection-artwork-description { flex-direction: column; } } .collection-artwork-description__column { width: 48%; } @media only screen and (max-width: 600px) { .collection-artwork-description__column { width: 100%; margin-bottom: 25px; } } .collection-artwork-description__info-value { font-weight: bold; } .collection-artwork-description__item { font-size: 14px; } .collection-artwork-description__item:not(:first-child) { margin-top: 15px; } .collection-artwork-description__item-label { margin-bottom: 4px; text-transform: capitalize; font-weight: 600; } .collection-artwork-description__item-value { font-size: 14px; } .collection-artwork-description__item-value_bold { font-weight: 600; } .collection-artwork-description__item-value_italic { font-style: italic; } .collection-artwork-description__item-value_accent { color: var(--primary-color); } .collection-artwork-description__item-value_large, .collection-artwork-description__item-value_auction-house, .collection-artwork-description__item-value_gallery { font-size: 20px; } .collection-artwork-description__item-value:not(:first-child) { margin-top: 4px; } .white-space-prewrap { white-space: pre-wrap; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-artwork-insurance__card { overflow: hidden; border: 1px solid #c8d0d8; border-radius: 8px; background-color: #fcfcfc; } .collection-artwork-insurance__card_expired { background-color: #fffafa; border-color: rgba(255, 38, 82, 0.08); } .collection-artwork-insurance__header { display: flex; align-items: center; gap: 8px; padding: 0.5rem 0.75rem; border-bottom: 1px solid #c8d0d8; } .collection-artwork-insurance__icon-wrap { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid #c8d0d8; background-color: #fff; color: #4B0082; } .collection-artwork-insurance__icon-wrap_expired { background-color: #fff; color: #ff2652; border-color: rgba(255, 38, 82, 0.15); } .collection-artwork-insurance__title { font-size: 14px; font-weight: 500; color: #333333; } .collection-artwork-insurance__grid { display: grid; grid-template-columns: 1fr 1fr; } @media only screen and (max-width: 600px) { .collection-artwork-insurance__grid { grid-template-columns: 1fr; } } .collection-artwork-insurance__cell { padding: 0.5rem 0.75rem; border-bottom: 1px solid #c8d0d8; } @media only screen and (max-width: 600px) { .collection-artwork-insurance__cell { border-right: none !important; } } .collection-artwork-insurance__cell:nth-child(3), .collection-artwork-insurance__cell:nth-child(4) { border-bottom: none; } @media only screen and (max-width: 600px) { .collection-artwork-insurance__cell:nth-child(3) { border-bottom: 1px solid #c8d0d8; } } .collection-artwork-insurance__cell_border-right { border-right: 1px solid #c8d0d8; } .collection-artwork-insurance__label { margin: 0 0 2px; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6e767e; } .collection-artwork-insurance__field { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .collection-artwork-insurance__field-icon { flex-shrink: 0; color: #969ea6; } .collection-artwork-insurance__value { font-size: 13px; color: #333333; } .collection-artwork-insurance__value_mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .collection-artwork-insurance__badge { margin-left: 2px; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 500; line-height: 1.4; } .collection-artwork-insurance__badge_upcoming { background-color: #fff4e5; color: #b45309; } .collection-artwork-insurance__badge_expired { background-color: rgba(255, 38, 82, 0.1); color: #ff2652; } .collection-artwork-insurance__notes { padding: 0.5rem 0.75rem; border-top: 1px solid #c8d0d8; background-color: #fff; } .collection-artwork-insurance__notes-text { margin: 0; font-size: 12px; line-height: 1.5; color: #6e767e; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .image-viewer__image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .image-viewer__slide-wrapper { position: relative; width: 100%; height: 100%; } .image-viewer__slide-wrapper:hover .image-viewer__slide-menu-btn { opacity: 1; } .image-viewer__slide-menu-btn { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; opacity: 0; transition: opacity 0.5s ease; z-index: 2; } .image-viewer__slide-menu-btn:hover, .image-viewer__slide-menu-btn[data-state=open] { background: rgba(0, 0, 0, 0.75); opacity: 1; } .image-viewer__modal-container { background-color: rgba(0, 0, 0, 0.8); padding: 70px; } .image-viewer__close-btn-container { position: absolute; z-index: 1; top: 0; right: 0; display: flex; align-items: center; } .image-viewer__close-btn { padding: 35px; position: relative; display: inline-block; box-sizing: border-box; width: 25px; height: 25px; cursor: pointer; color: #c8d0d8; line-height: 25px; } .image-viewer__close-btn::before, .image-viewer__close-btn::after { position: absolute; top: 50%; left: 50%; display: block; width: 25px; height: 2px; margin-left: -12.5px; content: ""; transition: all 0.2s ease-out; transform: rotate(-45deg); background-color: #c8d0d8; } .image-viewer__close-btn::after { transform: rotate(45deg); } .image-viewer__close-btn:hover::before, .image-viewer__close-btn:hover::after { background-color: rgb(244.7606382979, 246.25, 247.7393617021); } .image-viewer__fullscreen-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: #c8d0d8; cursor: pointer; padding: 12px; opacity: 0.8; transition: opacity 0.15s ease, color 0.15s ease; } .image-viewer__fullscreen-btn:hover { opacity: 1; color: rgb(244.7606382979, 246.25, 247.7393617021); } .image-viewer__fullscreen-wrapper:fullscreen { background: #000; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-artwork-arrows { display: flex; padding: 15px 0; overflow: hidden; } .collection-artwork-arrows__overflow { margin-left: -14px; } .collection-artwork-arrow { position: relative; width: 40px; height: 40px; padding: 0; } .collection-artwork-arrow_prev { transform: rotate(-90deg); } .collection-artwork-arrow_next { transform: rotate(90deg); } .collection-artwork-arrow::before, .collection-artwork-arrow::after { position: absolute; top: 0; left: 0; width: 0; height: 0; content: ""; border: solid transparent; border-radius: 8px; } .collection-artwork-arrow::before { left: 4px; border-width: 16px; border-bottom-color: #6e767e; } .collection-artwork-arrow::after { border-width: 20px; border-bottom-color: #fff; } .collection-artwork-arrow:disabled { cursor: default; opacity: 0.5; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .collection-artwork-basic-field { display: flex; padding: 0 15px 35px 15px; font-size: 14px; } @media only screen and (max-width: 768px) { .collection-artwork-basic-field { flex-direction: column; width: 100%; } } .collection-artwork-basic-field__title { text-transform: capitalize; width: 110px; padding: 0 5px 10px 0; font-weight: 600; } .collection-artwork-basic-field__text { width: calc(100% - 110px); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .artwork-similar-works-in-price-database { margin-top: 25px; } .artwork-similar-works-in-price-database__link-label { font-size: 20px; color: var(--primary-color); cursor: pointer; text-decoration: underline; margin-left: 15px; } .artwork-similar-works-in-price-database__link-label:hover { text-decoration: none; } .artwork-similar-works-in-price-database__logo-container { display: flex; align-items: center; align-self: center; } @media only screen and (max-width: 992px) { .artwork-similar-works-in-price-database__logo-container { padding-right: 40px; } } @media only screen and (max-width: 1100px) { .artwork-similar-works-in-price-database__logo-container { padding-right: 15px; } } .artwork-similar-works-in-price-database__logo { width: 80px; height: auto; } @media only screen and (max-width: 1200px) { .artwork-similar-works-in-price-database__logo { width: 120px; } } @media only screen and (max-width: 768px) { .artwork-similar-works-in-price-database__logo { width: 100%; max-width: 100px; } }.embla { max-width: 48rem; --slide-height: 19rem; } .embla-modal { max-width: 90%; --slide-height: 80vh; } .embla-spacing { --slide-spacing: 1rem; --slide-size: 100%; margin: auto; } .embla__viewport { overflow: hidden; } .embla__container { display: flex; touch-action: pan-y pinch-zoom; margin-left: calc(var(--slide-spacing) * -1); } .embla__slide { transform: translate3d(0, 0, 0); flex: 0 0 var(--slide-size); min-width: 0; padding-left: var(--slide-spacing); } .embla__slide__number { display: flex; align-items: center; justify-content: center; height: var(--slide-height); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .embla__dots { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-left: 15px; } .embla__dot { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .embla__dot:after { box-shadow: inset 0 0 0 2px lightgray; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; content: ""; } .embla__dot--selected:after { box-shadow: inset 0 0 0 2px rgb(89, 88, 88); } .embla__controls { display: flex; justify-content: space-between; margin-top: 5px; } .embla__buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; align-items: center; margin-right: 15px; } .embla__button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; box-shadow: inset 0 0 0 2px lightgray; width: 35px; height: 35px; z-index: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .embla__button__svg { width: 35%; height: 35%; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .breadcrumbs { display: flex; align-items: center; width: 100%; min-height: 30px; } .breadcrumbs__link { cursor: pointer; } .breadcrumbs__item { display: flex; align-items: center; position: relative; margin-right: 10px; padding-right: 20px; color: var(--primary-color); font-size: 14px; line-height: 24px; } .breadcrumbs__item::after { display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 0; border-left: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); transform: rotate(45deg); } .breadcrumbs__item_inactive { color: #969ea6; } .breadcrumbs__item_inactive .breadcrumbs__link { cursor: default; } .breadcrumbs__item:last-of-type { margin-right: 0; padding-right: 0; } .breadcrumbs__item:last-of-type::after { display: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .asset-changes-block__caption { font-size: 24px; padding: 0 5px; } .asset-changes-block__caption-container { display: flex; justify-content: space-between; align-items: flex-end; } .asset-changes-block__link { color: var(--primary-color); cursor: pointer; text-decoration: underline; } .asset-changes-block__link:hover { text-decoration: none; } .asset-changes-block__header { display: flex; justify-content: space-between; font-weight: 600; padding: 15px; margin: 10px 0; border-top: 2px solid; border-bottom: 2px solid; border-color: rgb(173, 173, 173); } @media only screen and (max-width: 768px) { .asset-changes-block__header { flex-direction: column; align-items: start; } } .asset-changes-block__row { display: flex; justify-content: space-between; padding: 10px 15px; } .asset-changes-block__row:hover { background-color: #f3f4f5; } @media only screen and (max-width: 768px) { .asset-changes-block__row { flex-direction: column; align-items: unset; } } .asset-changes-block__item { min-width: 230px; width: 100%; } @media only screen and (max-width: 768px) { .asset-changes-block__item { min-width: 0; } .asset-changes-block__item_name { font-weight: 600; } } .asset-changes-block__header-item { min-width: 230px; width: 100%; } @media only screen and (max-width: 768px) { .asset-changes-block__header-item { padding: 5px 0; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeletonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulseErrorShadow { 0% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(255, 38, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 38, 82, 0); } } .animate-spin { animation: rotating 1s linear infinite; } .collection-artwork { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0 30px; text-align: left; font-weight: normal; } .collection-artwork__header-container { position: sticky; z-index: 1; top: 0px; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; padding: 10px 5px 10px; border-bottom: 2px solid #c8d0d8; background-color: #fff; } @media only screen and (max-width: 768px) { .collection-artwork__header-container { align-items: unset; flex-direction: column; } } .collection-artwork__header-info { display: flex; flex-flow: column; justify-content: space-between; /* IE fix */ } @media only screen and (max-width: 768px) { .collection-artwork__header-info { width: 100%; } } .collection-artwork__asset-name { padding-right: 40px; font-size: 24px; font-weight: bold; font-style: italic; line-height: 32px; } @media only screen and (max-width: 992px) { .collection-artwork__asset-name { padding-right: 0; } } .collection-artwork__dimensions { padding-right: 40px; } @media only screen and (max-width: 992px) { .collection-artwork__dimensions { padding-right: 0; } } .collection-artwork__header-caption { display: flex; align-items: center; flex-wrap: wrap; } @media only screen and (max-width: 992px) { .collection-artwork__header-caption { align-items: flex-start; flex-direction: column; } } .collection-artwork__author-name { font-size: 24px; text-underline-offset: 3px; -webkit-text-decoration: underline rgba(255, 255, 255, 0); text-decoration: underline rgba(255, 255, 255, 0); transition: text-decoration-color 0.2s ease; } @media only screen and (max-width: 992px) { .collection-artwork__author-name { margin-top: 20px; } } .collection-artwork__author-name_btn:hover { text-decoration-color: rgb(255, 255, 255); text-decoration: underline; } .collection-artwork__author-details { color: #6e767e; font-size: 16px; } @media only screen and (max-width: 500px) { .collection-artwork__author-details { display: inline-block; margin-top: 10px; } } .collection-artwork__asset-creation-date { font-weight: 400; font-style: normal; } .collection-artwork__header-actions-items { display: flex; flex-direction: column; flex-shrink: 0; font-size: 14px; font-weight: normal; } @media only screen and (max-width: 768px) { .collection-artwork__header-actions-items { flex-direction: row; justify-content: space-around; width: 100%; margin-top: 20px; } } @media only screen and (max-width: 500px) { .collection-artwork__header-actions-items { margin-right: 0; } } .collection-artwork__actions-item { display: flex; gap: 5px; align-items: center; padding: 3px 0 3px 3px; cursor: pointer; border-bottom: 2px solid #fff; } @media only screen and (max-width: 992px) { .collection-artwork__actions-item:not(:last-child) { margin-bottom: 0; } } .collection-artwork__actions-item:not(:last-child) { margin-bottom: 5px; } .collection-artwork__actions-item:hover { border-color: black; } .collection-artwork__actions-item_icon { margin-right: 8px; } .collection-artwork__actions-item-icon { width: 25px; } .collection-artwork__main-info { display: flex; justify-content: space-between; padding: 0 5px 15px 5px; } @media only screen and (max-width: 992px) { .collection-artwork__main-info { align-items: flex-start; flex-direction: column; } } @media only screen and (max-width: 600px) { .collection-artwork__main-info { padding: 0 0 15px 0; } } .collection-artwork__main-info-image { width: 48%; } @media only screen and (max-width: 992px) { .collection-artwork__main-info-image { width: 100%; margin-bottom: 20px; } } .collection-artwork__main-info-details { width: 48%; } @media only screen and (max-width: 992px) { .collection-artwork__main-info-details { width: 100%; } } .collection-artwork__row { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px; } .collection-artwork__column { width: 48%; } @media only screen and (max-width: 768px) { .collection-artwork__column { width: 100%; } } .collection-artwork__previous-location-item { margin-bottom: 35px; border-bottom: 1px solid #c8d0d8; } .collection-artwork__basic-two-prices { display: flex; flex-direction: column; } .collection-artwork__basic-two-prices span:last-of-type { font-style: italic; } .collection-artwork-details { display: flex; flex-basis: 50%; flex-direction: column; } @media only screen and (max-width: 768px) { .collection-artwork-details { padding-left: 0; } } .collection-artwork-details__appraisal { padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .collection-artwork-details__appraisal:first-of-type { padding-top: 0; } .collection-artwork-details__appraisal:last-of-type { border-bottom: none; } .collection-artwork-details__title { min-width: 100%; margin-bottom: 30px; padding-left: 10px; border-bottom: 2px solid #c8d0d8; font-size: 18px; font-weight: bold; line-height: 46px; } @media only screen and (max-width: 992px) { .collection-artwork-details__title { padding-left: 0; } } .collection-artwork-details__ownership-status { padding-bottom: 5px; } .collection-artwork-details__tag-container { display: flex; flex-wrap: wrap; } .collection-artwork-details__tag { overflow: hidden; max-width: 200px; margin: 5px; padding: 5px; white-space: nowrap; text-overflow: ellipsis; border-radius: 5px; background-color: #efeeea; } .collection-artwork-details-item { display: flex; padding: 0 15px 35px 15px; font-size: 14px; } .collection-artwork-details-item_media { align-items: center; justify-content: space-between; } .collection-artwork-details-item__title { display: flex; align-items: center; width: 110px; padding-bottom: 10px; text-transform: capitalize; font-weight: 600; } @media only screen and (max-width: 768px) { .collection-artwork-details-item__title_media-name, .collection-artwork-details-item__title_media-type { padding: 0 0 10px 0; text-align: center; } } .collection-artwork-details-item__title_media-name { width: 100%; } .collection-artwork-details-item__title_media-type { width: 100%; max-width: 200px; } .collection-artwork-details-item__title_media-name, .collection-artwork-details-item__title_media-type { padding: 0 10px 0 0; font-weight: normal; line-height: 16px; } @media only screen and (max-width: 768px) { .collection-artwork-details-item__title_media-name_media-name, .collection-artwork-details-item__title_media-name_media-type, .collection-artwork-details-item__title_media-type_media-name, .collection-artwork-details-item__title_media-type_media-type { padding: 0 0 10px 0; text-align: center; } } .collection-artwork-details-item__text { width: calc(100% - 110px); } .collection-artwork-details-item__text_media { width: auto; color: var(--primary-color); cursor: pointer; } .collection-artwork-details-item__lock-icon { display: inline-flex; align-items: center; margin-left: 8px; } .collection-artwork-details-item__lock-icon svg { fill: #fff; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisals-table-row { font-size: 14px; } .appraisals-table-row__view, .appraisals-table-row__edit { cursor: pointer; text-decoration: none; color: var(--primary-color); font-size: 12px; font-weight: bold; } .appraisals-table-row__view { word-break: normal; padding: 10px 30px; } .appraisals-table-row__disabled-delete { color: #6e767e; } .appraisals-table-row__related-to, .appraisals-table-row__artist-maker { text-decoration: underline; } .appraisals-table-row__related-to:hover, .appraisals-table-row__artist-maker:hover { text-decoration: none; } .appraisals-table-row__image { width: 50px; height: auto; } .appraisals-table-row__image_file { text-align: center; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisals-mobile-row { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 10px 5px; border-bottom: 1px solid #c8d0d8; } .appraisals-mobile-row:first-child { border-top: 1px solid #c8d0d8; } .appraisals-mobile-row__name, .appraisals-mobile-row__type, .appraisals-mobile-row__date { padding: 3px 0; } .appraisals-mobile-row__name { font-weight: 600; max-width: 180px; } .appraisals-mobile-row__view { font-weight: 500; color: var(--primary-color); text-decoration: none; } .appraisals-mobile-row__related-to { text-decoration: underline; } .appraisals-mobile-row__related-to:hover { text-decoration: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisals-skeleton { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 10px 5px; border-bottom: 1px solid #c8d0d8; } .appraisals-skeleton:first-child { border-top: 1px solid #c8d0d8; } .appraisals-skeleton__name, .appraisals-skeleton__type, .appraisals-skeleton__date, .appraisals-skeleton__file-link { margin: 8px 0; padding: 8px 0; height: 10px; animation: skeletonGradient 3s ease infinite; background: linear-gradient(-45deg, #ffffff, #e5e5e5, #dfdfdf, #e3e3e3, #ffffff); background-size: 400% 400%; } .appraisals-skeleton__date { width: 80px; border-radius: 5px; background-color: #e3ebf3; } .appraisals-skeleton__type { width: 180px; border-radius: 5px; background-color: #e3ebf3; } .appraisals-skeleton__name { width: 100px; border-radius: 5px; background-color: #e3ebf3; } .appraisals-skeleton__file-link { padding: 11px 0; width: 80px; border-radius: 5px; background-color: #e3ebf3; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisals-page__caption { margin-bottom: 40px; text-align: center; font-size: 32px; font-weight: bold; } .appraisals-page__action-bar { position: relative; display: flex; justify-content: space-between; padding-top: 30px; padding-bottom: 25px; } @media only screen and (max-width: 992px) { .appraisals-page__action-bar { flex-direction: column; } } .appraisals-page .appraisals-page__mobile-filters { display: none; } @media only screen and (max-width: 900px) { .appraisals-page .appraisals-page__mobile-filters { display: block; } } .appraisals-page__search-input { width: 100%; max-width: 300px; } @media only screen and (max-width: 992px) { .appraisals-page__search-input { width: 75%; } } @media only screen and (max-width: 768px) { .appraisals-page__search-input { margin-bottom: 15px; } } @media only screen and (max-width: 600px) { .appraisals-page__search-input { align-self: flex-start; width: 100%; max-width: 100%; } } .appraisals-page__mail-icon { margin-right: 5px; } .appraisals-page__upload div { padding: 0; } .appraisals-page__controls-buttons { display: flex; align-items: center; justify-content: space-between; } .appraisals-page__controlls { display: flex; align-items: center; justify-content: space-between; width: 100%; } @media only screen and (max-width: 992px) { .appraisals-page__controlls { margin-bottom: 15px; } } @media only screen and (max-width: 600px) { .appraisals-page__controlls { flex-direction: column; } } .appraisals-page__upload { margin-left: 20px; } @media only screen and (max-width: 992px) { .appraisals-page__upload { align-self: flex-end; } } .appraisals-page__created-column { width: 10%; } .appraisals-page__name-column { width: 15%; } .appraisals-page__related-to-column { width: 15%; } .appraisals-page__type-column { width: 15%; } .appraisals-page__source-column { width: 15%; } .appraisals-page__image-column { width: 50px; } .appraisals-page__edit-column, .appraisals-page__delete-column { width: 60px; text-align: center; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .appraisals { padding-top: 40px; font-family: HelveticaNeue, Hind, serif; } .appraisals_with-banner { padding-top: 10px; } .appraisals__caption { margin-bottom: 40px; text-align: center; font-size: 32px; font-weight: bold; } .appraisals__header { display: flex; justify-content: space-between; width: 100%; padding: 0 20px 10px 20px; border-bottom: 2px solid #c8d0d8; } @media only screen and (max-width: 600px) { .appraisals__header { flex-direction: column; } } .appraisals__header .content-section-title__divider { display: none; } .appraisals__warning-msg { margin-top: 40px; }.artist-navigation-autosuggest { position: relative; width: 100%; } .artist-navigation-autosuggest__container { position: relative; width: 100%; } .artist-navigation-autosuggest__input-wrapper { position: relative; } .artist-navigation-autosuggest__dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 3; background: white; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); max-height: 300px; overflow: hidden; display: none; } .artist-navigation-autosuggest__dropdown--open { display: block; } .artist-navigation-autosuggest__dropdown-content { max-height: 300px; overflow-y: auto; } .artist-navigation-autosuggest__list { padding: 0; } .artist-navigation-autosuggest__command-item { padding: 0; margin: 0; border: none; background: none; } .artist-navigation-autosuggest__command-item:hover { background-color: #f8fafc; } .artist-navigation-autosuggest__command-item:focus { background-color: #f1f5f9; outline: none; } .artist-navigation-autosuggest__item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background-color 0.15s ease; width: 100%; } .artist-navigation-autosuggest__item:last-child { border-bottom: none; } .artist-navigation-autosuggest__item-info { flex: 1; min-width: 0; cursor: pointer; } .artist-navigation-autosuggest__item-name { font-weight: 500; color: #1e293b; margin-bottom: 4px; font-size: 14px; line-height: 1.4; } .artist-navigation-autosuggest__item-details { color: #64748b; font-size: 12px; line-height: 1.3; } .artist-navigation-autosuggest__item-actions { display: flex; gap: 8px; margin-left: 16px; } .artist-navigation-autosuggest__view-btn, .artist-navigation-autosuggest__follow-btn { font-size: 12px; padding: 6px 12px; min-width: auto; height: auto; line-height: 1.2; } .artist-navigation-autosuggest__view-btn { background-color: #3b82f6; color: white; border: 1px solid #3b82f6; } .artist-navigation-autosuggest__view-btn:hover { background-color: #2563eb; border-color: #2563eb; } .artist-navigation-autosuggest__follow-btn { background-color: transparent; color: #64748b; border: 1px solid #d1d5db; } .artist-navigation-autosuggest__follow-btn:hover { background-color: #f8fafc; color: #374151; border-color: #9ca3af; } .artist-navigation-autosuggest__loading { padding: 16px; text-align: center; } .artist-navigation-autosuggest__loading-content { display: flex; align-items: center; justify-content: center; gap: 8px; } .artist-navigation-autosuggest__loading-spinner { width: 16px; height: 16px; color: var(--primary-color); animation: spin 1s linear infinite; } .artist-navigation-autosuggest__loading-text { color: #64748b; font-size: 14px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .artist-navigation-autosuggest__no-results { padding: 16px; text-align: center; color: #64748b; font-size: 14px; } @media (max-width: 768px) { .artist-navigation-autosuggest__item { flex-direction: column; align-items: flex-start; padding: 16px; } .artist-navigation-autosuggest__item-actions { margin-left: 0; margin-top: 12px; width: 100%; } .artist-navigation-autosuggest__view-btn, .artist-navigation-autosuggest__follow-btn { flex: 1; justify-content: center; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .artist-follow-btn { min-width: 130px; } .artist-follow-btn_disabled { pointer-events: none; color: #fff; background: var(--primary-color); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .artist-liquidity { display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--primary-color); } .artist-liquidity__label { vertical-align: middle; } .artist-liquidity__arrow { vertical-align: middle; } .artist-liquidity__arrow_right { padding-top: 5px; padding-left: 0; transform: rotate(90deg); } .artist-liquidity__arrow_up { padding: 0 2px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .artist-trend-market { color: var(--primary-color); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-table-row { cursor: pointer; animation: fadeIn 0.5s ease-out; font-size: 14px; line-height: 1.2em; } .trends-table-row__link { font-size: inherit; font-weight: normal; } .trends-table-row__author-photo { overflow: hidden; width: 50px; height: 50px; cursor: pointer; border-radius: 50%; background-position: 50%; background-size: cover; filter: grayscale(100%); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-mobile-table-row { display: flex; margin-bottom: 12px; padding: 10px; cursor: pointer; border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); text-decoration: none; color: inherit; } .trends-mobile-table-row:active { color: inherit; } .trends-mobile-table-row:focus { outline: none; } @media only screen and (max-width: 500px) { .trends-mobile-table-row { flex-direction: column; } } .trends-mobile-table-row__photo-container { display: flex; align-items: center; flex-direction: column; justify-content: space-around; padding-left: 10%; } @media only screen and (max-width: 768px) { .trends-mobile-table-row__photo-container { padding: 0 20px 0px 10px; } } @media only screen and (max-width: 500px) { .trends-mobile-table-row__photo-container { padding: 10px 0 10px 0; } } .trends-mobile-table-row__author-photo { overflow: hidden; width: 100px; height: 100px; cursor: pointer; border-radius: 50%; background-position: 50%; background-size: cover; filter: grayscale(100%); } @media only screen and (max-width: 500px) { .trends-mobile-table-row__author-photo { margin-bottom: 15px; } } .trends-mobile-table-row__content { flex-grow: 1; padding: 0 10%; } @media only screen and (max-width: 768px) { .trends-mobile-table-row__content { padding: 0; } } .trends-mobile-table-row__content-row { position: relative; display: flex; justify-content: space-between; padding: 4px 0; } .trends-mobile-table-row__content-row-title { padding-right: 10px; vertical-align: baseline; } .trends-mobile-table-row__content-row-value { font-weight: bold; } .trends-mobile-table-row__content-row-value_two-lines { position: absolute; top: 0; right: 0; width: 35%; text-align: right; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-mobile-table-row-skeleton { display: flex; margin-bottom: 12px; padding: 10px; color: inherit; border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); } @media only screen and (max-width: 500px) { .trends-mobile-table-row-skeleton { flex-direction: column; } } .trends-mobile-table-row-skeleton__photo-container { display: flex; align-items: center; flex-direction: column; justify-content: space-around; padding-left: 10%; } @media only screen and (max-width: 768px) { .trends-mobile-table-row-skeleton__photo-container { padding: 0 20px 0px 10px; } } @media only screen and (max-width: 500px) { .trends-mobile-table-row-skeleton__photo-container { padding: 10px 0 10px 0; } } .trends-mobile-table-row-skeleton__author-photo { overflow: hidden; width: 100px; height: 100px; border-radius: 50%; animation: skeletonGradient 3s ease infinite; background: linear-gradient(-45deg, #ffffff, #e5e5e5, #dfdfdf, #e3e3e3, #ffffff); background-size: 400% 400%; } .trends-mobile-table-row-skeleton__content { flex-grow: 1; padding: 0 10%; } @media only screen and (max-width: 768px) { .trends-mobile-table-row-skeleton__content { padding: 0; } } .trends-mobile-table-row-skeleton__content-row { display: inline-block; width: 100%; height: 1em; margin: 4px 0; animation: skeletonGradient 3s ease infinite; background: linear-gradient(-45deg, #ffffff, #e5e5e5, #dfdfdf, #e3e3e3, #ffffff); background-size: 400% 400%; } @media only screen and (max-width: 500px) { .trends-mobile-table-row-skeleton__content-row { width: 100%; } }.trends-page-table__header-col { line-height: 1.2em; } .trends-page-table__header-col_author-photo { width: 8%; } .trends-page-table__header-col_author-name { width: 12%; } .trends-page-table__header-col_assets-count { width: 8%; } .trends-page-table__header-col_max-sale { width: 8%; } .trends-page-table__header-col_avg-sales-all-time { width: 8%; } .trends-page-table__header-col_avg-sales { width: 8%; } .trends-page-table__header-col_rate { width: 8%; } .trends-page-table__header-col_estimate { width: 8%; } .trends-page-table__header-col_liquidity { width: 8%; } .trends-page-table__header-col_market-trend { width: 8%; } .trends-page-table__header-col_follow { width: 16%; } .trends-page-table__header-col-content { text-align: inherit; } .trends-page-table__header-col-content-title { text-align: center; }.ciq-spinner { transition: all 0.2s ease-in-out; animation: rotating 2s linear infinite; font-size: 15px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-lists-table-row { cursor: pointer; animation: fadeIn 0.5s ease-out; font-size: 14px; line-height: 1.2em; } .trends-lists-table-row__button { width: 30px; height: 30px; color: #c8d0d8; } .trends-lists-table-row__button:hover { color: #6e767e; } .trends-lists-table-row__button_active, .trends-lists-table-row__button_active:hover { color: #000000; } .trends-lists-table-row__icon { font-size: 18px; } .trends-lists-table-row__action { width: 100%; padding: 10px 15px; transition: 0.2s ease; -moz-text-align-last: left; text-align-last: left; white-space: nowrap; text-decoration: none; color: #000; font-size: 14px; } .trends-lists-table-row__action_loading { -moz-text-align-last: center; text-align-last: center; } .trends-lists-table-row__action:hover { background-color: #f3f4f5; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-lists-mobile-table-row { display: flex; margin-bottom: 12px; padding: 10px; cursor: pointer; color: inherit; border: 1px solid #c8d0d8; border-radius: 3px; box-shadow: 0px 0px 8px 2px rgba(206, 206, 206, 0.5); } @media only screen and (max-width: 500px) { .trends-lists-mobile-table-row { flex-direction: column; } } .trends-lists-mobile-table-row__content-row { padding: 4px 0; } .trends-lists-mobile-table-row__content-row-title { padding-right: 10px; vertical-align: baseline; } .trends-lists-mobile-table-row__content-row-value { font-weight: bold; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-lists-table__header-col { line-height: 1.2em; } .trends-lists-table__header-col_empty { width: 8%; } .trends-lists-table__header-col_list-name { width: 12.5%; } .trends-lists-table__header-col_upcoming-works-in-list, .trends-lists-table__header-col_past-works-in-list { width: 7%; } .trends-lists-table__header-col_upcoming-total-estimates, .trends-lists-table__header-col_upcoming-avg-estimates, .trends-lists-table__header-col_past-total-sales, .trends-lists-table__header-col_past-avg-price { width: 9%; } .trends-lists-table__header-col_past-rate, .trends-lists-table__header-col_past-estimate { width: 9.5%; } .trends-lists-table__header-col_details { width: 7%; } .trends-lists-table__header-col-content { text-align: inherit; } .trends-lists-table__header-col-content-title { text-align: center; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .email-modal { max-width: 600px; } .email-modal__form { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; } .email-modal__content, .email-modal .scrollable-modal-content__content { max-height: 500px; } .email-modal__preview { margin-top: 15px; text-align: left; } .email-modal__preview pre { white-space: pre-wrap; } .email-modal__preview_label { margin-bottom: 10px; color: #6e767e; font-size: 16px; } .email-modal__preview-block { padding: 20px 15px; word-wrap: break-word; word-break: break-word; color: #969ea6; border: 1px solid #969ea6; line-height: 22px; } .email-modal .text-area-field:hover label { color: #333333; } .email-modal .text-area-field:hover textarea { border-bottom: 1px solid #333333; } .email-modal .text-area-field__container { position: relative; } .email-modal .text-area-field label { position: absolute; z-index: 1; top: 60%; width: 140px; transition: all 0.3s ease; transform: translateY(-50%); color: #6e767e; font-size: 16px; } .email-modal .text-area-field textarea { padding: 22px 0 0 0; border-bottom: 1px solid #969ea6; font-size: 16px; line-height: 22px; } .email-modal .text-area-field_active label, .email-modal .text-area-field_active:hover label { color: var(--primary-color); } .email-modal .text-area-field_active textarea, .email-modal .text-area-field_active:hover textarea { border-bottom: 1px solid var(--primary-color); } .email-modal .text-area-field_active label, .email-modal .text-area-field_touched label { top: 6px; transform: none; letter-spacing: 0.11px; font-size: 14px; font-weight: normal; line-height: 16px; } @media only screen and (max-width: 600px) { .email-modal .text-area-field_active label, .email-modal .text-area-field_touched label { padding: 0; } } .email-modal__footer { display: flex; justify-content: flex-end; padding: 30px; } @media only screen and (max-width: 600px) { .email-modal__footer { flex-shrink: 0; padding: 20px 30px 10px 30px; } } .email-modal__footer-submit-btn { margin-left: 30px; } .email-modal__footer-info-msg { letter-spacing: 0.15px; color: #6e767e; font-size: 15px; line-height: 20px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .create-pdf-modal { max-width: 600px; } .create-pdf-modal__form { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 100px; } .create-pdf-modal__field { width: 100%; } .create-pdf-modal__footer { display: flex; justify-content: flex-end; padding: 30px; } @media only screen and (max-width: 600px) { .create-pdf-modal__footer { flex-shrink: 0; padding: 20px 30px 10px 30px; } } .create-pdf-modal__footer-submit-btn { margin-left: 30px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-page { max-width: 1400px; margin: 0 auto; animation: fadeIn 1s ease-out; } .trends-page__header { padding-top: 70px; } .trends-page__header_with-banner { padding-top: 10px; } .trends-page__title { font-size: 28px; } .trends-page__divider { height: 2px; border: none; background-color: #c8d0d8; } .trends-page__search-container { padding: 30px 0; } .trends-page__mobile-filters-container { display: none; justify-content: flex-end; padding-bottom: 15px; } @media only screen and (max-width: 900px) { .trends-page__mobile-filters-container { display: flex; } } .trends-page__mobile-filters .mobile-table-sort__filters-container { max-width: 200px; } .trends-page__top-artist-section { padding-top: 20px; } @media only screen and (max-width: 768px) { .trends-page__top-artist-section { padding-top: 0; } } .trends-page__info-message { padding: 10px 0; } .trends-page__upgrade-link { color: var(--primary-color); } .trends-page__upgrade-link:hover { text-decoration: underline; } .trends-page__upgrade-link_mobile-app:hover { text-decoration: none; } .trends-page__top-artist-section .collapse-section__header-titles { width: 100%; }.trends-loader { padding-top: 20px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-asset-additional-info { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 20px; font-size: 14px; } .trends-asset-additional-info__column { width: 49%; } @media only screen and (max-width: 768px) { .trends-asset-additional-info__column { width: 100%; } } .trends-asset-additional-info__block { display: flex; padding-bottom: 35px; } @media only screen and (max-width: 768px) { .trends-asset-additional-info__block { flex-direction: column; width: 100%; } } .trends-asset-additional-info__block-caption { width: 100px; padding-bottom: 10px; font-weight: 600; } .trends-asset-additional-info__block-value { width: calc(100% - 100px); } .trends-asset-additional-info__block-item { padding-bottom: 10px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-asset-details { display: flex; justify-content: space-around; width: 100%; } @media only screen and (max-width: 768px) { .trends-asset-details { flex-direction: column; } } .trends-asset-details_blur { color: transparent; text-shadow: 0 0 8px #000; text-shadow: #000 0px 0px 10px 0.01em; } .trends-asset-details_blur .trends-asset-details__row-estimate { color: transparent; text-shadow: 0 0 8px #000; text-shadow: #000 0px 0px 10px 0.01em; } .trends-asset-details__estimate, .trends-asset-details__sale { display: flex; flex-direction: column; width: 50%; } @media only screen and (max-width: 768px) { .trends-asset-details__estimate, .trends-asset-details__sale { width: 100%; } } .trends-asset-details__subscribe-container { display: flex; align-items: baseline; gap: 5px; cursor: pointer; color: var(--primary-color); margin-top: 12px; } .trends-asset-details__add-to-collection { display: flex; cursor: pointer; color: var(--primary-color); align-items: baseline; gap: 5px; margin-top: 12px; } .trends-asset-details__estimate { font-weight: 600; } @media only screen and (max-width: 768px) { .trends-asset-details__estimate { padding-bottom: 40px; } } .trends-asset-details__sold-price-value { font-weight: 400; } .trends-asset-details__sold-price-value:first-child { padding-bottom: 10px; } .trends-asset-details__sold-price-value_bold { font-weight: 600; } .trends-asset-details__row-caption { width: 50%; font-size: 14px; font-weight: 600; } @media only screen and (max-width: 600px) { .trends-asset-details__row-caption { padding-bottom: 5px; } } .trends-asset-details__row-caption:not(:first-child) { padding-top: 20px; } .trends-asset-details__row-subtitle { color: #6e767e; font-size: 14px; font-weight: 400; padding-top: 10px; } .trends-asset-details__row-value { width: 90%; padding-top: 10px; font-size: 18px; } .trends-asset-details__guaranteed_properly_container { display: flex; align-items: center; margin-top: 20px; } .trends-asset-details__guaranteed_properly { font-size: 16px; font-weight: 100; margin-left: 5px; } .trends-asset-details__row-estimate { width: 90%; padding-top: 10px; color: var(--primary-color); font-size: 18px; } .trends-asset-details__auction-house-name { padding-top: 10px; font-size: 24px; font-weight: 400; } .trends-asset-details__auction-name { padding-top: 10px; font-size: 18px; } .trends-asset-details__lot-links { display: flex; gap: 30px; } .trends-asset-details__lot-n { padding-top: 10px; font-size: 18px; } .trends-asset-details__lot-n-link { padding-top: 10px; font-size: 18px; cursor: pointer; color: var(--primary-color); text-decoration: underline; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .sales-filters { font-size: 15px; } .sales-filters__main { display: flex; } @media only screen and (max-width: 1100px) { .sales-filters__main { flex-direction: column; } } .sales-filters__main-col { width: 50%; padding: 20px; padding-top: 0; } @media only screen and (max-width: 1100px) { .sales-filters__main-col { width: 100%; } } @media only screen and (max-width: 600px) { .sales-filters__main-col { padding: 20px 0; } } .sales-filters__row { display: flex; padding: 10px 0; } .sales-filters__row.grid { align-items: center; } .sales-filters__row > .flex.items-center { width: 100%; flex: 1; } .sales-filters__row_media { display: flex; flex-direction: column; gap: 10px; } @media only screen and (max-width: 600px) { .sales-filters__row_media { flex-direction: column; gap: 10px; } } .sales-filters__separated-row { display: flex; padding: 30px 0; } .sales-filters__col { flex-grow: 1; } .sales-filters__col_label { flex-grow: 0; flex-shrink: 0; width: 130px; } .sales-filters__search-input { width: 100%; } .sales-filters__range { width: 100%; } .sales-filters__range .range-picker__content { padding: 0; } .sales-filters__range .range-picker__text-input-container { flex-grow: 1; } .sales-filters__range .range-picker__to-label { padding: 0 10px; } @media only screen and (max-width: 600px) { .sales-filters__range .datepicker { height: inherit; } } .sales-filters__range .datepicker-input { width: 100%; border-bottom: 0; } .sales-filters__range_date { width: 100%; flex: 1; } .sales-filters__range_date > .grid { align-items: center; width: 100%; } .sales-filters__range_date > .grid > div[class*=col-span-10], .sales-filters__range_date > .grid > div[class*="sm:col-span-10"] { width: 100%; max-width: 100%; } .sales-filters__range_date .forms-range-picker { width: 100%; flex: 1; } .sales-filters__range_date .forms-range-picker__input-wrapper { flex: 1; } .sales-filters__range_date .forms-datepicker { width: 100%; flex: 1; } @media only screen and (max-width: 600px) { .sales-filters__range_date .range-picker__content { align-items: flex-start; flex-direction: column; } .sales-filters__range_date .range-picker__text-input-container_first, .sales-filters__range_date .range-picker__text-input-container_second { width: 100%; margin: 0; } .sales-filters__range_date .range-picker__to-label { padding: 10px; } .sales-filters__checkbox, .sales-filters .mediums-checkbox-group__checkbox { width: 100%; } } .sales-filters__checkbox .checkbox, .sales-filters .mediums-checkbox-group__checkbox .checkbox { width: 100%; } .sales-filters__checkbox .checkbox__icon-container, .sales-filters .mediums-checkbox-group__checkbox .checkbox__icon-container { border-color: var(--primary-color); } .sales-filters__checkbox .checkbox__icon-container_active, .sales-filters .mediums-checkbox-group__checkbox .checkbox__icon-container_active { border-color: var(--primary-color); background-color: var(--primary-color); } .sales-filters__checkbox .checkbox__label, .sales-filters .mediums-checkbox-group__checkbox .checkbox__label { margin-left: 15px; padding-right: 5px; font-size: inherit; } .sales-filters .mediums-checkbox-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 20px; column-gap: 20px; row-gap: 8px; align-items: start; } .sales-filters .mediums-checkbox-group__items { display: contents; } .sales-filters .mediums-checkbox-group__checkbox { align-self: start; width: 100%; } .sales-filters .mediums-checkbox-group__checkbox_tooltipped { width: auto; } .sales-filters .mediums-checkbox-group__checkbox_tooltipped .forms-checkbox { width: auto; display: flex; align-items: center; } .sales-filters .mediums-checkbox-group__checkbox-with-tooltip { display: inline-flex; justify-content: start; align-items: center; font-size: inherit; gap: 6px; width: -moz-fit-content; width: fit-content; } @media only screen and (max-width: 600px) { .sales-filters .mediums-checkbox-group__checkbox-with-tooltip { width: 100%; } } .sales-filters .mediums-checkbox-group__checkbox-with-tooltip .checkbox__label { margin-left: 15px; padding-right: 5px; font-size: inherit; word-wrap: break-word; } .sales-filters .mediums-checkbox-group__checkbox-with-tooltip_tooltipped { max-width: 100%; } .sales-filters .mediums-checkbox-group__tooltip-wrapper { display: flex; align-items: center; flex-shrink: 0; margin-left: 2px; line-height: 1; } @media only screen and (max-width: 600px) { .sales-filters .mediums-checkbox-group { grid-template-columns: 1fr; row-gap: 10px; } } .sales-filters__btns { display: flex; justify-content: flex-end; } .sales-filters__btn { min-width: 110px; } .sales-filters__btn_offset_right { margin-right: 15px; } .sales-filters__btn_save { margin-left: 20px; } .sales-filters__dropdown { margin-bottom: 15px; gap: 15px; } .sales-filters__dropdown_units { width: 100%; } .sales-filters__dropdown_units > .grid { align-items: center; } .sales-filters__dropdown_units > .grid > div[class*=col-span-10], .sales-filters__dropdown_units > .grid > div[class*="sm:col-span-10"] { width: 100%; } .sales-filters__dropdown_units .forms-select { width: 100%; } .sales-filters .font-sm .search-input__field { font-size: 12px; } .auction-houses__search { width: 100%; } .sales-filters__sale-date-tooltip { max-width: 200px; width: 100%; white-space: normal; word-break: normal; text-align: center; }.truncate-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .truncate-text--lines-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis; } .truncate-text--lines-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis; }.auto-size-image { width: 100%; height: 100%; } .auto-size-image__image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .sale-card { padding: 20px; font-size: 14px; } .sale-card:hover { cursor: pointer; transition: 0.2s ease-in; background-color: #f3f4f5; } .sale-card__image { display: flex; align-items: center; justify-content: center; height: 200px; } .sale-card__content { padding: 30px 0; } .sale-card__line { line-height: 1rem; } .sale-card__line_bold { font-weight: bold; } .sale-card__line_offset_bottom { margin-bottom: 1rem; } .sale-card__line_style_italic { font-style: italic; } .sale-card__line_height_two-lines { overflow: hidden; height: 2rem; } .sale-card__line_dots { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sale-card__author { height: 3.2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: bold; line-height: 1.5rem; } .sale-card__name { margin-bottom: 1rem; font-weight: bold; line-height: 1rem; } .sale-card__estimation { min-height: 4rem; margin-bottom: 1rem; } .sale-card__pricing { margin-bottom: 1rem; } .sale-card__pricing-price { min-height: 2rem; } .sale-card__pricing-price_no-value { min-height: 3rem; } .sale-card__estimate-percent { min-height: 1rem; color: var(--primary-color); font-weight: bold; } .sale-card__empty-line { height: 1rem; } .sale-card__comparable-label { margin-bottom: 1rem; text-decoration: underline; color: var(--primary-color); font-weight: bold; line-height: 1rem; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .select-hoc { position: relative; border: 2px solid transparent; box-sizing: border-box; transition: all 0.5s ease; } .select-hoc:hover { border: 2px solid #afafaf; transform: scale(1.03); z-index: 1; background-color: #fff; } .select-hoc:hover .select-hoc__checkbox { opacity: 1; } .select-hoc:hover .select-hoc__button { opacity: 1; } .select-hoc:hover .select-hoc__children-container { transition: all 0.5s ease; filter: blur(1px); } .select-hoc_selected { background-color: #f3f4f5; } .select-hoc_selected .select-hoc__checkbox { opacity: 1; } .select-hoc__checkbox { opacity: 0; transition: all 0.2s ease; cursor: pointer; color: transparent; box-sizing: border-box; width: 25px; height: 24px; padding: 2px; border-radius: 3px; border: 2px solid var(--primary-color); background-color: #fff; } .select-hoc__checkbox_active { color: #fff; background-color: var(--primary-color); } .select-hoc__icon-container { position: absolute; top: 0; left: 0; padding: 10px; } .select-hoc:hover .select-hoc__checkbox { display: block; } .select-hoc__button { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40%; opacity: 0; transition: all 0.2s ease; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .sale-card { padding: 20px; font-size: 14px; } .sale-card:hover { cursor: pointer; transition: 0.2s ease-in; background-color: #f3f4f5; } .sale-card__image { height: 200px; background-position: 50%; background-size: cover; } .sale-card__content { padding: 30px 0; } .sale-card__line { line-height: 1rem; } .sale-card__line_offset_bottom { margin-bottom: 1rem; } .sale-card__line_height_two-lines { overflow: hidden; height: 2rem; } .sale-card__author { height: 3.2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: bold; line-height: 1.5rem; } .sale-card__name { margin-bottom: 1rem; font-weight: bold; line-height: 1rem; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-artist-sales-section { display: flex; flex-wrap: wrap; padding: 10px 0; } .trends-artist-sales-section__content-no-data-label { padding: 15px 15px; } .trends-artist-sales-section__card { width: 220px; } .trends-artist-sales-section__card_selectable:hover { cursor: auto; background-color: transparent; } .trends-artist-sales-section__partial-card { width: 220px; } .trends-artist-sales-section__show-more { width: 100%; margin-bottom: 30px; } .trends-artist-sales-section__link-to-plans { cursor: pointer; text-decoration: underline; color: var(--primary-color); } .trends-artist-sales-section__link-to-plans_mobile-app { cursor: auto; text-decoration: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-asset-comps__title { padding: 10px 0; border-bottom: 2px solid #c8d0d8; font-size: 1.3rem; } .trends-asset-comps__title-first { font-weight: bold; } .trends-asset-comps__title-logo { width: 120px; padding-right: 10px; } .trends-asset-comps__row { display: flex; font-weight: bold; } @media only screen and (max-width: 768px) { .trends-asset-comps__row { flex-direction: column; } } .trends-asset-comps__col { width: 50%; } @media only screen and (max-width: 768px) { .trends-asset-comps__col { width: 100%; } } .trends-asset-comps__col-caption { padding: 10px 0; font-size: 14px; } @media only screen and (max-width: 768px) { .trends-asset-comps__col-caption { padding-top: 20px; } } .trends-asset-comps__col-caption:nth-of-type(2) { padding-top: 20px; } .trends-asset-comps__col-value { color: var(--primary-color); }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .save-to-custom-list-modal { max-width: 550px; } .save-to-custom-list-modal__field { text-align: left; margin-top: 10px; } .save-to-custom-list-modal__field label { display: none; } .save-to-custom-list-modal__field input { font-size: 16px; color: #333333; } .save-to-custom-list-modal__field input::-moz-placeholder { color: #6e767e; } .save-to-custom-list-modal__field input::placeholder { color: #6e767e; } .save-to-custom-list-modal__field .autosuggest-input-form__invalid-label { padding-left: 0; } .save-to-custom-list-modal__form { height: 150px; } .save-to-custom-list-modal__content { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .save-to-custom-list-modal__content .scrollable-modal-content__content { max-height: 150px; height: 100%; }.asset-selected-items-footer__item_bold { font-weight: bold; } .asset-selected-items-footer__loaddable-link .selected-items-footer__item-content:hover { cursor: default; border-color: transparent; } .asset-selected-items-footer__loaddable-link-spinner { margin-right: 10px; padding: 0; transition: all 0.2s ease-in-out; animation: rotating 2s linear infinite; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-asset { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0 30px; text-align: left; font-weight: normal; } .trends-asset__header-container { position: sticky; z-index: 1; top: 0px; display: flex; justify-content: space-between; margin-bottom: 20px; padding: 10px 5px 10px; border-bottom: 2px solid #c8d0d8; background-color: #fff; } @media only screen and (max-width: 768px) { .trends-asset__header-container { flex-direction: column; } } .trends-asset__details-overflow { padding: 5px; } .trends-asset__comps-overflow { margin-top: 20px; padding-bottom: 20px; } .trends-asset__header-info { display: flex; flex-flow: column; justify-content: space-between; } .trends-asset__header-actions { display: flex; flex-direction: column; justify-content: flex-end; min-width: 120px; } @media only screen and (max-width: 768px) { .trends-asset__header-actions { flex-direction: row; justify-content: space-around; } } .trends-asset__header { display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 992px) { .trends-asset__header { align-items: flex-start; flex-direction: column; } } .trends-asset__header-dimensions { padding-right: 40px; } .trends-asset__asset-name { padding-right: 40px; font-size: 24px; font-weight: bold; font-style: italic; line-height: 32px; } .trends-asset__header-caption { display: flex; align-items: center; flex-wrap: wrap; } @media only screen and (max-width: 992px) { .trends-asset__header-caption { align-items: flex-start; flex-direction: column; } } .trends-asset__header-caption__asset-not-reviewed-tooltip_wrapper { margin-left: 10px; font-size: 14px; line-height: normal; vertical-align: top; } .trends-asset__header-caption__asset-not-reviewed-tooltip { font-size: 12px; line-height: normal; font-weight: normal; font-style: normal; } .trends-asset__author-name { font-size: 24px; } @media only screen and (max-width: 992px) { .trends-asset__author-name { padding: 20px 0; padding-left: 0; } } .trends-asset__asset-creation-date { font-weight: 400; font-style: normal; } .trends-asset__actions-item { display: flex; margin-bottom: 5px; padding: 3px 0 3px 3px; align-items: center; cursor: pointer; border-bottom: 2px solid #fff; } .trends-asset__actions-item:hover { border-color: black; } .trends-asset__actions-item_loading { cursor: default; } .trends-asset__actions-item_loading:hover { border-color: transparent; } .trends-asset__actions-item-icon { width: 25px; } .trends-asset__actions-item-loading-icon { font-size: 14px; } .trends-asset__mail-to { display: flex; flex-direction: column; font-size: 14px; font-weight: normal; } @media only screen and (max-width: 992px) { .trends-asset__mail-to { margin-top: 5px; } } @media only screen and (max-width: 768px) { .trends-asset__mail-to { flex-direction: row; justify-content: space-around; width: 100%; } } .trends-asset__chat-icon { margin-right: 10px; font-size: 20px; } .trends-asset__main-info { display: flex; padding: 0 5px 15px 5px; } @media only screen and (max-width: 992px) { .trends-asset__main-info { align-items: flex-start; flex-direction: column; } } @media only screen and (max-width: 600px) { .trends-asset__main-info { padding: 0 0 15px 0; } } .trends-asset__main-info-image { margin-right: 70px; } @media only screen and (max-width: 600px) { .trends-asset__main-info-image { margin-right: 0; } } .trends-asset__details { flex-grow: 1; padding-left: 10px; } @media only screen and (max-width: 992px) { .trends-asset__details { width: 100%; padding: 50px 0 0 0; } } .trends-asset__details-comps { padding-top: 20px; } .trends-asset__details-comps_blur { color: transparent; text-shadow: 0 0 8px #000; text-shadow: #000 0px 0px 10px 0.01em; } .trends-asset__details-comps_blur .trends-asset-comps__col-value { color: transparent; text-shadow: 0 0 8px #000; text-shadow: #000 0px 0px 10px 0.01em; } .trends-asset__details-comps_blur .trends-asset-comps__title-logo { opacity: 0.2; } .trends-asset__additional-info { padding-top: 20px; } .trends-asset__collapse-label { display: inline-block; width: 200px; padding-left: 20px; font-size: 18px; font-weight: bold; } @media only screen and (max-width: 992px) { .trends-asset__collapse-label { padding-left: 0; } } @media only screen and (max-width: 600px) { .trends-asset__similar-works .collapse-section__header { flex-direction: column; } .trends-asset__similar-works .collapse-section__header-titles { display: flex; align-items: baseline; justify-content: space-between; width: 100%; } .trends-asset__similar-works .collapse-section__header-action { width: 100%; padding-top: 10px; } } .trends-asset__sort-dropdown { font-size: 14px; } .trends-asset__sort-dropdown-items-container { top: 20px; right: 20px; } .trends-asset__sort-dropdown-items-container .mobile-table-sort__corner { display: none; } .trends-asset__sort-label { margin-right: 20px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .trends-asset__sort-label-corner-down { padding-left: 10px; vertical-align: text-top; }.trends-asset-page { padding-top: 50px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-artist-statictic-dimension { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 15px; } .trends-artist-statictic-dimension__title { color: #6e767e; font-weight: bold; line-height: 16px; } .trends-artist-statictic-dimension__val { padding-top: 10px; font-size: 24px; font-weight: bold; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trend-artist-detail__header { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; min-height: 52px; padding: 0 20px 10px 20px; border-bottom: 2px solid #c8d0d8; } @media only screen and (max-width: 768px) { .trend-artist-detail__header { align-items: flex-start; flex-direction: column; } .trend-artist-detail__header-caption { margin: 15px 0; } } .trend-artist-detail__title { display: inline; padding-right: 20px; font-size: 26px; } .trend-artist-detail__subtitle { color: #6e767e; font-size: 16px; } @media only screen and (max-width: 500px) { .trend-artist-detail__subtitle { display: inline-block; margin-top: 10px; } } .trend-artist-detail__mail-to { font-size: 14px; font-weight: normal; } @media only screen and (max-width: 768px) { .trend-artist-detail__mail-to { margin-top: 10px; } } .trend-artist-detail__chat-icon { margin-right: 10px; font-size: 18px; } .trend-artist-detail__statictics { padding: 30px 20px 30px 0; font-size: 14px; } @media only screen and (max-width: 768px) { .trend-artist-detail__statictics { display: flex; flex-direction: column; } } .trend-artist-detail__statictics-photo-container { display: inline-block; margin-left: 20px; vertical-align: middle; } .trend-artist-detail__statictics-photo { width: 100px; height: 100px; border-radius: 50%; background-position: 50%; background-size: cover; filter: grayscale(100%); } .trend-artist-detail__statictics-section { display: inline-block; padding: 10px 0 10px 25px; vertical-align: middle; } .trend-artist-detail__statictics-date { text-transform: uppercase; color: #6e767e; line-height: 26px; } .trend-artist-detail__statictics-dimensions { display: flex; border-top: 2px solid #c8d0d8; } @media only screen and (max-width: 768px) { .trend-artist-detail__statictics-dimensions { flex-direction: column; } } .trend-artist-detail .trend-artist-detail__statictics-dimension { position: relative; } @media only screen and (max-width: 768px) { .trend-artist-detail .trend-artist-detail__statictics-dimension { flex-direction: row; justify-content: normal; padding: 0; padding-top: 15px; } } @media only screen and (max-width: 600px) { .trend-artist-detail .trend-artist-detail__statictics-dimension { justify-content: space-between; } } .trend-artist-detail .trend-artist-detail__statictics-dimension:first-child { padding-left: 0; } @media only screen and (max-width: 768px) { .trend-artist-detail .trend-artist-detail__statictics-dimension-title { width: 170px; } .trend-artist-detail .trend-artist-detail__statictics-dimension-val { align-self: center; padding: 0; } } .trend-artist-detail__statictics-dimension-tooltip-wrapper { text-align: inherit; } .trend-artist-detail__statictics-dimension-tooltip { text-align: center; } .trend-artist-detail__statictics-dimension-icon { color: #c8d0d8; } .trend-artist-detail__hidden-content { position: absolute; z-index: 1; bottom: 10px; width: 200%; cursor: pointer; text-decoration: underline; color: var(--primary-color); font-size: 15px; } @media only screen and (max-width: 768px) { .trend-artist-detail__hidden-content { top: 20px; left: 170px; width: 40%; } } @media only screen and (max-width: 600px) { .trend-artist-detail__hidden-content { right: 0; left: auto; justify-content: space-between; text-align: right; } } .trend-artist-detail__hidden-content_mobile-app { cursor: auto; text-decoration: none; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .trends-artist { max-width: 1400px; margin: 0 auto; padding-top: 30px; animation: fadeIn 1s ease-out; } .trends-artist__breadcrumbs { padding-left: 20px; } .trends-artist_appear { animation: fadeIn 1s ease-out; } .trends-artist__loading-container { padding-top: 20px; } @media only screen and (max-width: 1030px) { .trends-artist__sale-section .collapse-section__header { flex-direction: column; } .trends-artist__sale-section .collapse-section__header-titles { display: flex; align-items: baseline; justify-content: space-between; width: 100%; } .trends-artist__sale-section .collapse-section__header-action { width: 100%; padding-top: 10px; } } .trends-artist__section-title { display: inline-block; width: 200px; padding-left: 20px; font-size: 18px; font-weight: bold; } .trends-artist__sale-section-stats { padding-left: 20px; color: #6e767e; font-size: 14px; } @media only screen and (max-width: 1030px) { .trends-artist__sale-section-stats { width: 100%; padding-top: 10px; padding-left: 0; text-align: center; } } .trends-artist__sale-section-stats-line { padding-right: 15px; } @media only screen and (max-width: 600px) { .trends-artist__sale-section-stats-line:last-child { display: inline-block; width: 100%; padding-top: 5px; } } .trends-artist__sort-dropdown { font-size: 14px; } .trends-artist__sort-dropdown-items-container { top: 20px; right: 20px; } .trends-artist__sort-dropdown-items-container .mobile-table-sort__corner { display: none; } .trends-artist__sort-label { margin-right: 20px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .trends-artist__sort-label-corner-down { padding-left: 10px; vertical-align: text-top; } .trends-artist__dropdown-update-link { min-width: 300px; margin-left: 10%; cursor: pointer; text-decoration: underline; color: var(--primary-color); font-size: 15px; } @media only screen and (max-width: 1030px) { .trends-artist__dropdown-update-link { width: 100%; min-width: 0; margin-left: 0; padding-top: 10px; text-align: center; } } .trends-artist__dropdown-update-link_mobile-app { cursor: auto; text-decoration: none; }.trends-artist-loader { padding-top: 20px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } @media only screen and (max-width: 768px) { .plan-info { width: 100%; } } .plan-info__title { font-weight: 600; font-size: 40px; line-height: 60px; } @media only screen and (max-width: 768px) { .plan-info__title { font-size: 30px; line-height: 40px; } } .plan-info__subtitle { margin-top: 5px; font-size: 48px; line-height: 68px; font-family: serif; } @media only screen and (max-width: 768px) { .plan-info__subtitle { font-size: 30px; line-height: 40px; } } .plan-info__content { font-size: 18px; } .plan-info__content-row { margin-top: 10px; } .plan-info__interval { text-transform: capitalize; } .plan-info__ancestor-info { padding: 10px 0; } .plan-info__ancestor-info span { margin-bottom: 10px; font-size: 22px; } .plan-info__action { padding: 15px 0; margin-bottom: 15px; } .plan-info__action_bordered { border-bottom: 1px solid #ccc; } .plan-info__button { display: block; padding: 0; margin-bottom: 5px; color: var(--primary-color); font-size: 18px; } .plan-info__button a { color: var(--primary-color); text-decoration: none; } .plan-info__button:hover { text-decoration: underline; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .amd-switch[data-state=checked] { background-color: var(--primary-color) !important; }.client-modal__form { padding: 30px 30px 0 30px; overflow: scroll; overflow-x: hidden; } .client-modal__form-tabs { margin-bottom: 16px; } .client-modal__form-tabs [data-slot=tabs-list] { background: rgba(96, 52, 212, 0.12); border: 1px solid rgba(96, 52, 212, 0.25); } .client-modal__form-tabs [data-slot=tabs-trigger] { color: #4b0082; transition: all 0.2s ease; } .client-modal__form-tabs [data-slot=tabs-trigger][data-state=active] { background: linear-gradient(135deg, #6034d4 0%, #7a4ff0 100%); color: #ffffff; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .auth-users-mobile-table-row { margin-bottom: 14px; border: 1px solid #e6edf7; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .auth-users-mobile-table-row:hover { border-color: #cfdbeb; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1); transform: translateY(-1px); } .auth-users-mobile-table-row__user-info { width: 100%; padding: 14px; } .auth-users-mobile-table-row__item { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #edf2f7; } @media only screen and (max-width: 992px) { .auth-users-mobile-table-row__item { grid-template-columns: 1fr; gap: 4px; } } .auth-users-mobile-table-row__item:last-of-type { border-bottom: none; } .auth-users-mobile-table-row__field-caption { color: #64748b; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .auth-users-mobile-table-row__value { color: #0f172a; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media only screen and (max-width: 992px) { .auth-users-mobile-table-row__value { white-space: normal; } } .auth-users-mobile-table-row__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } @media only screen and (max-width: 992px) { .auth-users-mobile-table-row__buttons { grid-template-columns: 1fr; } } .auth-users-mobile-table-row__button { min-height: 34px; border-radius: 10px; font-size: 12px; font-weight: 700; } .auth-users-mobile-table-row__badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .auth-users-mobile-table-row__badge_role { color: #0369a1; background: #ecfeff; border-color: #bae6fd; } .auth-users-mobile-table-row__badge_access { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; } .auth-users-mobile-table-row__date-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; font-size: 12px; font-weight: 600; white-space: nowrap; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .auth-users-table-row { font-size: 14px; background: #fff; } .auth-users-table-row td { min-width: 0; } .auth-users-table-row:hover { background: #f8fafc; } .auth-users-table-row__name-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; } .auth-users-table-row__name-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px; background: linear-gradient(135deg, #e0e7ff, #dbeafe); color: #1e293b; font-size: 12px; font-weight: 700; } .auth-users-table-row__name { font-weight: 600; color: #0f172a; display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; } .auth-users-table-row__email { display: block; width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; color: #334155; font-size: 13px; } .auth-users-table-row__date-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 9999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; font-size: 12px; white-space: normal; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .auth-users-table-row__muted { color: #94a3b8; } .auth-users-table-row__badge { display: inline-flex; text-align: center; align-items: center; padding: 5px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: normal; line-height: 1.25; border: 1px solid transparent; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .auth-users-table-row__badge_role { color: #075985; background: #ecfeff; border-color: #bae6fd; } .auth-users-table-row__badge_access { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; } .auth-users-table-row__actions-trigger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #dbe3ef; background: #fff; color: #334155; cursor: pointer; transition: all 0.2s ease; } .auth-users-table-row__actions-trigger:hover { background: #f8fafc; border-color: #c9d5e8; } .auth-users-table-row__actions-trigger:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.35); outline-offset: 2px; } .auth-users-table-row__actions-menu { min-width: 210px; padding: 6px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); z-index: 50; } .auth-users-table-row__actions-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: #0f172a; font-size: 13px; line-height: 1.1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; } .auth-users-table-row__actions-item[data-highlighted] { background: #f1f5f9; } .auth-users-table-row__actions-item[data-disabled] { opacity: 0.45; pointer-events: none; } .auth-users-table-row__actions-item_danger { color: #dc2626; } .auth-users-table-row__actions-separator { height: 1px; margin: 4px 0; background: #e5e7eb; } .auth-users-table-row__spinner { animation: rotating 2s linear infinite; } @media (max-width: 1280px) { .auth-users-table-row__name-wrap { gap: 8px; } .auth-users-table-row__name-avatar { width: 26px; height: 26px; font-size: 11px; } .auth-users-table-row__date-chip, .auth-users-table-row__badge { padding: 4px 8px; font-size: 11px; } }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .auth-users-page { padding-top: 40px; max-width: 1400px; margin: 0 auto; } .auth-users-page__title { text-align: center; font-size: 32px; font-weight: bold; } .auth-users-page__add-btn { margin-right: 70px; } @media only screen and (max-width: 768px) { .auth-users-page__add-btn { margin-right: 0; } } .auth-users-page__action-bar { display: flex; align-items: center; padding: 30px 0 20px 0; } @media only screen and (max-width: 768px) { .auth-users-page__action-bar { flex-direction: column-reverse; justify-content: center; } } .auth-users-page__action-bar-col { display: flex; } @media only screen and (max-width: 768px) { .auth-users-page__action-bar-col { justify-content: flex-end; width: 100%; max-width: 100%; } } .auth-users-page__action-bar-col_grow { flex-grow: 1; } .auth-users-page__mobile-filters { padding-left: 20px; } @media only screen and (min-width: 900px) { .auth-users-page__mobile-filters { display: none; } } .auth-users-page__mobile-filters .mobile-table-sort__icon-container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 5px 0; } .auth-users-page__search { max-width: 400px; width: 100%; } @media only screen and (max-width: 768px) { .auth-users-page__search { width: 100%; max-width: 100%; margin: 30px 0 15px; } } .auth-users-page__search .search-input__field { font-family: inherit; } .auth-users-page__table-header-col { color: #6b7280; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .auth-users-page__table-header-col_name { width: 23%; } .auth-users-page__table-header-col_email { width: 24%; } .auth-users-page__table-header-col_account-type { width: 10%; } .auth-users-page__table-header-col_last-login { width: 14%; } .auth-users-page__table-header-col_edit-btn { width: 5%; } .auth-users-page__table-header-col_delete-btn { width: 5%; } .auth-users-page__table-header-col_access { width: 14%; } .auth-users-page__table-header-col_access-level { width: 15%; } .auth-users-page__table-header-col_actions { width: 6%; } .auth-users-page__table .table { table-layout: fixed; width: 100%; } .auth-users-page__table .table-row-cell { height: auto; padding-top: 12px; padding-bottom: 12px; vertical-align: top; min-width: 0; overflow: hidden; } .auth-users-block { flex-grow: 2; min-width: 50%; } .auth-users-block__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .auth-users-block__header-title { display: inline-flex; align-items: center; gap: 10px; } .auth-users-block__title { position: relative; margin: 0; padding-left: 14px; color: #0f172a; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .auth-users-block__title::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 6px; width: 4px; border-radius: 9999px; background: linear-gradient(180deg, #4f46e5, #06b6d4); } .auth-users-block__table-wrap { width: 100%; } .auth-users-block__add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #dbe3ef; border-radius: 10px; background: #ffffff; color: #0f172a; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .auth-users-block__add-btn:hover { background: #f8fafc; border-color: #c7d4e7; transform: translateY(-1px); } .auth-users-block__add-btn:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.35); outline-offset: 2px; } .auth-users-card { border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } .auth-users-card .desktop-paginated-table { border: 1px solid #edf0f6; border-radius: 12px; overflow: hidden; } .auth-users-card .table.table_header_sticky th { background-color: #f8fafc; } .auth-users-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; padding: 28px 16px; border: 1px dashed #d6deec; border-radius: 12px; background: linear-gradient(180deg, #fbfcff 0%, #f8fafd 100%); text-align: center; } .auth-users-empty-state__icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; } .auth-users-empty-state__title { color: #0f172a; font-size: 18px; font-weight: 700; line-height: 1.2; } .auth-users-empty-state__description { max-width: 420px; color: #64748b; font-size: 14px; line-height: 1.4; } .auth-users-empty-state__action { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #c7d4e7; border-radius: 10px; background: #ffffff; color: #0f172a; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .auth-users-empty-state__action:hover { background: #f8fafc; transform: translateY(-1px); } @media (max-width: 1280px) { .auth-users-block__title { font-size: 30px; } .auth-users-page__table-header-col { font-size: 10px; } .auth-users-page__table-header-col_name { width: 20%; } .auth-users-page__table-header-col_email { width: 22%; } .auth-users-page__table-header-col_last-login { width: 17%; } .auth-users-page__table-header-col_access { width: 15%; } .auth-users-page__table-header-col_access-level { width: 18%; } .auth-users-page__table-header-col_actions { width: 8%; } }.label-with-info-tooltip { margin-left: 3px; }.input-file { display: none; } .input-file-preview { border: 1px solid gainsboro; border-radius: 5px; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .card { border: 1px gainsboro solid; border-radius: 10px; padding: 20px; } .settings__column-link, .settings__column-button { display: block; margin-bottom: 5px; padding: 0; color: var(--primary-color); font-size: 18px; } .settings__column-link:hover, .settings__column-button:hover { text-decoration: underline; } .settings { margin: 0 auto; padding: 50px 0 100px; } .settings__bordered { border-bottom: 1px solid #ccc; margin-bottom: 5px; } .settings__title { padding: 45px 0; font-size: 53px; font-weight: 600; } @media only screen and (max-width: 992px) { .settings__title { padding: 25px 0; font-size: 36px; } } .settings__content { display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px; } @media only screen and (max-width: 992px) { .settings__content { flex-flow: column; } } .settings__whitelabel__container { margin-top: 15px; margin-bottom: 15px; width: 330px; } .settings__whitelabel__column { display: flex; flex-direction: column; margin-top: 15px; padding-right: 10px; } .settings__whitelabel__row { display: flex; flex-direction: row; justify-content: space-between; margin-top: 25px; padding-right: 10px; } .settings__whitelabel__save-button-container { margin-top: 25px; display: flex; justify-content: right; margin-right: 22px; } .settings__whitelabel__color-input { font-size: 15px; width: 65px; height: 27px; border: 1px solid gainsboro; border-radius: 5px; } @media only screen and (max-width: 992px) { .settings__column { width: 100%; } .settings__column:first-child { margin-bottom: 30px; } } .settings__column p { margin-top: 10px; word-break: break-word; font-size: 18px; } .settings__column-title { font-size: 40px; font-weight: 600; line-height: 60px; } @media only screen and (max-width: 992px) { .settings__column-title { font-size: 30px; line-height: 40px; } } .settings__column-subtitle { margin-top: 5px; font-family: serif; font-size: 48px; line-height: 68px; } @media only screen and (max-width: 992px) { .settings__column-subtitle { font-size: 30px; line-height: 40px; } } .settings__column-action { padding: 15px 0; } .settings__currency-dropdown-container { max-width: 250px; padding: 10px 0; } .settings__currency-dropdown { padding-bottom: 20px; } .settings__column-button { text-align: left; } .settings__column-button a { text-decoration: none; color: var(--primary-color); } .settings__column-link { text-decoration: none; } .settings-form { max-width: 1400px; margin: 0 auto; padding: 30px; font-family: HelveticaNeue, Hind, serif; } @media only screen and (max-width: 992px) { .settings-form { padding: 30px 0; } } .settings-form__input { margin-bottom: 10px; } .settings-form__password-description { font-size: 12px; } .settings-form__password-meter { margin-bottom: 10px; } .settings-form__change-password { padding: 20px 0 10px 0; letter-spacing: 2.77px; font-size: 12px; font-weight: 500; } .settings-form__submit { min-width: 127px; margin-top: 30px; } .settings-form__server-error { display: flex; align-items: center; justify-content: flex-start; width: 100%; max-height: 0px; margin-bottom: 0px; transition-duration: 0.3s; opacity: 0; color: #fff; border-radius: 3px; background-color: #ff5368; font-style: 12px; } .settings-form__server-error_visible { max-height: 100px; margin-bottom: 30px; padding: 15px; opacity: 1; } .settings-form__footer-container { position: sticky; bottom: 0; } .settings-form__footer { display: flex; justify-content: flex-end; padding: 10px 0; background-color: #fff; }.personal-info { margin: 0 auto; padding-top: 50px; max-width: 600px; } .personal-info__breadcrumbs { margin-bottom: 30px; } .text-field__label { min-width: 120px; } .radix-select-field { gap: 0; } .radix-select-field__label { min-width: 135px; justify-content: flex-start; }:root { --primary-color-default: #6034d4; --primary-color: #6034d4; --primary-color-light: #6034D44D; --primary-color-light-default: #6034D44D; --primary-color-lightest: #6034D40D; --primary-color-lightest-default: #6034D40D; --primary-color-dark: #4d2aaa; /* static fallback for browsers without color-mix */ } @supports (color: color-mix(in srgb, red, black 20%)) { :root { --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%); } } .PhoneInputForm { position: relative; box-sizing: border-box; font: inherit; min-height: 35px; justify-content: space-between; display: flex; flex-grow: 1; height: 100%; align-items: center; padding: 0 10px; } @media only screen and (max-width: 600px) { .PhoneInputForm { width: 100%; height: 35px; padding: 0 5px; } } .PhoneInputForm.valid .PhoneInputInput { border: 2px solid rgb(180, 201, 180); background-color: #f5faf3; } .PhoneInputForm.valid .PhoneInputInput:focus { border: 2px solid rgb(35, 180, 33); background-color: #f1f9ef; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(35, 180, 33, 0.6); } .PhoneInputInput { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 0 10px; margin-left: 10px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; color: black; border: 2px solid rgb(187, 102, 102); border-radius: 2px; background-color: rgb(243, 234, 234); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); font-family: HelveticaNeue, Hind, serif; font-size: 16px; font-weight: 500; line-height: 1.42857143; } .PhoneInputInput::-moz-placeholder { color: #4a4a4a; } .PhoneInputInput::placeholder { color: #4a4a4a; } .PhoneInputInput:focus::-moz-placeholder { color: #ff2652; } .PhoneInputInput:focus::placeholder { color: #ff2652; } .PhoneInputInput:focus { border: 2px solid #ff2652; outline: 0; background-color: #f9eff1; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 38, 82, 0.6); } .PhoneInputInput input[type=number]::-webkit-inner-spin-button, .PhoneInputInput input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .PhoneInputCountrySelect { box-sizing: border-box; width: 100%; border: 1px solid #c8d0d8; border-radius: 3px; background-color: #fff; box-shadow: 4px 4px 6px 0 rgba(0, 24, 55, 0.06); } .PhoneInputCountry { position: relative; align-self: stretch; display: flex; align-items: center; margin-right: var(--PhoneInputCountrySelect-marginRight); }.two-factor-authentication { margin: 0 auto; padding-top: 50px; max-width: 600px; } .two-factor-authentication__breadcrumbs { margin-bottom: 30px; } .two-factor-authentication__form-item:last-child { margin-top: 20px; } .two-factor-authentication__qrcode { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .two-factor-authentication__qrcode-title { font-size: 20px; margin-bottom: 10px; } .two-factor-authentication__secret { display: flex; flex-direction: row; justify-content: space-around; align-items: center; cursor: pointer; } .two-factor-authentication__secret-code { margin: 0 8px; padding: 8px; background-color: rgb(0, 0, 0); border-radius: 5px; color: white; } .two-factor-authentication__verification { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }.two-factor-authentication-verification-form__item-title { margin: 10px; line-height: 1.6; }/* CSS variables. */ :root { --PhoneInput-color--focus: #03b2cb; --PhoneInputInternationalIconPhone-opacity: 0.8; --PhoneInputInternationalIconGlobe-opacity: 0.65; --PhoneInputCountrySelect-marginRight: 0.35em; --PhoneInputCountrySelectArrow-width: 0.3em; --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight); --PhoneInputCountrySelectArrow-borderWidth: 1px; --PhoneInputCountrySelectArrow-opacity: 0.45; --PhoneInputCountrySelectArrow-color: currentColor; --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); --PhoneInputCountrySelectArrow-transform: rotate(45deg); --PhoneInputCountryFlag-aspectRatio: 1.5; --PhoneInputCountryFlag-height: 1em; --PhoneInputCountryFlag-borderWidth: 1px; --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5); --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1); } .PhoneInput { /* This is done to stretch the contents of this component. */ display: flex; align-items: center; } .PhoneInputInput { /* The phone number input stretches to fill all empty space */ flex: 1; /* The phone number input should shrink to make room for the extension input */ min-width: 0; } .PhoneInputCountryIcon { width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio)); height: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--square { width: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--border { /* Removed `background-color` because when an `` was still loading it would show a dark gray rectangle. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom. */ background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom, so an additional "inset" border is added. */ box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); } .PhoneInputCountryIconImg { /* Fixes weird vertical space above the flag icon. */ /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */ display: block; /* 3rd party flag icons won't stretch if they have `width` and `height`. Also, if an icon's aspect ratio was different, it wouldn't fit too. */ width: 100%; height: 100%; } .PhoneInputInternationalIconPhone { opacity: var(--PhoneInputInternationalIconPhone-opacity); } .PhoneInputInternationalIconGlobe { opacity: var(--PhoneInputInternationalIconGlobe-opacity); } /* Styling native country `