/* /Pages/Components/AutocompletionComponent/Autocompletion.razor.rz.scp.css */
.autocompletion[b-pc6hm6rfzr]
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color:#101010;
    z-index:1;
}
    .autocompletion input[b-pc6hm6rfzr]
    {
        width: 100%;
        padding: 0;
        margin: 2px;
        border-radius: 25px;
        background-color: #101010;
        color: white;
        padding-left: 10px;
        margin: 8px 8px 0 0;
    }
  .autocompletion label[b-pc6hm6rfzr] {
    /*margin-bottom: 10px;*/ }
    .autocompletion ul[b-pc6hm6rfzr]
    {
        height: 500px;
        list-style: none;
        overflow-y: auto;
        padding-left: 5px;
        width: 100%;
        border: 1px solid;
        margin-top: -1px;
        box-shadow: 0px 2px 15px 2px;
    }
    .autocompletion ul li[b-pc6hm6rfzr] {
      display: inline-flex;
      flex-direction: row;
      border-bottom: 1px solid grey;
      flex-wrap: wrap;
      width: 100%;
      cursor: pointer; }
      .autocompletion ul li .column[b-pc6hm6rfzr] {
        padding: 4px;
        font-size: 24px; }
    .autocompletion ul li:hover[b-pc6hm6rfzr] 
    {
      background-color: #f5f5f5; 
      color:black;
    }
    [b-pc6hm6rfzr] strong
    {
        color: #db0029;
    }

.autocompletion .no-content[b-pc6hm6rfzr]
{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    background-color: #db0029;
    width: 100%;
}

.deploy[b-pc6hm6rfzr] {
  min-height: 300px !important; }

.undeploy[b-pc6hm6rfzr] {
  min-height: 0px !important; }

.btn[b-pc6hm6rfzr]
{
    position: absolute;
    right: -15px;
    top: -8px;
    color: white;
}
.btn:hover[b-pc6hm6rfzr]
{
    color:red;
}
/* /Pages/Components/Bibliotheque.razor.rz.scp.css */
ul[b-ydjbosst0l]
{
    width:100%;
    display: inline-flex;
    flex-direction:row;

}
li[b-ydjbosst0l]
{
    list-style: none;
    width: 100px;
    cursor: pointer;
}
li.selected[b-ydjbosst0l]
{
    border-bottom: 1px solid grey;
}
.list-folder[b-ydjbosst0l]
{
    overflow-y: auto;
}
.folder[b-ydjbosst0l]
{
    display: flex;
    flex-direction: row;
    /*    justify-content: center;*/
    padding: 0.5rem;
    box-sizing: border-box;
    /*    border: 1px solid gray;*/
    /*    margin: 2px 2px 2px 2px;*/
    cursor: pointer;
}

.folder.up[b-ydjbosst0l]
{
    /*background-color: #d7d7d7;*/
}

.folder:hover[b-ydjbosst0l], .btn:hover[b-ydjbosst0l]
{
    background-color: grey;
}
.btn[b-ydjbosst0l]
{
    color:white;
}
.popup-playlist[b-ydjbosst0l]
{

}
/* /Pages/Components/ComponentLoading.razor.rz.scp.css */
.content[b-newprhser9]
{
/*    position: absolute;
    top:0;
    left:0;*/
    height: 60px;
}
.componentloading-progress[b-newprhser9]
{
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    /*    inset: 20vh 0 auto 0;*/
    margin: 0 auto 0 auto;
}
.componentloading-progress circle[b-newprhser9]
{
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.2rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.componentloading-progress circle:last-child[b-newprhser9]
{
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
/* /Pages/Components/CurrentList.razor.rz.scp.css */
.barre-titre[b-o8htjr6tz5]
{
    display: flex;
    justify-content: space-between;
}
.btn-play[b-o8htjr6tz5]
{
    touch-action: manipulation;
    align-self: center;
    min-inline-size: 0;
    padding: 0;
    transition-property: background-color,transform;
    background-color: initial;
    cursor: pointer;
    text-align: center;
    touch-action: manipulation;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.3, 0, 0, 1);
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    will-change: transform;
    border: 0;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inline-block;
    position: relative;
    line-height: normal;
}
.btn-play-span-1[b-o8htjr6tz5]
{
    background-color: rgb(30, 215, 96);
    border-radius: 9999px;
    color: rgb(0, 0, 0);
    font-size: inherit;
    justify-content: center;
    align-items: center;
    transition: inherit;
    display: flex;
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
    block-size: 48px;
    inline-size: 48px;
}
.btn-play:hover .btn-play-span-1[b-o8htjr6tz5]
{
    background-color: rgb(142, 255, 165);
}
    .btn-play-span-2[b-o8htjr6tz5]
    {
        position: static;
        border: 0;
        margin: 0;
        padding: 0;
        color: black;
        display: flex;
    }

    .btn-play .icon[b-o8htjr6tz5]
    {
        fill: currentColor;
        height: 24px;
        width: 24px;
    }

    .files[b-o8htjr6tz5]
    {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        overflow-y: auto;
    }

    .file[b-o8htjr6tz5]
    {
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid #171357;
        margin: 2px 10px 2px 10px;
        width: 300px;
        cursor: pointer;
        position: relative;
        border-radius: 8px;
    }

        .file .content[b-o8htjr6tz5]
        {
            padding: 1rem;
        }

            .file .content:hover[b-o8htjr6tz5]
            {
                background-color: #8bb0cb;
            }

    .title[b-o8htjr6tz5]
    {
        margin-top: 30px;
        min-height: 60px;
    }

    .author[b-o8htjr6tz5]
    {
        background-color: #171357;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        text-align: center;
    }

    .duration[b-o8htjr6tz5]
    {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .loading[b-o8htjr6tz5]
    {
        background-color: green;
    }

    .txt-loading[b-o8htjr6tz5]
    {
        display: none;
        font-style: italic;
    }

    .loading .txt-loading[b-o8htjr6tz5]
    {
        display: block;
    }

    .btn[b-o8htjr6tz5]
    {
        position: absolute;
        top: 0;
        right: 20px;
        color: white;
        height: 32px;
        width: 32px;
    }

        .btn:hover[b-o8htjr6tz5]
        {
            color: #2d2792;
        }

    .list-playlist[b-o8htjr6tz5]
    {
        position: absolute;
        top: calc(50% - 150px);
        left: 50%;
        width: 400px;
        z-index: 2;
        background-color: silver;
        color: black;
        overflow: hidden;
    }

        .list-playlist h4[b-o8htjr6tz5]
        {
            font-size: 1.5rem;
            text-align: center;
            border-bottom: 1px solid black;
            background-color: black;
            color: silver;
        }

        .list-playlist .content[b-o8htjr6tz5]
        {
            overflow-y: auto;
            height: 300px;
        }

        .list-playlist .playlist[b-o8htjr6tz5]
        {
            cursor: pointer;
        }

            .list-playlist .playlist:hover[b-o8htjr6tz5]
            {
                background-color: black;
                color: silver;
            }

    .alert[b-o8htjr6tz5]
    {
        margin: 0;
        padding: 5px;
    }
/* /Pages/Components/Loading.razor.rz.scp.css */

#loading[b-o0a5fc7hga]
{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.loading-progress[b-o0a5fc7hga]
{
    background-color: white;
    border-radius: 20px;
}
.content[b-o0a5fc7hga]
{

}
.loading-progress-text[b-o0a5fc7hga]
{

}
/* /Pages/Components/Player.razor.rz.scp.css */

.player-bar[b-rhec1suagc]
{
    background-color: #181818;
    height: 90px;
    border-top: 1px solid #282828;
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    width: 100%;
}


.now-playing[b-rhec1suagc]
{
    display: flex;
    align-items: center;
    width: 30%;
}

.now-playing-cover[b-rhec1suagc]
{
    width: 56px;
    height: 56px;
    margin-right: 14px;
    border-radius: 4px;
}

.now-playing-info[b-rhec1suagc]
{
    display: flex;
    flex-direction: column;
}

.now-playing-title[b-rhec1suagc]
{
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 3px;
}

.now-playing-artist[b-rhec1suagc]
{
    color: #b3b3b3;
    font-size: 12px;
}

.player-controls[b-rhec1suagc]
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
}

.control-buttons[b-rhec1suagc]
{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.control-button[b-rhec1suagc]
{
    background: none;
    border: none;
    color: #b3b3b3;
    font-size: 14px;
    margin: 0 10px;
    cursor: pointer;
}

    .control-button.play-pause[b-rhec1suagc]
    {
        color: #ffffff;
        background-color: #ffffff;
        color: #000000;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.progress-bar[b-rhec1suagc]
{
    width: 100%;
    display: flex;
    align-items: center;
}

.progress-time[b-rhec1suagc]
{
    color: #b3b3b3;
    font-size: 12px;
    min-width: 40px;
}

.progress-slider[b-rhec1suagc]
{
    flex-grow: 1;
    margin: 0 10px;
    height: 4px;
    background-color: #535353;
    border-radius: 2px;
    position: relative;
}

.progress-current[b-rhec1suagc]
{
    height: 100%;
    background-color: #b3b3b3;
    border-radius: 2px;
    width: 30%; /* This would be dynamic in a real app */
}

.volume-controls[b-rhec1suagc]
{
    display: flex;
    align-items: center;
    width: 30%;
    justify-content: flex-end;
}

.volume-icon[b-rhec1suagc]
{
    color: #b3b3b3;
    margin-right: 10px;
}

.volume-slider[b-rhec1suagc]
{
    width: 100px;
    height: 4px;
    background-color: #535353;
    border-radius: 2px;
    position: relative;
}

.volume-current[b-rhec1suagc]
{
    height: 100%;
    background-color: #b3b3b3;
    border-radius: 2px;
    /* width: 70%;  This would be dynamic in a real app */
}

.control-button:hover[b-rhec1suagc]
{
    background-color: rgb(142, 255, 165);
}
/* /Pages/Components/Push.razor.rz.scp.css */
.push[b-al89l6ru9v]
{
    display: flex;
    border: 1px solid grey;
    border-radius: 20px;
    background-color: #0a270d;
    width: 400px;
    height: 150px;
    margin: 20px;
    color: white;
    padding: 5px;
    flex-direction: column;
}
.push:hover[b-al89l6ru9v]
{
    background-color: #628a66;
}
title[b-al89l6ru9v]
{
    font-size: 32px;
}
.nb[b-al89l6ru9v]
{
    font-size: 14px;
}
/* /Pages/Home.razor.rz.scp.css */
header[b-a5i79b3r1z]
{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}
header[b-a5i79b3r1z], footer[b-a5i79b3r1z]
{
    flex: 0 0 50px; /* hauteur fixe, ne grandit/rétrécit pas */
    width: 100%;
}
main[b-a5i79b3r1z]
{
    flex: 1 1 auto; /* prend tout l'espace restant */
    overflow-y: auto;
    flex-direction: row;
    display: flex;
    overflow: hidden;
}

.zone-list-files[b-a5i79b3r1z]
{
    flex-grow: 2;
    overflow-y: auto;
    border-radius: 8px;
    border-color: #101010;
    background-color: #101010;
    margin: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.zone-bibliotheque[b-a5i79b3r1z]
{
    border-right: 1px solid grey;
    min-width: 250px;
    overflow-y: auto;
    border-radius: 8px;
    background-color: #101010;
    border-color: #101010;
    margin: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* /Pages/Shared/Header.razor.rz.scp.css */
.btn[b-vs5q16is8d]
{
    color: white;
}
a[b-vs5q16is8d]
{
    text-decoration: none;
    width:250px;
}
h1[b-vs5q16is8d] 
{
    font-size: 1.5rem;
    margin: 0;
    color: #fff;
}
.search[b-vs5q16is8d]
{
    position: relative;
    flex-grow: 1;
}
.user[b-vs5q16is8d]
{
    width: 200px;
    text-align: right;
}
/* /Pages/Shared/MainLayout.razor.rz.scp.css */
.page[b-x3va0g2i95]
{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 920px;
    margin-bottom:150px; 
    /*poure le player*/
}

main[b-x3va0g2i95]
{
    flex: 1;
    margin-top: 50px;
}

article[b-x3va0g2i95]
{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: stretch;
    align-items: stretch;
    width:100%;
}

/*@media (max-width: 640.98px)
{
    .page
    {
        flex-direction: row;
    }
}

@media (min-width: 641px) 
{


}*/