/*
==========================================================

PremiumZone

Version :
1.0.0

File :
assets/css/music.css

Description :
PremiumZone Music Account

==========================================================
*/

/* ==========================================================
   ROOT
========================================================== */

.pz-profile-music{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:12px;

}

/* ==========================================================
   ACCOUNT
========================================================== */

.pz-profile-account{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    min-height:58px;

    padding:12px 16px;

    border:1px solid rgba(

        0,

        243,

        255,

        .25

    );

    background:rgba(

        255,

        255,

        255,

        .02

    );

    transition:.2s;

}

/* ==========================================================
   HOVER
========================================================== */

.pz-profile-account:hover{

    border-color:#00F3FF;

    box-shadow:

        0 0 12px

        rgba(

            0,

            243,

            255,

            .25

        );

}

/* ==========================================================
   PROVIDER
========================================================== */

.pz-profile-provider{

    color:#00F3FF;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/* ==========================================================
   BUTTON
========================================================== */

.pz-profile-connect{

    min-width:150px;

    height:36px;

    padding:0 14px;

    border:1px solid #00F3FF;

    background:transparent;

    color:#00F3FF;

    cursor:pointer;

    transition:.2s;

}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.pz-profile-connect:hover{

    background:#00F3FF;

    color:#000;

}

/* ==========================================================
   CONNECTED
========================================================== */

.pz-profile-connect.connected{

    border-color:#39FF88;

    color:#39FF88;

}

.pz-profile-connect.connected:hover{

    background:#39FF88;

    color:#000;

}

/* ==========================================================
   PRIMARY
========================================================== */

.pz-profile-connect.primary{

    border-color:#FFD84D;

    color:#FFD84D;

}

.pz-profile-connect.primary:hover{

    background:#FFD84D;

    color:#000;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(

max-width:768px

){

.pz-profile-account{

    flex-direction:column;

    align-items:flex-start;

}

.pz-profile-connect{

    width:100%;

}

}