.active {
    display:flex!important;
}

.center-text {
    text-align:center;
}

.checked {
    color:orange;
}

.drop-item {
    background-color:#fff;
    border:1px solid #ccc;
    border-radius:3px;
    cursor:pointer;
    margin-bottom:10px;
    padding:5px 10px;
    position:relative;
}

.drop-item .remove {
    position:absolute;
    right:4px;
    top:4px;
}

.dropzone {
    background:#eee;
    border-radius:10px;
    margin-bottom:20px;
    min-height:100px;
    padding:20px;
    z-index:0;
}

.flex-100 {
    width:100%;
}

.flex-25 {
    width:25% !important;
}

.flex-30 {
    width:30% !important;
}

.flex-35 {
    width:35% !important;
}

.flex-49 {
    width:49%;
}

.flex-65 {
    width:67%;
}

.flex-69 {
    width:70%;
}

.auto-width {
    width: auto !important;
}

.flex-column,.flex-row {
    display:flex;
    flex-direction:row;
    width:100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.flex-fill {
    flex:1 1 auto;
}

.flex-justified {
    display:flex;
    justify-content:space-between;
}

.flex-scroll {
    flex:1 1 auto;
    height:0;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
}

.ml-2 {
    margin-left:.5em!important;
}

.mr-2 {
    margin-right:.5em!important;
}

.mr-3 {
    margin-right:1rem;
}

.no-overflow {
    overflow:hidden;
}

.pr-2 {
    padding-right:.5em;
}

.sort-icon {
    margin-bottom:.5em;
    margin-right:.5em;
}

.tooltip {
    display:inline-block;
    opacity:100%!important;
    position:relative;
}

.mt-4 {
    padding-top: 2em;
}

.tooltip .tooltiptext {
    background-color:#000;
    border-radius:6px;
    bottom:100%;
    color:#fff;
    left:50%;
    margin-left:-125px;
    padding:5px 0;
    position:absolute;
    text-align:center;
    visibility:hidden;
    width:250px;
    z-index:1;
}

.tooltip .tooltiptextbis {
    background-color:#000;
    border-radius:6px;
    color:#fff;
    position:absolute;
    text-align:center;
    visibility:hidden;
    width:250px;
    z-index:1;
}

.tooltip:hover .tooltiptext {
    visibility:visible;
}

.tooltip:hover .tooltiptextbis {
    visibility:visible;
}

.tooltipp .tool {
    background-color:#000;
    border-radius:6px;
    bottom:100%;
    color:#fff;
    position:absolute;
    text-align:center;
    z-index:1;
}

.tooltipp {
    opacity:100%!important;
    position:relative;
}


.ui-rangeslider .ui-rangeslider-sliders {
    position: relative;
    overflow: visible;
    height: 30px;
    margin: 0 68px;
}
html > body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
    height: 15px;
    border-width: 1px;
}
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
    position: absolute;
    top: 6px;
    right: 0;
    left: 0;
    margin: 0;
}
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
    background-color: #e9e9e9;
    border-color: #ddd;
    color: #333;
    text-shadow: 0 1px 0 #eee;
    font-weight: 700;
}
.ui-btn-corner-all, .ui-btn.ui-corner-all, .ui-slider-track.ui-corner-all, .ui-flipswitch.ui-corner-all, .ui-li-count {
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
}
.ui-slider-track .ui-btn.ui-slider-handle {
    font-size: .9em;
    line-height: 30px;
}
.ui-slider-track .ui-btn.ui-slider-handle {
    position: absolute;
    z-index: 1;
    margin-top: -7px !important;
    width: 28px;
    height: 28px;
    margin: -15px 0 0 -15px;
    outline: 0;
    padding: 0;

}
.ui-btn.ui-slider-handle {
    font-size: 16px;
    margin: .5em 0;
    padding: .7em 1em;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f2f2f2;
    border-color: #ddd;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
    border-radius: .3125em;
    font-size: small;
    margin-top: -7px !important;
    text-decoration:none;
}

.ui-shadow {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.ui-slider-handle{
    border-radius: .3125em;
}

svg g.globalG {
    font-weight: normal;

    &:hover {
        text {
            font-weight: bolder;
        }
    }

    > text:hover {
        font-weight: bolder;
        fill: black;
    }
}

.helptext {
    display: none;
    text-align: justify;
    font-size: 75%;
    background-color: #e6e6e6;
    padding: 12px;
    border: 1px solid black;
    border-radius: 3px;
}

.help:hover .helptext {
    display: block;
}

.notion-star {
    fill: black;
} 

.notion-star:hover, .notion-star[data-selected="true"] {
    fill: orange;
} 

.notion-star:has(~ .notion-star:hover), .notion-star:has(~ .notion-star[data-selected="true"]) {
    fill: orange;
}

.reset-stars-logo {
    fill: black;
}

.reset-stars-logo:has(+ .reset-stars:hover) {
    fill: orange;
}