/**
 * WebEngine CMS
 * MU HUAYRA
 * Profile Player
 * @version 1.0
 */

/* =========================================================
   TITULO
   ========================================================= */

.page-title {
    margin-bottom: 28px;
}

.page-title span {
    color: #b71919;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .3px;
}


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.profiles_player_card {

    width: 100%;
    max-width: 100%;

    margin: 0 auto 25px;

    padding: 0;

    box-sizing: border-box;

    background: #161616;

    border: 1px solid #b88a43;

    border-radius: 8px;

    box-shadow: 0 4px 14px rgba(0,0,0,.18);

    overflow: hidden;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.profiles_player_content {

    width: 100%;

    padding: 24px;

    box-sizing: border-box;
}


/* =========================================================
   CABECERA DEL PERSONAJE
   ========================================================= */

.player-profile-header {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 120px;
}


/* =========================================================
   AVATAR
   ========================================================= */

.player-profile-avatar {

    width: 105px;
    height: 105px;

    min-width: 105px;

    margin-right: 22px;

    padding-right: 22px;

    box-sizing: content-box;

    display: flex;

    align-items: center;

    justify-content: center;

    border-right: 1px solid rgba(184,138,67,.35);
}


/* Imagen */

.player-profile-avatar img {

    width: 85px;
    height: 85px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
}


/* =========================================================
   ESTADO ONLINE / OFFLINE
   ========================================================= */

.player-profile-avatar.online {

    position: relative;
}

.player-profile-avatar.online:after,
.player-profile-avatar.offline:after {

    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    right: 15px;
    bottom: 12px;

    border: 2px solid #161616;
}


/* Online */

.player-profile-avatar.online:after {

    background: #35b653;

    box-shadow: 0 0 7px rgba(53,182,83,.5);
}


/* Offline */

.player-profile-avatar.offline:after {

    background: #d94b4b;
}


/* =========================================================
   INFORMACION DEL PERSONAJE
   ========================================================= */

.player-profile-main {

    flex: 1;

    min-width: 0;
}


/* Nombre */

.player-profile-name {

    display: block;

    color: #b71919;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 28px;

    font-weight: bold;

    line-height: 32px;

    margin-bottom: 4px;
}


/* Clase */

.player-profile-class {

    display: block;

    color: #999999;

    font-size: 13px;

    line-height: 18px;

    margin-bottom: 18px;
}


/* Estado */

.player-profile-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #999999;

    font-size: 11px;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: .5px;
}


/* =========================================================
   INFORMACION DEL PERSONAJE
   ========================================================= */

.player-profile-info {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.08);
}


/* Cada dato */

.player-profile-stat {

    padding: 10px 12px;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 6px;
}


/* Label */

.player-profile-stat-label {

    display: block;

    color: #c8a96b;

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: .6px;

    margin-bottom: 4px;
}


/* Valor */

.player-profile-stat-value {

    display: block;

    color: #dddddd;

    font-size: 14px;

    font-weight: bold;
}


/* =========================================================
   TABLA DE INFORMACION ORIGINAL
   ========================================================= */

.profiles_player_table_info {

    width: 100%;

    margin-top: 20px;

    border-collapse: collapse;
}


.profiles_player_table_info tr {

    border-bottom: 1px solid rgba(255,255,255,.06);
}


.profiles_player_table_info tr:last-child {

    border-bottom: none;
}


.profiles_player_table_info td {
    padding: 10px 5px;
    color: #dddddd;
    font-size: 15px;
    line-height: 20px;
}

.profiles_player_table_info td:first-child {
    width: 45%;
    color: #b71919;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.profiles_player_table_info td:last-child {
    color: #dddddd;
    font-size: 15px;
    font-weight: normal;
}


/* =========================================================
   ESTADO
   ========================================================= */

.profiles_player_table_info .isonline {

    color: #35b653 !important;

    font-weight: bold;
}


.profiles_player_table_info .isoffline {

    color: #d94b4b !important;

    font-weight: bold;
}


/* =========================================================
   LINKS
   ========================================================= */

.profiles_player_card a {

    color: #dddddd;

    text-decoration: none;
}


.profiles_player_card a:hover {

    color: #b71919;

    text-decoration: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:767px) {

    .profiles_player_content {

        padding: 18px;
    }


    .player-profile-header {

        align-items: flex-start;
    }


    .player-profile-avatar {

        width: 75px;

        min-width: 75px;

        height: 90px;

        padding-right: 15px;

        margin-right: 15px;
    }


    .player-profile-avatar img {

        width: 65px;

        height: 65px;
    }


    .player-profile-name {

        font-size: 23px;

        line-height: 27px;
    }


    .player-profile-info {

        grid-template-columns: repeat(2, 1fr);
    }

}

.profiles_player_table_info td:first-child i {
    color: #b71919;
    margin-right: 8px;
}