.tooltip {
    top: -1000px;
    position: fixed;
    padding: 10px;
    background: rgba(255, 255, 255, .90);
    border: 1px solid lightgray;
    pointer-events: none;
    font-size: 14px;
    width: 267px;
}

.tooltip-hidden {
    opacity: 0;
    transition: all .3s;
    transition-delay: .1s;
}

@media (max-width: 590px) {
    div.tooltip {
        bottom: -1px;
        width: calc(100%);
        left: -1px !important;
        right: -1px !important;
        top: auto !important;
        width: auto !important;
    }
}


.domain {
    display: none;
}

text {
    /*pointer-events: none;*/
    /*text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
}


.note {
    font-size: 12px;
    color: #999;
    margin-top: 60px;
}

.vis-note {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.attr-note {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    text-align: center;
}

.attr-title {
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 400;
    color: #3C4043;
}

.mono {
    font-family: monospace;
}


svg {
    overflow: visible;
}


.axis {
    font-size: 12px;
    pointer-events: none;
}

.axis {
    color: #888;

}

.axis text {
    fill: #888;
    color: #888;
    font-family: 'Roboto', Helvetica, sans-serif;
    font-size: 12px;
}

.axis text.bold {
    color: #3C4043;
    fill: #3C4043;
    font-weight: 500;

}

.axis line {
    stroke: #ccc;
}

div.axis b {
    margin-bottom: -10px;
    display: block;
}

.init-hidden {
    opacity: 0;
}

.highlight {
    color: #fff;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
}

.highlight.lfblue {
    background: #3E8EDE;
}

.highlight.lforange {
    background: #FC9E29;
}

.highlight.orange {
    background: #ffd890;
}

.highlight.red {
    background: #a82400;
}

.highlight.yellow {
    background: #ff0;
    color: #000;
}

.highlight.purple {
    background: #3E8EDE;
}

/*.highlight.purple{ background: #FF7AFF; color: #000;}*/
.highlight.grey {
    background: #ccc;
    color: #000;
}

.highlight.box {
    border: 1px solid #ff6200;
    border-radius: 5px;
    color: #000;
    padding-bottom: 2px;
    white-space: nowrap;
}

.highlight.purple-box {
    border: 1px solid #b0b;
}

.highlight.grey-box {
    border: 1px solid #ccc;
}

.highlight.box.square {
    border-radius: 0px;
}

.highlight.blue-box {
    border: 2px solid #007276;
}


.circle {
    background: #eee;
    border: 1px solid #ccc;
    font-family: monospace;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;

    border-radius: 100px;
}


.strikethrough {
    text-decoration: line-through;
    color: #000;
}


.annotations path {
    fill: none;
    stroke: black;
}


@keyframes strokeblink {
    from {
        /*fill: black;*/
        stroke-width: 1px;
    }

    to {
        /*fill: green;*/
        stroke-width: 1px;
    }
}

g.student:hover circle {
    stroke-width: 2px;
}

g {
    /*opacity: 1 !important;*/
}

.inactive {
    opacity: 0 !important;
    pointer-events: none;
}

input[type="range" i] {
    background-color: #def5ef;
    -webkit-appearance: none;
    height: 20px;
    width: 240px;
    overflow: hidden;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 20px;
    cursor: ew-resize;
    background: #007276;
    box-shadow: -200px 0 0 200px #7ed3c9;
    border: 1px solid #333;
}

input:focus {
    outline-width: 0;
}


@media (max-width: 590px) {
    text {
        font-size: 120% !important;
    }
}


.button-container {
    
    margin: 0px auto;
    
}

.button-container:hover {
    background: #ddd;
}

.button-outer {
    text-align: center;
    margin-top: 20px;
}

a {
    color: rgb(60, 64, 67);
}

a:hover {
    color: #000;
}

.center {
    display: flex;
    justify-content: center;
}

.image_picker ul.thumbnails.image_picker_selector li {
    margin: 0 1px;
    line-height: 0;
}

.image_picker ul.thumbnails.image_picker_selector li .thumbnail {
    border: unset;
    padding: 4px;
}

.image_picker ul.thumbnails.image_picker_selector li .thumbnail.selected {
    border-radius: 10%;
    background: #3E8EDE;
}

/*Make top level highlights not clickable */
.image_picker.demo_select ul.thumbnails.image_picker_selector li .thumbnail.selected,
.image_picker.demo_select ul.thumbnails.image_picker_selector li .thumbnail {
    border-radius: 10%;
    background: unset;
    /*padding: 1px;*/
    /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
}
/*Make top level highlights not clickable */
.image_picker.demo_select ul.thumbnails.image_picker_selector li img {
    opacity: 1;
    cursor: unset;
}

.image_picker ul.thumbnails.image_picker_selector li img {
    border-radius: 10%;
    opacity: 0.8;
    width: 64px;
    height: 64px;
    cursor: pointer;
}

.image_picker.bordered ul.thumbnails.image_picker_selector li img {
    border: 1px solid #bbb;
}

.image_picker.demo_select ul.thumbnails.image_picker_selector li img {
    width: 246px;
    height: 200px;
    object-fit: cover;
}

.image_picker.demo_select ul.thumbnails.image_picker_selector li div.thumbnail {
    display: flex;
    justify-content: center;
    /*cursor: pointer;*/
}

.image_picker.demo_select ul.thumbnails.image_picker_selector li p {
    position: absolute;
    margin-top: 210px
}


.image_picker ul.thumbnails.image_picker_selector li .selected img {
    border-radius: 10%;
    opacity: 1;
}


.hidden {
    /*visibility: hidden;*/
    /*opacity: 0;*/
    display: none;
    /*transition: visibility 0s 2s, opacity 2s linear;*/
}

/*.visible {*/
/*  visibility: visible;*/
/*  opacity: 1;*/
/*  !*transition: visibility 0s 2s, opacity 2s linear;*!*/
/*}*/

/* Define the keyframes for the animation */
@keyframes scaleLogo {
    0% {
        transform: scale(1); /* Initial size */
    }
    50% {
        transform: scale(1.2); /* Scale up to 120% of the original size */
    }
    100% {
        transform: scale(1); /* Return to the original size */
    }
}

/* Apply the animation to your logo element */
.logo {
    width: 48px;
    animation: scaleLogo 2.5s ease-in-out infinite; /* Adjust the duration and timing function as needed */
    /* You can also add other CSS properties for positioning and styling your logo */
}

.infer-attr {
    margin-top: 50px;
}

.slick-track {
    line-height: 0;
}

.dataset-examples img,
.model-failures img {
    width: 80px;
}

/*.label-bottle {*/
/*    border: 4px solid #3E8EDE;*/
/*}*/

/*.label-can {*/
/*    border: 4px solid darkorange;*/
/*}*/

/*.label-carton {*/
/*    border: 4px solid purple;*/
/*}*/