.resultPanelImage .conversational,
.resultPanelImage .Omni-channel {
    display: none !important;
}

/* Container for chart */
.chartContainer {
  display: block;
  margin-bottom: 1rem;
  padding-left: 0;
}

/* Donut block containing heading, legend and bar stacked vertically */
.donutBlock {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-left: 0;
}

.donutCanvasWrapper {
  width: 100%;
}

/* Heading styling */
.donutHeading {
  text-align: left;
  margin-bottom: 0.5rem;
  padding-left: 0;
}

.donutHeading h4 {
  margin: 0;
}

/* Legend container styling */
.donutLegend {
  display: block;
  margin: 0 0 0.75rem 0;
  padding-left: 0;
}

/* Legend list style */
.donutLegend ul.legendColor {
  display: flex;
  gap: 1.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
  justify-content: flex-start;
}

/* Legend items */
.donutLegend ul.legendColor li {
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

/* Legend color circle */
.donutLegend .legendBox {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-right: 0.6em;
  display: inline-block;
  vertical-align: middle;
}

/* Container for bar canvas and label */
.donutCanvasWrapper {
  position: relative;
  width: 80%;
  height: 40px;
  margin-top: 0;
  margin-left: 0;
}
/* Bar canvas styling */
#barStacked {
  width: 100% !important;
  height: 20px;
  display: block;
  margin: 0;
}

/* Label below the bar */
.barLabel {
  text-align: left;
  margin-top: 7px;
  font-weight: bold;
  font-size: 1.5rem;
  margin-left: 0;
}


.appContainer {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}
.appPanelDisplayResult {
    border-left: solid 1px #E0E0E0;
    width: 66.3333333337%;
}
.appPanelInputField {
    width: 33.3333333333%;
}
.appContainer .innerContainer {
    margin: 1rem 0;
}
.appContainer .appPanelDisplayResult .innerContainer {
    margin-left: 1rem;
}
.appContainer .appPanelInputField .innerContainer {
    margin-right: 1rem;
}
.resultPanelImage, .resultPanelImage img {
    position: relative;
}
.resultPanelImage span.imageHotspots {
    position: absolute;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    cursor: default;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    /*animation-name: hotspot1;
    background: #7E4AF2;
    box-shadow: 0 0 0 rgba(126, 74, 242, 0.4);*/
}
.resultPanelImage span.imageHotspots {
    z-index: 0;
    border: 2px solid #FFFFFF;
}
@keyframes hotspot1 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
        box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
        box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
        box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
    }
}
.resultPanelImage .always {
    background: #BA9EF8;
    box-shadow: 0 0 0 rgba(186, 158, 248, 0.4);
    animation-name: hotspot1;
}
@keyframes hotspot1 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(186, 158, 248, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(186, 158, 248, 0.6);
        box-shadow: 0 0 0 0 rgba(186, 158, 248, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(186, 158, 248, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(186, 158, 248, 0);
        box-shadow: 0 0 0 10px rgba(186, 158, 248, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(186, 158, 248, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(186, 158, 248, 0);
        box-shadow: 0 0 0 0 rgba(186, 158, 248, 0);
    }
}
.resultPanelImage .day1 {
    background: #6A6A6A;
    box-shadow: 0 0 0 rgba(106, 106, 106, 0.4);
    animation-name: hotspot2;
}
@keyframes hotspot2 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(106, 106, 106, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(106, 106, 106, 0.6);
        box-shadow: 0 0 0 0 rgba(106, 106, 106, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(106, 106, 106, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(106, 106, 106, 0);
        box-shadow: 0 0 0 10px rgba(106, 106, 106, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(106, 106, 106, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(106, 106, 106, 0);
        box-shadow: 0 0 0 0 rgba(106, 106, 106, 0);
    }
}
.resultPanelImage .digital {
    background: #5CC2BA;
    box-shadow: 0 0 0 rgba(92, 194, 186, 0.4);
    animation-name: hotspot3;
}
@keyframes hotspot3 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(92, 194, 186, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(92, 194, 186, 0.6);
        box-shadow: 0 0 0 0 rgba(92, 194, 186, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(92, 194, 186, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(92, 194, 186, 0);
        box-shadow: 0 0 0 10px rgba(92, 194, 186, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(92, 194, 186, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(92, 194, 186, 0);
        box-shadow: 0 0 0 0 rgba(92, 194, 186, 0);
    }
}
.resultPanelImage .conversational {
    background: #E24F72;
    box-shadow: 0 0 0 rgba(226, 79, 114, 0.4);
    animation-name: hotspot4;
}
@keyframes hotspot4 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(226, 79, 114, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(226, 79, 114, 0.6);
        box-shadow: 0 0 0 0 rgba(226, 79, 114, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(226, 79, 114, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(226, 79, 114, 0);
        box-shadow: 0 0 0 10px rgba(226, 79, 114, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(226, 79, 114, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(226, 79, 114, 0);
        box-shadow: 0 0 0 0 rgba(226, 79, 114, 0);
    }
}
.resultPanelImage .Omni-channel {
    background: #7E4AF2;
    box-shadow: 0 0 0 rgba(126, 74, 242, 0.4);
    animation-name: hotspot5;
}
@keyframes hotspot5 {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
        -webkit-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
        box-shadow: 0 0 0 0 rgba(126, 74, 242, 0.6);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
        -webkit-box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
        box-shadow: 0 0 0 10px rgba(126, 74, 242, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
        -webkit-box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
        box-shadow: 0 0 0 0 rgba(126, 74, 242, 0);
    }
}
.resultPanelImage #hotspot01 {
    left: 15%;
    top: 40%;
}
.resultPanelImage #hotspot02 {
    left: 25%;
    top: 1%;
}
.resultPanelImage #hotspot03 {
    left: 1%;
    top: 59%;
}
.resultPanelImage #hotspot04 {
    left: 69%;
    top: 86%;
}
.resultPanelImage #hotspot05 {
    left: 94%;
    top: 72%;
}
.resultPanelImage #hotspot06 {
    left: 71%;
    top: 57%;
}
.resultPanelImage #hotspot07 {
    left: 85%;
    top: 71%;
}
.tooltipInfoIcon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #e0e0e0;
    color: #0c0c0c;
    font-size: .65rem;
    border-radius: 50%;
    text-align: center;
    line-height: 1rem;
    margin-left: .3rem;
    cursor: default;
    position: relative;
    transition: visibility 0s, opacity 0.2s linear;
    font-style: normal;
}
#donutTooltip, .customTooltip {
    position: absolute;
    background: #242424;
    color: #fff;
    padding: 0.3rem 0.5rem;
    font-size: .75rem;
    line-height: 1.25rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    max-width: 250px;
    white-space: normal;
}
#donutTooltip {
    pointer-events: none;
}
#donutTooltip::after, .customTooltip::after {
    content: "";
    position: absolute;
    top: 12px;
    left: -12px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #242424 transparent transparent;
}
.appContainerInner #modal1,
.appContainerInner #modal2 {
    left: 0;
}
.disclaimerContainer {
    position: relative;
    display: block;
}
.disclaimerPopup {
    text-align: right;
}
.disclaimerModal {
    position: absolute;
    margin-bottom: 1rem;
    bottom: 100%; /* positions above .disclaimerPopup */
    right: 0;
    background: #fff;
    padding: 1rem;
    width: 40%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none; /* hidden by default */
    z-index: 2;
}
.disclaimerContent {
    font-size: 0.875rem;
    color: #333;
}
.disclaimerClose {
    display: inline-block;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.donutInputGroup {
    margin-bottom: 1rem;
}
.donutInputGroup .donutInputs {
    margin-top: 1rem;
}
.donutInputGroup label {
    margin-bottom: .5rem;
    display: flex;
    justify-content: space-between;
}
.donutInputGroup label > span {
    width: calc(100% - 4rem);
}
.donutInputGroup label input[type=number] {
    width: 4rem;
}
.donutMoreInputs {}
.donutInputGroup p.moreInputText {
    border-bottom: solid 1px #e0e0e0;
    font-weight: bold;
    padding-bottom: .5rem;
}
.donutMoreInputs.disabled {
    color: #767676;
    pointer-events: none;
}
.donutMoreInputs.disabled input {
    background-color: #f0f0f0;
    color: #767676;
}
.inputFieldsReset {
    clear: both;
    margin-bottom: 1rem;
    display: inline-block;
}
.donutLegendCheckbox input[type="checkbox"]:disabled + .legendBox {
    opacity: 0.5;
    cursor: not-allowed;
}
.donutCheckBoxes {
    margin: 1rem 0;
}
.donutCheck {
    margin-top: 1rem;
}
.appPanelDisplayResult .donutBlock .donutCanvas {
    width: 100%;
    max-width: 95%;
}
.appContainer .appPanelDisplayResult canvas {
    display: block;
    cursor: default;
    width: 100%;
    height: auto;
}
.appPanelDisplayResult .chartContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1rem;
}
.appPanelDisplayResult .donutBlock {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 50%;
}
.donutCanvasWrapper {
    position: relative;
    /*width: 230px;
    height: 230px;*/
}
.donutLabel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.label-sub {
    line-height: 1rem;
    margin-bottom: .5rem;
}
.label-total {
    font-size: 1.375rem;
}
.donutHeading {
    text-align: left;
    padding-left: 0; /* remove any default horizontal padding if present */
    margin-left: 0; 
}
.appPanelDisplayResult .donutBlock  {
    flex: 1 1 100%;
    margin-bottom: 1rem;
}
.appPanelDisplayResult .donutBlock .donutCanvas, .appPanelDisplayResult .donutBlock .donutLegend {
    flex: 1;
}
.donutBlock .donutLegend {
    margin-left: 10rem; /* Add left margin to shift right */
    margin-right: 1rem; 
}
.donutBlock .donutLegend ul.legendColor li {
    margin-left: 20px;
    position: relative;
}
.donutBlock .donutLegend ul.legendColor li span.legendBox {
    position: absolute;
    left: -20px;
    top: 5px;
}
.appContainer .legendColor, .donutLegendCheckbox {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}
.appContainer .legendColor li, .donutLegendCheckbox li {
    margin: 4px 0;
}
.appContainer .legendBox {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin: 0 .5rem;
    vertical-align: middle;
    border-radius: 50%;
}
.legendColor .legendBox {
    margin-left: 0;
}
.appContainer .donutTooltip {
    position: absolute;
    background: #242424;
    color: #fff;
    padding: .3rem .5rem;
    border-radius: 0;
    font-size: .75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}
.appContainer .donutTooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #242424;
}
.donutTooltipDesc span {
    font-weight: bold;
}
.donutTooltipDesc .detailDesc {
    border-top: solid 1px #FFFFFF;
    margin-top: 5px;
    padding-top: 5px;
}
/* RESPONSIVE */
@media screen and (max-width: 992px) {
    .appContainer {
        display: block;
    }
    .appContainer .innerContainer {
        margin: 1rem 0;
    }
    .appContainer .appPanelDisplayResult .innerContainer {
        margin-left: 0;
    }
    .appPanelDisplayResult .donutBlock {
        display: block;
    }
    .appPanelDisplayResult {
        width: 100%;
        border: none;
    }
    .appPanelInputField {
        width: 100%;
    }
    .appContainer .appPanelInputField .innerContainer {
        margin-right: 0;
    }
    .appPanelDisplayResult .donutBlock .donutCanvas {
        max-width: 98% !important;
    }
    .appContainer .appPanelDisplayResult canvas {
        width: 90% !important;
        height: 90% !important;
        margin: 0 5%;
    }
    .appPanelDisplayResult .donutBlock .donutLegend {
        margin: 1rem 0 0 0;
    }
    .modalPopup .modal-content {
        width: 80vw;
    }
    .disclaimerModal {
        width: 100%;
    }
}