/*
! PLEASE NOTE, THIS TIHNG / ABOMINATION IS A WHOLE MESS, I KNOW
*/

@import url('theme.css');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border:0px solid red; 
}


@keyframes moveGrid {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 40px 50px, 40px 50px; 
    }
}
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    background-image: 
        linear-gradient(to right, var(--background-color-decor) 1px, transparent 1px),
        linear-gradient(to bottom, var(--background-color-decor) 1px, transparent 1px);
    background-size: 20px 25px;
    z-index: -2;
    /* animation: moveGrid 10s linear infinite; */
}

.background-layer::after {
    content: "";
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 500px;
    opacity: 0.1;
    pointer-events: none;

}

body {
    position: relative;
    height: 100vh;
    overflow:hidden;
}



/* ! UNIVERSAL STUFF STARTS HERE */

/* ? BOX STYLINGS */
.normal-box{
    background-color: var(--background-color-light);
    border: 1px solid var(--main-text);
    padding: 10px;
}
.normal-box.glow{
    box-shadow: 
        0 0 5px var(--main-glow-text),
        0 0 10px var(--main-glow-text),
        inset 0 0 5px var(--main-glow-text); 
}

#lidbrainz-connection{
    background-color: var(--background-color-light);
    border: 1px solid var(--main-text);
    padding: 10px; 
    height:100%;
}
#lidbrainz-event-log{
    height:100%;
}
    #lidbrainz-event-log > h3 {
        text-align: center;
        margin-bottom: 10px;
    }
    #lidbrainz-event-log > hr{
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid var(--main-text);
        margin-top: 10px;
        margin-bottom:10px;
    }
    #logs-scrollable{
        display:flex;
        flex-direction: column;
        overflow-y: auto;
        min-height: 0;
        height:calc(100% - 38px); 
        scrollbar-color: var(--white-secondary-text) transparent;
    }
        .event-item{
            display:flex;
            flex-direction: column;
            flex-wrap:wrap;
            margin-bottom:10px;
        }
            .event-item > .first-row{
                display:flex;
                flex-direction: row;
            }
                
                .event-time{margin-left:5px;}
                .event-type.INFO{
                    color:var(--green-text);
                }
                .event-type.WARNING{
                    color:var(--yellow-text);
                }
                .event-type.ERROR{
                    color:var(--red-text);
                }
            .event-item > .second-row{
                
                display:flex;
                flex-direction: row;
            }
                .event-content-indent{
                    margin-top:5px;
                    margin-left:5px;
                    color:var(--main-hover-text);
                    text-shadow: 
                        0 0 3.25px var(--main-glow-text), 
                        0 0 8.25px var(--main-glow-text), 
                        0 0 12.5px var(--main-glow-text);
                }
                
                .event-content{margin-left:10px;}
                    .event-content > a {
                        color: var(--main-text);
                        text-decoration: underline;
                    }




.input-box{
    background-color: var(--background-color-light);
    border: 1px solid var(--main-text);
    padding: 10px;
    display: flex;
    flex-direction: row;
}




@keyframes blink {
    0%, 50% { visibility: visible; }
    51%, 100% { visibility: hidden; }
}

.search-input-cursor-holder::before {
    content: "▇";
    position: absolute;
    left: 11px;
    top: calc(50% - 0.47em);
    color: var(--main-muted-text);
    font-family: var(--font-family);
    font-size: 0.85em;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.search-input-cursor-holder:has(input:focus)::before {
    animation: blink 1s step-end infinite;
    color: var(--main-text);
}
.search-input-cursor-holder{
    width:fit-content;
    position: relative;
}


.search-input{
    background-color: var(--background-color-input);
    border: 1px solid var(--main-muted-text);
    padding: 10px;
    padding-left: 25px;
    outline: none;
    color: var(--main-text);
    font-family: var(--font-family);
    font-size: 1em;
}
.search-input::placeholder{
    color: var(--main-muted-text);
}
.search-input:focus{
    border: 1px solid var(--main-text);
}

.search-input-cursor-holder:has(#artist-search-input){
    margin-left: 10px;
}



#search-limit-container {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-left: 20px;
}
#search-limit-container > h3 {
    text-shadow: 
        0 0 3.25px var(--main-glow-text),
        0 0 8.25px var(--main-glow-text),
        0 0 12.5px var(--main-glow-text);
}
.limit-button {
    background-color: transparent;
    border: none;
    color: var(--main-text);
    font-family: var(--font-family);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    min-width:1.1em;

}

.limit-button:hover {
    color: var(--main-hover-text);
}

.limit-button:active {
    transform: scale(0.98);
}

#limit-value {
    font-family: var(--font-family);
    font-size: 1em;
    color: var(--main-text);
    text-align: center;
    text-decoration: underline;
    text-shadow: 
        0 0 3.25px var(--main-glow-text),
        0 0 8.25px var(--main-glow-text),
        0 0 12.5px var(--main-glow-text);
}

#search-input-button{
    background-color: var(--background-color-decor);
    border: 1px solid var(--main-text);
    padding: 10px;
    margin-left: 10px;
    color: var(--main-text);
    font-family: var(--font-family);
    font-size: 1em;
    cursor: pointer;
    margin-left:auto;
}
#search-input-button:hover,
#search-input-button:focus-visible{
    border: 1px solid var(--main-text);
    outline: none;
    background-color: var(--main-hover-text);
    color: var(--background-color);
}
#search-input-button:active
{
    transform: scale(0.98);
}









@keyframes expandRight {
    from {
        max-width: 0;
        opacity: 0;
        margin-right: 0;
    }
    to {
        max-width: 25em; 
        opacity: 1;
        margin-right: 10px;
    }
}

.results-box-image-container{
    display:flex;
    flex-direction: row;
    margin-top: 10px;
}
.results-box-image{
    will-change: max-width;
    align-self: start; 
    overflow: hidden; 
    border: 1px solid var(--white-secondary-text);
    max-width: 0;
    opacity: 0;
    animation: expandRight 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    flex-shrink:0;
    
}
.results-box-image img{
    width: auto; 
    display:block;
    object-fit: cover;
    
}


.results-box{
    background-color: var(--background-color-light);
    border: 1px solid var(--white-secondary-text);
    padding: 10px;
    display: flex;
    flex-direction: column; 
}


.results-box.example {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}
.results-box.release-group-result{
    flex-grow: 1;
}



.results-box .release-group-header {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
}
.release-group-header > .shrinkable{
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.release-group-header > .non-shrinkable{
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    margin-left: auto;
}


.releaseGrpName a {
    color: var(--white-text);
    text-decoration: none;
}
.releaseGrpName a:hover {
    text-decoration: underline;
}

.results-box .addButton{
    margin-left: 10px;
    margin-top: -5px;
    margin-bottom: -4px;
    background-color: var(--background-color-decor);
    border: 1px solid var(--green-secondary-text);
    padding: 5px 10px;
    color: var(--green-text);
    font-family: var(--font-family);
    cursor: pointer;
}
.results-box .addButton:hover{
    background-color: var(--green-text);
    color: var(--background-color);
}
.results-box .addButton:active{
    transform: scale(0.98);
}

.results-box > hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--white-secondary-text);
    margin-top: 12.5px;
    margin-right:10px;
    margin-left:10px;
}

.results-box > hr.second-line {
    height:0;
    display:none;
    margin-top:10px;

}

.results-box:has(.release-group-releases.expanded) > hr.second-line {
    height: 1px;
    display:block;
}

.releases-toggle-button {
    width:fit-content;
    background-color: transparent;
    border: none;
    color: var(--white-secondary-text);
    font-family: var(--font-family-condensed);
    font-size: 1.0em;
    font-weight: var(--font-retina);
    cursor: pointer;
    padding-top:10px;
    padding-left:15px;
}

.releases-toggle-button:hover {
    color: var(--white-text);
}

.results-box > .release-group-releases {
    padding-left: 15px;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.results-box > .release-group-releases.expanded {
    max-height: 1000px;
    opacity: 1;
    padding-top: 10px;
}

.release-group-releases > .release {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width:100%;
    flex-direction: row;
}
.release > .shrinkable {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.release > .non-shrinkable {
    flex-shrink:0;
    flex-grow:0;
    white-space:nowrap;
    display:flex;
    flex-direction:row;
    margin-left:auto;
    width:fit-content;
}

.releaseName a {
    color: var(--white-text);
    text-decoration: none;
}
.releaseName a:hover {
    text-decoration: underline;
}


.release img {
    vertical-align: middle;
    height: 0.90em;
    margin-right: 10px;
}

.release .releaseYear {
    margin-left: 10px;
}

.release .releaseAddButton {
    margin-left: 10px;
    cursor: pointer;
}

.release .releaseAddButton:hover {
    text-decoration: underline;
}
.release .releaseAddButton:active{
    transform: scale(0.98);
}



.settings-box {
    background-color: var(--background-color-light);
    border: 1px solid var(--main-text);
    padding: 10px; 
}
.settings-box#quality-settings {
    border: 1px solid var(--white-text);
}
.settings-box#download-settings {
    border: 1px solid var(--white-text);
}
.settings-box > h3 {
    text-align: center;
    white-space: nowrap;
}
.settings-box label{
    font-style:italic; 
}

#metadata-settings > hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--main-text);
    margin-top: 10px;
}
#metadata-profile-select {
    padding-top: 10px;
    padding-left:10px;
    padding-bottom:0px;
}
#metadata-profile-select > input[type="radio"] {
    opacity:0;
    position: absolute;
    pointer-events: none;
    
}
#metadata-profile-select > label{
    display: block;
    cursor: pointer;
    padding-top:2px;
    padding-bottom:2px;
    transition: background-color 0.3s;
}
#metadata-profile-select > label {
    color: var(--main-secondary-glow-text);
}
#metadata-profile-select > input[type="radio"]:checked + label {
    color: var(--main-hover-text);
    text-shadow: 
        0 0 3.25px var(--main-glow-text),
        0 0 8.25px var(--main-glow-text),
        0 0 12.5px var(--main-glow-text);
}


#quality-settings > hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--white-text);
    margin-top: 10px;

}
#quality-profile-select {
    padding-top: 10px;
    padding-left:10px;
    padding-bottom:0px;
}
#quality-profile-select > input[type="radio"] {
    opacity:0;
    position: absolute;
    pointer-events: none;
    
}
#quality-profile-select > label{
    display: block;

    cursor: pointer;
    padding-top:2px;
    padding-bottom:2px;
    transition: background-color 0.3s;
}
#quality-profile-select > label {
    color: var(--white-secondary-text);
}
#quality-profile-select > input[type="radio"]:checked + label {
    color: var(--white-text);
    text-shadow: 
        0 0 3.25px var(--white-glow-text),
        0 0 8.25px var(--white-glow-text),
        0 0 12.5px var(--white-glow-text);
}


#folder-settings > hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--main-text);
    margin-top: 10px;
}
#folder-profile-select {
    padding-top: 10px;
    padding-left:10px;
    padding-bottom:0px;
}
#folder-profile-select > input[type="radio"] {
    opacity:0;
    position: absolute;
    pointer-events: none;
    
}
#folder-profile-select > label{
    display: block;
    cursor: pointer;
    padding-top:2px;
    padding-bottom:2px;
    transition: background-color 0.3s;
}
#folder-profile-select > label {
    color: var(--main-secondary-glow-text);
    
}
#folder-profile-select > input[type="radio"]:checked + label {
    color: var(--main-hover-text);
    text-shadow: 
        0 0 3.25px var(--main-glow-text),
        0 0 8.25px var(--main-glow-text),
        0 0 12.5px var(--main-glow-text);
}



.settings-box#download-settings{
    width:fit-content;
    padding:0;
    padding-top:5px;
    padding-left:5px;
    padding-right:10px;
    align-self:flex-end;
}
#download-settings-label{
    display: flex;
    flex-direction:column;
}
    #auto-download-checkbox-container {
        width:fit-content;
        transition: background-color 0.3s;
        font-style:normal;
        margin-left:0.5em;
        display:flex;
        flex-direction:row;
    }
    #auto-download-checkbox-container::before{
        content:"[ ]";
        cursor: pointer;
        color:var(--white-secondary-text);
        transition: 
            text-shadow 0.2s ease-in 0.6s,
            color 0.2s ease-in 0.7s
            ;
    }
    #auto-download-checkbox-container:has(input:checked)::before{
        content:"[◊]";
        color:var(--white-text);
        text-shadow: 
            0 0 3.25px var(--white-glow-text),
            0 0 8.25px var(--white-glow-text),
            0 0 12.5px var(--white-glow-text);

        transition: 
            color 0.2s ease-in 0.1s,
            text-shadow 0.2s ease-in 0.2s
            ;
    }
        #auto-download-checkbox {
            position:absolute;
            height:0;
            width:0;
            opacity:0;
        }
        #download-settings-label-text {
            /* cursor: pointer; */
            color: var(--white-secondary-text);
            border-bottom:1px solid var(--white-secondary-text);
            font-style:normal;
            margin-left:0.5em;
            transition: 
                text-shadow 0.2s ease-in 0.1s,
                color 0.2s ease-in 0.2s,
                border-bottom 0.2s ease-in 0.3s
                ;
        }
        #download-settings-label:has(#auto-download-checkbox:checked)
        #download-settings-label-text {
            color: var(--white-text);
            text-shadow: 
                0 0 3.25px var(--white-glow-text),
                0 0 8.25px var(--white-glow-text),
                0 0 12.5px var(--white-glow-text);
            border-bottom:1px solid var(--white-text);
            transition: 
                border-bottom 0.2s ease-in 0.5s,
                color 0.2s ease-in 0.6s,
                text-shadow 0.2s ease-in 0.7s
                ;

        }
    #download-checkbox-connector{
        color: var(--white-secondary-text);
        font-family: var(--font-family);
        font-size:1em;
        font-weight:300;
        padding-left:13.5px;
        transition: 
            text-shadow 0.2s ease-in 0.4s,
            color 0.2s ease-in 0.5s
            ;

    }
    #download-settings-label:has(#auto-download-checkbox:checked) 
    #download-checkbox-connector{
        color: var(--white-text);
        text-shadow: 
            0 0 3.25px var(--white-glow-text),
            0 0 8.25px var(--white-glow-text),
            0 0 12.5px var(--white-glow-text);
        transition: 
            color 0.2s ease-in 0.3s,
            text-shadow 0.2s ease-in 0.4s
            ;
    }


/* ? FONT STYLES */
pre{
    font-family: var(--font-family);
    font-size:0.8em;
    font-weight:700; 
}
label{
    font-family: var(--font-family-condensed);
    font-size:0.90em;
    font-weight:500;
}
h1{
    font-family: var(--font-family);
    font-size:2.5em;
    font-weight:400;
    letter-spacing: 0.1em;
}
h2{
    font-family: var(--font-family);
    font-size:1.5em;
    font-weight:400;
}
h3 {
    font-family: var(--font-family-condensed);
    font-size:0.95em;
    font-weight:var(--font-bold)
}
h4 {
    font-family: var(--font-family-condensed);
    font-size:0.90em;
    font-weight:var(--font-retina)
}
h5 {
    font-family: var(--font-family-condensed);
    font-size:0.80em;
    font-weight:var(--font-retina)
}


/* ? TEXT COLOR */
pre.default{
    color: var(--main-text);
}
div.white{
    color: var(--white-text);
}

h1.default {
    color: var(--main-text);
}
h1.green{
    color: var(--green-text);
}
h1.red{
    color: var(--red-text);
}

h2.default-secondary {
    color: var(--main-secondary-text);
}

h3.default {
    color: var(--main-text);
}
h3.default-secondary {
    color: var(--main-secondary-text);
}
h3.white{
    color: var(--white-text);
}
h3.white-secondary{
    color: var(--white-secondary-text);
}
h3.white-tertiary{
    color: var(--white-tertiary-text);
}
h3.green{
    color: var(--green-text);
}
h3.red{
    color: var(--red-text);
}

h4.green {
    color: var(--green-text);
}
h4.green-secondary{
    color: var(--green-secondary-text);
}
h4.red {
    color: var(--red-secondary-text);
}
h4.default {
    color: var(--main-text);
}
h4.default-secondary {
    color: var(--main-secondary-text);
}
h4.default-muted{
    color: var(--main-muted-text);
}
h4.default-hover{
    color: var(--main-secondary-text);
}
h4.default-hover:hover{
    color: var(--main-hover-text);
}
h4.white{
    color: var(--white-text);
}
h4.white-secondary{
    color: var(--white-secondary-text);
}
h4.white-tertiary{
    color: var(--white-tertiary-text);
}

h5.green {
    color: var(--green-text);
}
h5.green-secondary{
    color: var(--green-secondary-text);
}
h5.red {
    color: var(--red-secondary-text);
}
h5.default {
    color: var(--main-text);
}
h5.default-secondary {
    color: var(--main-secondary-text);
}
h5.default-muted{
    color: var(--main-muted-text);
}
h5.default-hover{
    color: var(--main-secondary-text);
}
h5.default-hover:hover{
    color: var(--main-hover-text);
}
h5.white{
    color: var(--white-text);
}
h5.white-secondary{
    color: var(--white-secondary-text);
}
h5.white-tertiary{
    color: var(--white-tertiary-text);
}
/* some specific colors */
.text.main-secondary{
    color: var(--main-secondary-text);
}


/* ? GLOW COLORS */ 
div.glow.white{
    text-shadow: 
        0 0 3.25px var(--white-glow-text),
        0 0 8.25px var(--white-glow-text),
        0 0 12.5px var(--white-glow-text);
}
*.white.border-bottom-glow{
    box-shadow: 
        0 4px 5px -2px var(--white-glow-text);
}
img.glow.default{
    filter: drop-shadow(0 0 5px var(--main-glow-text))
            drop-shadow(0 0 10px var(--main-glow-text))
            drop-shadow(0 0 15px var(--main-glow-text));
}

pre.glow.default{
    text-shadow: 
        0 0 8.25px #d4b0bcdd,
        0 0 16.25px #d4b0bcdd,
        0 0 45.5px #d4b0bcdd;
}

h1.glow.default{
    text-shadow: 
        0 0 3.25px var(--main-glow-text),
        0 0 8.25px var(--main-glow-text),
        0 0 12.5px var(--main-glow-text);
}
h1.glow.default-secondary{
    text-shadow: 
        0 0 3.25px var(--main-secondary-glow-text),
        0 0 8.25px var(--main-secondary-glow-text),
        0 0 12.5px var(--main-secondary-glow-text);
}
h2.glow.default-secondary{
    text-shadow: 
        0 0 3.25px var(--main-secondary-glow-text),
        0 0 8.25px var(--main-secondary-glow-text),
        0 0 12.5px var(--main-secondary-glow-text);
}

h3.glow.red{
    text-shadow: 
        0 0 2.5px var(--red-glow-text),
        0 0 5px var(--red-glow-text);
}
h3.glow.green{
    text-shadow: 
        0 0 2.5px var(--green-glow-text),
        0 0 5px var(--green-glow-text);
}
.text.oblique{
    font-style: italic;
}




/* ! UNIVERSAL STUFF STOPS HERE */


/* ? Specific elements */

#main-container {
    display: flex;
    width: 100%;
    flex-direction:column;
    height:100vh;
}


#header{
    padding:2vh;
    height:8em;
    display:flex;
    width:100%;

}
#logo, #header-ghost-for-centering {
    flex:1; 
}
#logo > img {
    filter: grayscale(100%) sepia(100%) hue-rotate(300deg) saturate(150%) brightness(90%)
    drop-shadow(0 0 2.5px var(--main-secondary-glow-text))
    drop-shadow(0 0 7.5px var(--main-secondary-glow-text))
    drop-shadow(0 0 12.5px var(--main-secondary-glow-text));
}
#title {
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-content {
    display: flex;
    flex-direction: row;
    height:calc(96vh - 6em);
}

#left-sidebar {
    width: 20%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    padding-left:20px;
    height:calc(96vh - 6em);
}

#event-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}


#version {
    font-family:var(--font-family-condensed);
    color: var(--muted-text);
}



#middle-content {
    width: 60%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    height:calc(96vh - 6em);
}

#search-section {
    flex-shrink: 0;
}

#results-section {
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#results-section > .scrollable {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.result-item {
    padding: 10px;
    margin-bottom: 10px;
}
.results-box.example {
    margin-bottom:10px;
}
.results-box.example > .matchScore {
    margin-left: auto;
    margin-right: 55px;
}
.scrollable :nth-child(1) {
    margin-top: 0;
}


.scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--white-secondary-text) transparent;
}
#search-results-scrollable.is-scrollable{
    padding-right: 10px;
}


.scrollable::-webkit-scrollbar {
    width: 6px; 
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background: var(--white-secondary-text);
    border-radius: 0;
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--white-text);
}



#right-sidebar {
    width: 20%;
    padding: 10px;
    padding-right:20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#connectivity-section,
#settings-section {
    padding: 10px;
}

.status-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--red-text);
}

.status-indicator.connected {
    background-color: var(--green-text);
}

.setting-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}


#logs-scrollable{
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
#logs-scrollable.is-scrollable{
    padding-right: 0px;
}


#logs-scrollable::-webkit-scrollbar {
    display:none;
}

#logs-scrollable::-webkit-scrollbar-track {
    background: transparent;
    display:none;
}

#logs-scrollable::-webkit-scrollbar-thumb {
    background: var(--white-secondary-text);
    border-radius: 0;
    display:none;
}

#logs-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--white-text);
    display:none;
}