@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');

*, *:after, *:before {
    box-sizing: border-box;
}

:root {
    --base-unit: 4px;
    --first-color: #F1B072;
    --second-color: #ffffff;
    --border-color: #353535;
    --label-color: #7D7D7D;
    --white-color: #ffffff;
    --black-color: #000000;
    --background-color: #000000;
}

html {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
}

body {
    margin: 0;
    color: var(--white-color);
    background-color: var(--background-color);
}

.comparison {
    --media-size: 0;
    --xsmall-width: 160px;
    --small-width: 320px;
    --large-width: 640px;
    --scroll-width: calc(var(--base-unit) * 4);
    --max-width-media-column: calc(var(--large-width) + var(--scroll-width));

    display: grid;
    grid-template-areas: "chart detailed";
    grid-template-columns: minmax(var(--small-width), 50%) minmax(var(--max-width-media-column), 50%);
    width: 100%;
}

@media (max-width: 959px) {
    .comparison {
        grid-template-areas: "detailed" "chart";
        grid-template-columns: 100%;
        height: auto;
    }
}

.comparison__chart {
    grid-area: chart;
    display: flex;
    justify-content: center;
}

.comparison__detailed {
    grid-area: detailed;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media (max-width: 959px) {
    .comparison__detailed {
        height: auto;
    }
}

.radar {
    width: 100%;
    padding: calc(5 * var(--base-unit));
    display: flex;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 959px) {
    .radar {
        justify-content: center;
    }
}

.radar__svg {
    width: 100%;
    max-width: var(--large-width);
}

.radar__legend {
    display: flex;
    justify-content: space-around;
    margin: calc(5 * var(--base-unit));
    width: 100%;
}

.legend {

}

.legend__item {
    margin-right: calc(4 * var(--base-unit));
    display: flex;
    align-items: center;
    max-width: 50%;
}

.legend__item:last-child {
    margin-right: 0;
}

.legend__item:nth-child(1) .bullet {
    margin-left: auto;
    background-color: var(--first-color);
}

.legend__item:nth-child(2) .bullet {
    background-color: var(--second-color);
}

.bullet {
    width: calc(5 * var(--base-unit));
    height: calc(5 * var(--base-unit));
    border-radius: 50%;
}

@media (max-width: 655px) {
    .bullet {
        width: calc(4 * var(--base-unit));
        height: calc(4 * var(--base-unit));
    }
}

.bullet--with-margin {
    margin-right: calc(2 * var(--base-unit));
}

.bullet--embedded {
    flex-shrink: 0;
}

.detailed-column {
    width: calc(2 * var(--media-size));
}

.row {
    border-bottom: thin solid var(--border-color);
}

.row--hidden {
    display: none !important;
}

.color-row {
    display: flex;
    justify-content: space-around;
}

.color-row__first {
    background-color: var(--first-color);
}

.color-row__second {
    background-color: var(--second-color);
}

.color-panel {
    width: 100%;
    height: var(--base-unit);
}

.controls-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(2 * var(--base-unit));
}

.controls {
    display: flex;
    flex-direction: row;
}

.control {

}

.control:not(:last-child) {
    margin-right: var(--base-unit);
}

.control--active {
    background-color: var(--white-color) !important;
}

.control--active > svg {
    fill: var(--black-color);
}

.rows-section {
    display: none;
}

.rows-section--visible {
    display: block;
}

.table-row {
    display: flex;
    position: relative;
}

.table-row__content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.table-row__value {
    padding-top: calc(3 * var(--base-unit));
    padding-bottom: calc(3 * var(--base-unit));
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-row__value--with-scale {
    flex-grow: 1;
    width: 100%;
    height: 40px;
}

.table-row__scale {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-row__scale > svg, .table-row__scale > div {
    width: 100%;
}

.table-row__label {
    height: 100%;
    position: absolute;
    width: 100%;
    color: var(--label-color);
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

.table-row__label--with-scale {
    align-items: normal;
    padding-top: calc(3 * var(--base-unit));
    line-height: 1rem;
}

.media-row-wrapper {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.media-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.media-row__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--media-size);
    height: var(--media-size);
}

.media-row__item > img {
    height: 80%;
    width: 60%;
}

.media-row__label {
    padding: calc(2 * var(--base-unit)) 0;
    color: var(--label-color);
    font-size: 0.9rem;
}

.value {
    --relative-color-min: #FF4848;
    --relative-color-max: #42CD7A;
}

.value--for-long-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: calc(4 * var(--base-unit));
    padding-left: calc(4 * var(--base-unit));
}

.value--min {
    color: var(--relative-color-min);
}

.value--max {
    color: var(--relative-color-max);
}

/* SVG scale styles */
.metric-grade-svg text {
    text-anchor: middle;
}

.metric-grade-svg text.highlighted {
    opacity: 1;
    user-select: auto;
}

.metric-grade-svg .otk-grade-mark {
    font-size: 52px;
    text-shadow: 0 0 8px var(--black-color);
    fill: var(--white-color);
    text-anchor: middle;
    alignment-baseline: middle;
    opacity: 0.2;
    user-select: none;
    -moz-user-select: none;
    dominant-baseline: middle;
}

.metric-grade-svg .column {
    fill: #1e3695;
}

.metric-grade-svg .ftk-grade-mark {
    fill: var(--white-color);
    font-size: 36px;
    text-shadow: 0 0 12px var(--black-color);
    opacity: 0.2;
    text-anchor: middle;
}

.metric-grade-svg .ftk-grade-value {
    fill: #BDBDBD;
    font-size: 34px;
    text-shadow: 0 0 6px var(--black-color);
    text-anchor: middle;
}

.diamond-type-labels {
    --label-bg-color: #2F81FC;
    --photoreal-color: #3A65FF;

    display: flex;
    flex-direction: row;
}

.diamond-type-labels__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--base-unit);
    font-size: 0.7rem;
    padding: calc(var(--base-unit) / 2) var(--base-unit);
    height: calc(var(--base-unit) * 4);
}

@media (min-width: 656px) {
    .diamond-type-labels__item {
        font-size: 0.9rem;
        padding: calc(var(--base-unit) / 2) calc(var(--base-unit) * 2);
        height: calc(var(--base-unit) * 6);
    }
}

.diamond-type-labels__item--labgrown {
    color: var(--white-color);
    background-color: var(--label-bg-color);
    border: thin solid var(--label-bg-color);
}

.diamond-type-labels__item--photoreal {
    color: var(--white-color);
    background-color: var(--photoreal-color);
    border: thin solid var(--photoreal-color);
}

.diamond-type-labels__item--reference {
    color: var(--black-color);
    background-color: var(--white-color);
    border: thin solid var(--white-color);
}

.btn {
    --button-background-color: #353535;
    --button-hover-color: #4D4D4D;
    --button-disabled-color: #141414;
    --button-disabled-font-color: #4D4D4D;
    --button-active-color: #333333;
    --button-focus-color: #B2B2B2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-background-color);
    padding: calc(2 * var(--base-unit)) calc(4 * var(--base-unit));
    color: var(--white-color);
    font-size: 1rem;
    border: thin solid transparent;
    cursor: pointer;
    outline: none;
    border-radius: calc(var(--base-unit) / 2);
}

@media (hover: hover) {
    .btn:hover {
        box-shadow: 0 0 var(--base-unit) var(--white-color);
    }
}

.btn:disabled {
    background-color: var(--button-disabled-color);
    color: var(--button-disabled-font-color);
}

.btn:active {
    background-color: var(--button-active-color);
}

.btn:focus {
    box-shadow: 0 0 4px var(--button-focus-color);
    border-color: var(--black-color);
}

.btn--with-icon {
    padding: var(--base-unit) var(--base-unit);
}

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > * {
    border-radius: 0 !important;
    border-left: thin solid var(--black-color) !important;
    border-right: none !important;
}

.btn-group > *:first-child {
    border-radius: calc(var(--base-unit) / 2) 0 0 calc(var(--base-unit) / 2) !important;
    border-left: thin solid var(--button-background-color) !important;
}

.btn-group > *:last-child {
    border-radius: 0 calc(var(--base-unit) / 2) calc(var(--base-unit) / 2) 0 !important;
}

.label {
    font-size: 1.2rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 655px) {
    .label {
        font-size: 0.8rem;
    }
}

.label--hidden {
    display: none;
}

.player {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
}

.hide-on-small-screen {
    display: none;
}

.footer__custom {
    padding: 6px;
}

@media (min-width: 656px) {
    .hide-on-small-screen {
        display: flex;
    }
}

.munsellColorContainer {
    display: flex;
    gap: 5px;
    align-items: center;
}

.colorBox {
    width: 1em;
    height: 1em;
    border-radius: 14%;
}