/* Nicer text highlight colour */
::selection {
    background: #c1dbf7;
    /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #c1dbf7;
    /* Gecko Browsers */
}

/* For fitting non-square images into square block */
.scale-and-center-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
}


/*
    Simple text styling
*/
.glow-green {
    text-shadow: 1px 1px 15px rgba(3, 207, 183, 1);
}

svg.glow-green {
    filter: drop-shadow(1px 1px 15px rgba(3, 207, 183, 1))
}

.red {
    color: red !important;
}

/* Recommended Users box */
.creator-widget img,
.creator-widget .card-body {
    height: 15rem;
}

.creator-widget .bio {
    height: 60%;
    overflow-y: hidden;
    margin-bottom: 0;
    mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}

.creator-widget .card-footer {
    position: relative !important;
    background-color: rgba(246, 247, 246, 255);
    z-index: 100
}

.creator-widget .card-body {
    transition: 0.5s;
}

.creator-widget:hover .card-body {
    transition: 0.5s;
    background-color: rgb(218, 220, 248, 0.3);
}

.reset-anchor {
    text-decoration: inherit !important;
    color: inherit !important;
}

.creator-widget .pill-container {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: row-reverse; /* This makes sure items are placed from right to left */
    align-items: center;
}

.creator-widget .price-pill {
    font-size: 16px;
    z-index: 3;
    background-color: #3acf5a96;
    margin-left: 0.5rem; /* To give space between  pills */
}


/*
    Helper style for writing <button> elements with no styling
*/
.reset-button {
    border: 0;
    background-color: inherit;
    padding: 0;
}

/*
    Sometimes hrs do not have the correct height, see https://stackoverflow.com/a/58408821/7173479
*/
.fix-hr {
    height: 0px !important;
    border-top: thin solid #243588;
}

/*
    Slider settings
*/
.noUi-tooltip {
    padding: 0.1rem;
    border-color: #dee2e6;
    background: #e9ecef;
    font-size: 0.7875rem;
}

@media (max-width: 768px) {
    .noUi-horizontal .noUi-handle {
        width: 9px;
    }
}

/*
    Glowing box emphasis effects
*/
.div-glow {
    box-shadow: 0 0 10px #03cfb796;
    -webkit-box-shadow: 0 0 10px #03cfb796;
    -moz-box-shadow: 0 0 10px #03cfb796;
}