.diagram-left {
    position: relative;
    margin: 0 0 152px;
}

.diagram-left p {
    margin: 0 0 20px;
}

.diagram-arrow {
    display: none;
}

.diagram-right {
    position: relative;
    width: 375px;
    margin: 0 auto;
}

.diagram-right img {
    margin: 0 -22px 0 -25px;
    height: auto;
}

.diagram-text.bg-orange h1,
.diagram-text.bg-orange h2,
.diagram-text.bg-orange h3,
.diagram-text.bg-orange h4,
.diagram-text.bg-orange h5,
.diagram-text.bg-orange h6,
.diagram-text.bg-orange .sub-heading,
.diagram-text.bg-orange p {
    color: var(--color-white);
}

.diagram-text.bg-orange .btn-primary {
    background: var(--color-white);
    color: var(--color-primary-orange);
}

.diagram-tooltip {
    position: absolute;
    top: 115px;
    left: 158px;
    z-index: 2;
}

.diagram-tooltip.second {
    left: 35px;
    top: 111px;
    bottom: 120px;
    transform: translate(0);
}

.diagram-tooltip button {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 33px;
    line-height: 1em;
    color: var(--color-primary-orange);
}

.diagram-tooltip button::before {
    position: absolute;
    content: "\e905";
    top: calc(50% - 3px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    font-size: 43px;
    line-height: 1;
    color: rgba(203, 76, 39, 0.5);
    font-family: 'sauders-icon' !important;
    visibility: hidden;
    opacity: 0;
}

.diagram-tooltip button.active::before {
    visibility: visible;
    opacity: 1;
}

.diagram-tooltip-text {
    display: none;
    position: absolute;
    top: -222px;
    top: -250px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    width: 325px;
    text-align: center;
    background: var(--color-dark-brown);
    filter: drop-shadow(0px 3.5px 10px 4px rgba(0, 0, 0, 0.07));
    border-radius: 8px;
    padding: 40px 22px 35px 30px;
}

.diagram-tooltip.second .diagram-tooltip-text {
    left: -32px;
    transform: translate(0);
}

.diagram-tooltip-text::before {
    position: absolute;
    content: "";
    top: 9px;
    left: 9px;
    /* z-index: -1; */
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border: 3.35px dashed #F8B917;
    border-radius: 8px;
}

.diagram-tooltip-text::after {
    position: absolute;
    content: "";
    bottom: -21px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    width: 56px;
    height: 52px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="49" height="43" viewBox="0 0 49 43" fill="none"><path d="M28.8301 40.5C26.9056 43.8333 22.0944 43.8333 20.1699 40.5L1.55033 8.25C-0.374168 4.91666 2.03146 0.749995 5.88046 0.749996L43.1195 0.749999C46.9685 0.749999 49.3742 4.91667 47.4497 8.25L28.8301 40.5Z" fill="%23323333"/></svg>') no-repeat center center / cover;
}

.diagram-tooltip.second .diagram-tooltip-text::after {
    left: 15%;
}

.diagram-tooltip-text.active {
    display: block;
}

.diagram-tooltip-text h6 {
    font-size: 29px;
    line-height: 1em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 5px;
}

.diagram-tooltip-text p {
    color: #FFFFFF;
    height: 128px;
    overflow-y: auto;
    z-index: 20;
    position: relative;    
}

/* Custom scrollbar styling for diagram-tooltip-text p */
.diagram-tooltip-text p::-webkit-scrollbar {
    width: 22px;
}

.diagram-tooltip-text p::-webkit-scrollbar-track {
    background: var(--color-dark-brown);;
    border-radius: 4px;
}

.bg-yellow .diagram-tooltip-text p::-webkit-scrollbar-thumb {
    background: #F8B917;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.bg-lime .diagram-tooltip-text p::-webkit-scrollbar-thumb {
    background: var(--color-lime);
}


.diagram-tooltip-text p::-webkit-scrollbar-thumb:hover {
    background: #e6a715;
}

/* Firefox scrollbar styling */
.diagram-tooltip-text p {
    scrollbar-width: medium;
    scrollbar-color: #F8B917 var(--color-dark-brown);
}

@media (min-width: 768px) {
    .diagram-left {
        max-width: 616px;
        margin: 0;
    }

    .diagram-left p {
        margin: 0 0 40px;
    }

    .diagram-right {
        width: 688px;
    }

    .diagram-right img {
        margin: 0;
    }

    .diagram-tooltip {
        top: 222px;
        left: 348px;
    }

    .diagram-tooltip.second {
        left: 130px;
        top: auto;
        bottom: 290px;
    }

    .diagram-tooltip.second .diagram-tooltip-text {
        top: -224px;
        left: -130px;
    }

    .diagram-text-wrap.left .diagram-tooltip.second .diagram-tooltip-text {
        top: -300px;
    }

    .diagram-tooltip.second .diagram-tooltip-text::after {
        left: 45%;
    }
}

@media (min-width: 1200px) {
    .diagram-text {
        padding: 190px 0 115px;
    }

    .diagram-text .container {
        max-width: 100%;
    }

    .diagram-text-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .diagram-text-wrap.left {
        flex-direction: row-reverse;
    }

    .diagram-text.bg-orange .btn-primary:hover {
        background: var(--color-primary-orange-hover);
        color: var(--color-white);
    }    

    .diagram-left {
        width: calc(100% - 620px);
        max-width: unset;
    }

    .diagram-left-inner {
        position: relative;
        max-width: 620px;
        margin-left: auto;
        padding-right: 12px;
    }

    .diagram-text-wrap.left .diagram-left-inner {
        margin-right: auto;
        margin-left: 0;
        padding-left: 12px;
    }

    .diagram-text-wrap.left .diagram-right {
        padding-right: 30px;
        margin: 0;
        margin-left: -40px;
    }

    .diagram-right {
        width: calc(580px + 80px);
        padding-left: 30px;
        margin: 0;
        margin-right: -40px;
    }

    .diagram-right img {
        width: 100%;
        max-width: 732px;
    }

    .diagram-tooltip-text {
        width: 360px;
        padding: 37px 24px 30px 35px;
    }

    .diagram-tooltip-text::before {
        border-width: 4px;
    }

    .diagram-tooltip-text h6 {
        font-size: 35px;
        margin: 0 0 6px;
    }

    .diagram-tooltip {
        top: 180px;
        left: 345px;
    }

    .diagram-tooltip-text {
        top: -260px;
    }

    .diagram-tooltip-text::after {
        width: 63px;
        height: 63px;
        bottom: -20px;
        background-size: contain;
    }

    .diagram-tooltip button {
        font-size: 52px;
    }

    .diagram-tooltip button::before {
        font-size: 62px;
    }

    .diagram-tooltip button:hover::before {
        visibility: visible;
        opacity: 1;
    }

    .diagram-tooltip.second {
        left: 145px;
        bottom: 260px;
    }

    .diagram-tooltip.second .diagram-tooltip-text::after {
        left: 50%;
    }

    .diagram-tooltip.second .diagram-tooltip-text {
        top: -240px;
        left: -154px;
    }

    .diagram-tooltip-text::before {
        top: 11px;
        left: 10px;
        width: calc(100% - 22px);
        height: calc(100% - 20px);
    }
}

@media (min-width: 1367px) {
    .diagram-left {
        width: 50%;
    }

    .diagram-arrow {
        display: block;
        position: absolute;
        top: -116px;
        right: -60px;
        max-width: 650px;
    }

    .diagram-text-wrap.left .diagram-arrow {
        transform: rotateY(180deg);
        right: auto;
        left: -60px;
    }

    .diagram-right {
        width: calc(50% - 56px);
        padding-left: 30px;
        margin-left: 50px;
        margin-right: -35px;
    }

    .diagram-text-wrap.left .diagram-right {
        padding-right: 60px;
        margin-right: 79px;
        margin-left: -35px;
    }

    .diagram-tooltip {
        top: 160px;
        left: 270px;
    }

    .diagram-text-wrap.right .diagram-tooltip {
        top: 175px;
        left: 320px;
    }

    .diagram-tooltip.second {
        left: 107px;
        bottom: 183px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 130px;
        top: auto;
        bottom: 237px;
    }    

    .diagram-tooltip-text {
        top: -275px;
    }

    .diagram-tooltip-text::after {
        bottom: -25px;
    }
}

@media (min-width: 1500px) {
    .diagram-right {
        width: calc(50% - 139px);
        padding-left: 60px;
        margin-left: 79px;
        margin-right: -35px;
    }

    .diagram-text-wrap.left .diagram-right {
        padding-right: 60px;
        margin-right: 79px;
        margin-left: -35px;
    }

    .diagram-text-wrap .diagram-tooltip {
        top: 125px;
        left: 274px;
    }

    .diagram-text-wrap .diagram-tooltip.second {
        left: 132px;
        top: auto;
        bottom: 159px;
    }      

    .diagram-text-wrap.right .diagram-tooltip {
        top: 153px;
        left: 312px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 146px;
        bottom: 204px;
    }      
    
}

@media (min-width: 1600px) {
    .diagram-text-wrap .diagram-tooltip {
        top: 162px;
        left: 322px;
    }

    .diagram-text-wrap .diagram-tooltip.second {
        left: 143px;
        bottom: 175px;
    }    
    
    .diagram-text-wrap.right .diagram-tooltip {
        top: 162px;
        left: 350px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 150px;
        bottom: 250px;
    }    
}


@media (min-width: 1700px) {
    .diagram-text-wrap .diagram-tooltip {
        top: 180px;
        left: 350px;
    }

    .diagram-text-wrap .diagram-tooltip.second {
        left: 141px;
        bottom: 216px;
    } 

    
    .diagram-text-wrap.right .diagram-tooltip {
        top: 180px;
        left: 379px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 150px;
        bottom: 250px;
    }    
}


@media (min-width: 1800px) {
    .diagram-text-wrap.right .diagram-tooltip {
        top: 186px;
        left: 394px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 150px;
        bottom: 250px;
    }    
}

@media (min-width: 1900px) {
    .diagram-right {
        margin-right: auto;
    }

    .diagram-text-wrap.left .diagram-right {
        margin-left: auto;
        margin-right: 0;
    }

    .diagram-text-wrap .diagram-tooltip {
        top: 200px;
        left: 392px;
    }

    .diagram-text-wrap .diagram-tooltip.second {
        left: 162px;
        top: auto;
        bottom: 249px;
    }    

    .diagram-text-wrap.right .diagram-tooltip {
        top: 200px;
        left: 429px;
    }

    .diagram-text-wrap.right .diagram-tooltip.second {
        left: 201px;
        bottom: 291px;
    }
    
}