.diffdisplay-flex-cell {
    margin: 10px;
}

/* Main Circle Shape Etc */
.circle {
    border-radius: 100%;
    position: relative;
    border: 4px solid var(--border);

}

.circle::before,
.circle::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.circle-spin {
    height: 200px;
    width: 200px;
}

.circle-amount {
  font-size: 80%;
  font-weight: 550;
}

/* Neutral Circle color */
.diffdisplay-circle-neutral::before,
.diffdisplay-circle-neutral::after {
    top: var(--circle-neg-size);
    left: var(--circle-neg-size);
}

.diffdisplay-circle-neutral::before {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-neutral::before {
    border-top-color: var(--border);
    border-right-color: var(--border);
    border-bottom-color: var(--border);
    /* transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;  */
}

.diffdisplay-circle-neutral::after {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-neutral::after {
    border-top: var(--circle-size) solid var(--border);
    border-left-width: var(--circle-size);
    border-right-width: var(--circle-size);
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

/* Bad Circle color */
.diffdisplay-circle-bad::before,
.diffdisplay-circle-bad::after {
    top: var(--circle-neg-size);
    left: var(--circle-neg-size);
}

.diffdisplay-circle-bad::before {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-bad::before {
    border-top-color: var(--slider-red);
    border-right-color: var(--slider-red);
    border-bottom-color: var(--slider-red);
    /* transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;  */
}

.diffdisplay-circle-bad::after {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-bad::after {
    border-top: var(--circle-size) solid var(--slider-red);
    border-left-width: var(--circle-size);
    border-right-width: var(--circle-size);
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

/* Good circle color */
.diffdisplay-circle-good::before,
.diffdisplay-circle-good::after {
    top: var(--circle-neg-size);
    left: var(--circle-neg-size);
}

.diffdisplay-circle-good::before {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-good::before {
    border-top-color: var(--fcaster-color-guages-green);
    border-right-color: var(--fcaster-color-guages-green);
    border-bottom-color: var(--fcaster-color-guages-green);
    /* transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;  */
}

.diffdisplay-circle-good::after {
    border: var(--circle-size) solid transparent;
}

.diffdisplay-circle-good::after {
    border-top: var(--circle-size) solid var(--fcaster-color-guages-green);
    border-left-width: var(--circle-size);
    border-right-width: var(--circle-size);
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

div.diffdisplay_circle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.diffdisplay-original,
.diffdisplay-new {
    font-size: 20px;
    color: var(--fcaster-grey-primary-font);
    margin: 6px;
}

.diffdisplay-title {
    font-size: 13px;
    padding: 10px;
    font-weight: 600;
    color: var(--fcaster-grey-primary-font);
    text-align: center;
}

.diffdisplay-lower-title {
    font-size: 12px;
    padding-top: 2px;
    font-weight: 600;
    color: var(--fcaster-grey-primary-font);
    text-align: center;
}

.diffdisplay-difference-color-bad {
    color: var(--slider-red) !important;
}

.diffdisplay-difference-color-good {
    color: var(--fcaster-color-guages-green) !important;
}


.diffdisplay-circle-sub-title {
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Media Queries */

@media only screen and (max-width: 1200px) {

  .diffdisplay-flex-cell {
    margin: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}