:root {
    --scrollbar-track-bg: #eff2f9;
    --scrollbar-thumb-bg: #eff2f9;
    --scrollbar-thumb-hover-bg: #d1d6e4; 
}

body.dark-only {
    --scrollbar-track-bg: rgba(29, 25, 48, 0.1);
    --scrollbar-thumb-bg: #343046; 
    --scrollbar-thumb-hover-bg: #2b273d; 
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: 3px;
    opacity: 0.1;
}

    ::-webkit-scrollbar-track:hover {
        background: var(--scrollbar-track-bg);
        opacity: 0.1;
    }

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: 3px;
    opacity: 0.1;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover-bg);
        opacity: 0.1;
    }

.addHeight {
    height: 100% !important;
}

.general-back-btn:hover .general-back-btn-th {
    color: gray;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}



.box-shadow-transition {
    -webkit-transition: all 0.50s ease-in-out;
    -moz-transition: all 0.50s ease-in-out;
    -ms-transition: all 0.50s ease-in-out;
    -o-transition: all 0.50s ease-in-out;
}

.box-shadow-below {
    -webkit-box-shadow: 0 8px 12px -6px black;
    -moz-box-shadow: 0 8px 12px -6px black;
    box-shadow: 0 8px 12px -6px black;
}

.box-shadow-below-hover:hover {
    -webkit-box-shadow: 0 12px 18px -6px black;
    -moz-box-shadow: 0 12px 18px -6px black;
    box-shadow: 0 12px 18px -6px black;
}
.general-picture-svg-th:hover .general-picture-svg-icon {
    color: gray;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.general-picture-svg-a:hover .general-picture-svg-th {
    color: gray;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}


#permissionAlert {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    font-family: sans-serif;
    z-index: 9999;
    display: none;
    max-width: 300px;
    opacity:0.9;
}
.isDarkAlert {
    background-color: #343045;
    color: white;
}
.isWhiteAlert {
    background-color: #EFF3F9;
    color: black;
}
    #permissionAlert button {
        background: none;
        border: none;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 16px;
        cursor: pointer;
    }