/*   DATASAGE STYLES  */
.datasagePage {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.cfinderHldr {
    display: flex;
    align-items: start;
    width: 100%;
    gap: 30px;
}
.cfinderLft {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 310px;
    gap: 30px;
}
.cfinderNav {
    padding: 20px;
    width: calc(100% - 40px);
}
.dataSageTitle {
    padding: 8px 20px;
    width: calc(100% - 40px);
} 
.cfinderButns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    width: calc(100% - 40px);
    position: absolute;
    top: -10px;
    left: 0px;
    z-index: 100;
    border-bottom: 1px solid #737B9922;
    background: #ffffff11;
    border-radius: 8px 8px 0 0;
    margin: 9px 0px 0;
    backdrop-filter: blur(3px);
} 
.graphButn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    color: #737B99;
    background-color: #020106;
    box-shadow: -1.5px -1.5px 3px 2px rgb(255 255 255 / 15%), 2px 2px 3px 3px rgb(0 0 0 / 80%);
    transition: background-color 0.5s;
    border: none;
}
.zoomButn:hover,
.recenterButn:hover {
    background-color: #FF6600;
    color: #FFF;
    cursor: pointer;
}
.filterButn:hover {
    background-color: #0055FF;
    color: #FFF;
    cursor: pointer;
}
.stopRotate:hover {
    background-color: #BB1122;
    color: #FFF;
    cursor: pointer;
}
.graphButn:hover svg {
    color: #FFF !important;
}
.filterButn.active {
    background-color: #FF6600;
    color: white;
}

.sageTitle {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
}
.cfinder-controls {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(100% - 20px);
}
.cfinderRyt {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: calc(100% - 340px);
    gap: 30px;
    position: relative;
}
.cfinderValues {
    position: absolute;
    width: fit-content;
    top: 70px;
    left: 10px;
    z-index: 100;
    background: none;
}
.cfinder-values {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
}
.cfinderCanvas {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: -2px 0 0;
    width: -webkit-fill-available;
    background: #020106;
    box-shadow: inset 10px 10px 15px #000, inset -4px -4px 12px #FFFFFF55;
}
.cfinderCanvas:fullscreen {
    padding: 50px;
}
.cfinderCanvas canvas {
    background: #020106;
}
XX.datasagePage .scene-container {
    height: 740px !important;
    max-width: 1495px !important;
    max-height: 740px !important;
}
XX.datasagePage .scene-container canvas {
    height: 740px !important;
    max-width: 1495px !important;
    max-height: 740px !important;
}

.datasagePage .scene-container,
.datasagePage .scene-container canvas {
    height: 38vw !important;
    width: calc(100vw - 440px) !important;
    max-height: 38vw !important;
    max-width: calc(100vw - 440px) !important;
}


.datasagePage .scene-container:fullscreen,
.datasagePage .scene-container:-webkit-full-screen,
.datasagePage .scene-container:-moz-full-screen,
.datasagePage .scene-container:-ms-fullscreen,
.datasagePage .scene-container canvas:fullscreen,
.datasagePage .scene-container canvas:-webkit-full-screen,
.datasagePage .scene-container canvas:-moz-full-screen,
.datasagePage .scene-container canvas:-ms-fullscreen {    
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

.datasagePage .rc-slider {
    width: calc(100% - 40px);
    height: 14px;
    padding: 5px 0px;
    border-radius: 6px;
    margin: 0 auto 20px;
    position:relative;
    touch-action:none;
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.datasagePage .rc-slider *{
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

.datasagePage .rc-slider-track, 
.datasagePage .rc-slider-tracks {
    background-color: #ff6600;
    box-shadow: 0 0 10px #FF6600;
    position:absolute;
    height:4px;
    border-radius:6px;
}
.rc-slider-track-draggable {
    z-index:1;
    box-sizing:content-box;
    background-clip:content-box;
    border-top:5px solid rgba(0,0,0,0);
    border-bottom:5px solid rgba(0,0,0,0);
    transform:translateY(-5px);
}
.datasagePage .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
    border-color: #FF6600;
    box-shadow: 0 0 0 5px #FF660066;
}
.datasagePage .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging-delete{opacity:0}


.datasagePage .rc-slider-handle {
    background-color: #FF8833;
    border: 2px solid #FF6600;
    box-shadow: 0 0 10px #FF6600;
    position:absolute;
    z-index:1;
    width:14px;
    height:14px;
    margin-top:-5px;
    border-radius:50%;
    opacity:.8;
    cursor:pointer;
    cursor:grab;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    touch-action:pan-x;
}
.datasagePage .rc-slider-handle:hover {
    border-color: #ff4422;
}
.datasagePage .rc-slider-handle:focus{
    outline:none;
    box-shadow:none
}
.datasagePage .rc-slider-handle:focus-visible {
    border-color:#ff4422;
    box-shadow:0 0 0 4px #FF8833
}
.datasagePage .rc-slider-handle-click-focused:focus {
    border-color:#FF6600;
    box-shadow:unset
}
.datasagePage .rc-slider-handle:active { 
    border-color:#ff4422;
    box-shadow:0 0 6px #ff6600;
    cursor:grabbing;
}
.datasagePage .rc-slider-rail {
    background-color: var(--trackDotBg);
    position:absolute;
    width:100%;
    height:4px;
    border-radius:6px
}

.datasagePage .rc-slider-mark{
    position:absolute;
    top:18px;
    left:0;
    width:100%;
    font-size: 18px;
    font-weight: 800;
    padding: 5px 0;
    margin: -5px auto 0 !important;
}

.datasagePage .rc-slider-mark-text {
    color: var(--trackDot);
    position:absolute;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
}

.datasagePage .rc-slider-mark span:nth-child(1).rc-slider-mark-text-active { color: #0077CC; text-shadow: 0px 0px 8px #0077CC; }
.datasagePage .rc-slider-mark span:nth-child(2).rc-slider-mark-text-active { color: #3899e0; text-shadow: 0px 0px 8px #3899e0; }
.datasagePage .rc-slider-mark span:nth-child(3).rc-slider-mark-text-active { color: #4FA8E9; text-shadow: 0px 0px 8px #4FA8E9; }
.datasagePage .rc-slider-mark span:nth-child(4).rc-slider-mark-text-active { color: #BBBBBB; text-shadow: 0px 0px 8px #BBBBBB; }
.datasagePage .rc-slider-mark span:nth-child(5).rc-slider-mark-text-active { color: #66e166; text-shadow: 0px 0px 8px #66e166; }
.datasagePage .rc-slider-mark span:nth-child(6).rc-slider-mark-text-active { color: #43D543; text-shadow: 0px 0px 8px #43D543; }
.datasagePage .rc-slider-mark span:nth-child(7).rc-slider-mark-text-active { color: #00BB00; text-shadow: 0px 0px 8px #00BB00; }
/*.datasagePage .rc-slider-mark-text-active {
    color: #ff6600;
    text-shadow: 0px 0px 8px #FF6600;
} */
.rc-slider-mark-text-active{color:#666}

.rc-slider-step{
    position:absolute;
    width:100%;
    height:4px;
    background:transparent;
}


.datasagePage .rc-slider-dot {
    bottom: -3px;
    width: 10px;
    height: 10px;
    background-color: var(--trackDot);
    border: var(--trackDotBrdr);
    position:absolute;
    vertical-align:middle;
    border-radius:50%;
    cursor:pointer;
}
.datasagePage .rc-slider-dot-active {
    border-color: #FF6600;
    background-color: #FF8833;
}

.rc-slider-dot-reverse{margin-right:-4px}

.rc-slider-disabled{background-color:#e9e9e9}

.rc-slider-disabled .rc-slider-track{background-color:#ccc}

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot{
    background-color:#fff;
    border-color:#ccc;
    box-shadow:none;
    cursor:not-allowed;
}

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {cursor:not-allowed!important}

.rc-slider-vertical {width:14px;height:100%;padding:0 5px}
.rc-slider-vertical .rc-slider-rail {width:4px;height:100%}
.rc-slider-vertical .rc-slider-track {bottom:0;left:5px;width:4px}
.rc-slider-vertical .rc-slider-track-draggable {border-top:0;border-right:5px solid rgba(0,0,0,0);border-bottom:0;border-left:5px solid rgba(0,0,0,0);transform:translate(-5px)}
.rc-slider-vertical .rc-slider-handle {position:absolute;z-index:1;margin-top:0;margin-left:-5px;touch-action:pan-y}
.rc-slider-vertical .rc-slider-mark {top:0;left:18px;height:100%}
.rc-slider-vertical .rc-slider-step {width:4px;height:100%}
.rc-slider-vertical .rc-slider-dot {margin-left:-2px}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear,
.rc-slider-tooltip-zoom-down-leave {display:block!important;animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}
.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear {transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}
.rc-slider-tooltip-zoom-down-leave {animation-timing-function:cubic-bezier(.755,.05,.855,.06)}

@keyframes rcSliderTooltipZoomDownIn{0%{transform:scale(0);transform-origin:50% 100%;opacity:0}to{transform:scale(1);transform-origin:50% 100%}}
@keyframes rcSliderTooltipZoomDownOut{0%{transform:scale(1);transform-origin:50% 100%}to{transform:scale(0);transform-origin:50% 100%;opacity:0}}

.rc-slider-tooltip{position:absolute;top:-9999px;left:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.rc-slider-tooltip-hidden{display:none}
.rc-slider-tooltip-placement-top{padding:4px 0 8px}
.rc-slider-tooltip-inner{min-width:24px;height:24px;padding:6px 2px;color:#fff;font-size:12px;line-height:1;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}
.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}





.cfinder-controls button {
    box-shadow: var(--shadupsm);
    padding: 9px;
    margin: 15px 0 0;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    background-color: #FF660000;
    color: var(--text-color);
    transition: box-shadow 0.5s, background-color 0.3s;
}
.cfinder-controls button:hover {
    background-color: #FF6600;
    color: #FFF;
    cursor: pointer;
}


.cfinder-controls .input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.cfinder-controls input.error {
    border-color: red;
}
.cfinder-controls .error-message {
    color: red;
    font-size: 0.8em;
    margin-top: 4px;
}
.cfinder-container { position: relative; }
.cfinder-container .error-message {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FF6600;
    color: white;
    padding: 12px 20px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cfinder-container .error-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cfinder-container .error-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}
.no-criteria {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 0.5rem;
}
.criteria-list {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 0 20px 0 0;
    max-height: 600px;
    overflow-y: auto;
}
.criteria-item {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 2px 10px;
    background: #FFF;
    border: 1px solid #FF6600;
}
.criteria-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.criteria-tag {
    font-weight: 600;
    color: #333;
    font-size: 0.8em;
}
.criteria-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8em;
}
.range-separator {
    color: #666;
    font-size: 0.9em;
}
.remove-criteria {
    background: none;
    border: none;
    padding: 0;
    margin-left: 12px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.remove-criteria:hover {
    color: #ff4444;
}
.cfinderMetaData { 
    display: flex; 
    align-items: center; 
    gap: 25px;
}    
.totalMems {
    display: flex;
    align-items: center;
}
.userBallIcon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FF6600;
}
.graph-controls {
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: space-between;
    left: 0px;
    bottom: 2px;
    background: #020108;
    color: #737B99;
    width: calc(100% - 10px);
    box-shadow: -1.5px -1.5px 3px 2px rgb(255 255 255 / 15%), 2px 2px 3px 3px rgb(0 0 0 / 80%);
    padding: 5px;
    margin: 0 0 0 5px;
}

@media (max-width: 1650px) {
    .graph-controls {
        flex-wrap: wrap;
    }
}

.graphControl {
    display: flex;
    align-items: center;
}
.cfindTooltip {
	background: #111111EE; 
	padding: 10px; 
	border-radius: 8px; 
	min-width: 240px; 
	border: 1px solid #FFF;
}
.cfindToolName {
	border-bottom: 1px solid #737B9999; 
	padding: 3px 0 9px; 
	margin: 0 0 12px;
	text-align: center;
    display: flex;
    align-items:  center;
    justify-content: space-between;
}
.toolVoteHldr {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.toolVotes,
.toolMarks{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.toolVote,
.toolMark{
	display: flex;
	align-items: center;
	justify-content: center;
    text-align: center;
	width: 14.285%;
	padding: 3px 0;
}

.graphControlsTop,
.graphControlsBottom {
    width: -webkit-fill-available;
    margin: 6px 0;
}



.crowdFndr.dadoSearchSelect {
    max-width: 250px;
    min-width: 250px;
}



@media (max-width: 821px) {
    .datasagePage {
        width: calc(100% - 30px);
        gap: 0;
    }
    

    .dataSageTitle {
        display: none;
    }
    .cfinderHldr {
        gap: 0;
        flex-direction: column;
    }
    .cfinderLft {
        width: 100%;
        gap: 0;
        margin: 10px 0 90px;
    }
    .cfinderNav {
        padding: 10px;
        width: calc(100% - 20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sageTitle {
        align-items: center;
        margin: 0;
        font-size: 20px !important;
    }
    .sageSubTitle {
        font-size: 16px !important;
        margin: 0 !important;
    }
    .cfinder-controls {
        gap: 0;
    }
    .cfinder-controls .input-container {
        margin: 0 0 7px;
    }
    .cfinder-controls input[type="text"] {
        margin: 0 0 3px;
        padding: 6px 5px;
        font-size: 14px !important;
        background: #737B9922;
    }
    .sent-slider-label {
        margin: 0 0 7px !important;
    }
    .datasagePage .rc-slider {
        margin: 0px auto 17px;
    }
    .datasagePage .rc-slider-mark {
        top: 8px;
    }
    .cfinder-controls button {
        padding: 6px;
        margin: 10px auto 0;
        font-size: 14px;
        width: 60%;
    }

    .cfinderRyt {
        width: 100%;
        gap: 0;
        margin: 0 0 270px;
    }
    .cfinderCanvas {
        padding: 10px;
        margin: 0;
        box-shadow: inset 4px 4px 9px #000, inset -2px -2px 8px #FFFFFF66;
    }
    .cfinder-container {
        width: 100%;
    }
    .cfinderButns {
        padding: 10px;
        width: 100%;
        top: -80px;
        border-bottom: none;
        background: #00000011;
        border-radius: 8px;
        margin: 0 -10px;
    }
    .cfinderValues {
        top: 5px;
        left: 5px;
    }
    .graph-controls {
        left: 0px;
        bottom: -295px;
        width: calc(100% + 10px);
        box-shadow: none;
        padding: 10px 5px;
        margin: 0 -10px;
        flex-direction: column;
    }
    .graphControlsTop,
    .graphControlsBottom {
        margin: 5px 0;
        flex-direction: column;
    }
    .graphControl {
        margin: 5px 0;
    }
    .datasagePage .scene-container, 
    .datasagePage .scene-container canvas {
        height: 30vh !important;
        width: 100% !important;
        max-height: 30vh !important;
        max-width: 100% !important;
    }
    .totalMems {
        flex-direction: column;
    }
    .totalMemsMeta {}
    .totalMemsLabel {
        font-size: 10px;
    }
    .cfinderButnRow {
        gap: 0;
        max-width: 40%;
    }
    button.filterButn.graphButn {
        gap: 0;
        padding: 3px 9px;
        box-shadow: none;
        font-size: 12px;
    }
    button.filterButn.graphButn svg {
        margin: 0 10px 0 0;
    }
    .criteria-item {
        padding: 0px 5px;
    }
    .criteria-content {
        gap: 0;
    }
    .criteria-tag {
        font-size: 11px;
        margin: 0 10px 0 0;
    }






}