/* ==========================================================
   WORLD OF FROSTVOID — USER PANEL
   ========================================================== */

.fv-user-page {
    position: relative;

    min-height: 820px;

    padding:
        175px 22px
        100px;

    overflow: hidden;

    background: #02050a;
}


/* Background */

.fv-user-background {
    position: absolute;
    inset: 0;

    background-image:
        url('../img/reborn/home/hero.png');

    background-size: cover;
    background-position: center;

    transform: scale(1.05);

    filter:
        brightness(.34)
        saturate(.55);
}

.fv-user-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,5,10,.69),
            rgba(2,5,10,.91) 55%,
            rgba(2,5,10,.97)
        );

    backdrop-filter:
        blur(3px);
}


/* container */

.fv-user-container {
    position: relative;
    z-index: 5;

    width: min(1200px, 100%);

    margin: 0 auto;
}


/* ==========================================================
   HEADING
   ========================================================== */

.fv-user-heading {
    margin-bottom: 30px;

    text-align: center;
}

.fv-user-heading > span {
    color: #71859b;

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .28em;
}

.fv-user-heading h1 {
    margin:
        8px 0 0;

    color: #dce5ed;

    font-family: Georgia, serif;

    font-size: 38px;
    font-weight: 400;

    letter-spacing: .14em;
}

.fv-user-heading p {
    margin: 12px 0 0;

    color: #65788d;

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .13em;
}

.fv-user-heading-line {
    width: 260px;

    margin:
        16px auto
        0;

    display: flex;

    align-items: center;

    gap: 9px;
}

.fv-user-heading-line i {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87,175,225,.50)
        );
}

.fv-user-heading-line i:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(148,76,198,.50),
            transparent
        );
}

.fv-user-heading-line b {
    width: 8px;
    height: 8px;

    transform:
        rotate(45deg);

    background: #73889c;
}


/* ==========================================================
   LAYOUT
   ========================================================== */

.fv-user-layout {
    display: grid;

    grid-template-columns:
        260px
        minmax(0,1fr);

    gap: 20px;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.fv-user-sidebar {
    align-self: start;

    padding:
        16px 10px
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(7,14,25,.97),
            rgba(3,7,14,.985)
        );

    border:
        1px solid rgba(93,130,164,.25);

    box-shadow:
        0 20px 45px rgba(0,0,0,.32);
}

.fv-user-sidebar-title {
    padding: 10px 11px 17px;

    display: flex;

    gap: 12px;

    align-items: center;
}

.fv-user-sidebar-title > i {
    color: #65a9d4;

    font-size: 17px;
}

.fv-user-sidebar-title span {
    display: block;

    color: #607388;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .16em;
}

.fv-user-sidebar-title strong {
    display: block;

    margin-top: 2px;

    color: #d0dae4;

    font-family: Georgia, serif;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .07em;
}


/* nav */

.fv-user-nav-link,
.fv-user-nav-sub a {
    position: relative;

    min-height: 46px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #8d9eb1 !important;

    text-decoration: none !important;

    font-size: 12px;

    transition:
        color .18s ease,
        background .18s ease;
}

.fv-user-nav-link > i:first-child,
.fv-user-nav-sub a > i:first-child {
    width: 18px;

    color: #70889f;

    text-align: center;
}

.fv-user-nav-link:hover,
.fv-user-nav-link.is-active,
.fv-user-nav-sub a:hover,
.fv-user-nav-sub a.is-active {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(42,107,153,.14),
            rgba(80,46,119,.08)
        );
}

.fv-user-nav-link.is-active::before,
.fv-user-nav-sub a.is-active::before {
    content: "";

    position: absolute;

    left: -10px;
    top: 0;
    bottom: 0;

    width: 2px;

    background: #59b7e9;

    box-shadow:
        0 0 10px rgba(75,170,225,.45);
}

.fv-user-nav-arrow {
    margin-left: auto;

    color: #4f6072;

    font-size: 8px;
}

.fv-user-nav-parent {
    min-height: 43px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #94a5b7;

    font-size: 12px;
}

.fv-user-nav-sub {
    padding-left: 9px;
}


/* logout */

.fv-user-sidebar-separator {
    height: 1px;

    margin: 10px 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}

.fv-user-sidebar-logout {
    min-height: 43px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #ad7188 !important;

    text-decoration: none !important;

    font-size: 12px;
}

.fv-user-sidebar-logout:hover {
    color: #df9db7 !important;

    background:
        rgba(132,47,80,.08);
}


/* ==========================================================
   MAIN
   ========================================================== */

.fv-user-main {
    min-width: 0;
}


/* account card */

.fv-account-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,15,26,.98),
            rgba(4,8,16,.99)
        );

    border:
        1px solid rgba(91,129,166,.27);

    box-shadow:
        0 24px 55px rgba(0,0,0,.34);
}

.fv-account-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #58b8eb,
            transparent 42%,
            transparent 58%,
            #9550cb
        );
}

.fv-account-card-glow {
    position: absolute;

    top: -80px;
    right: -60px;

    width: 300px;
    height: 230px;

    border-radius: 50%;

    background:
        rgba(111,55,159,.08);

    filter: blur(45px);
}


/* profile */

.fv-account-profile {
    position: relative;

    padding:
        30px 32px;

    display: grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    align-items: center;

    gap: 20px;
}

.fv-account-avatar {
    position: relative;

    width: 76px;
    height: 76px;
}

.fv-account-avatar img {
    width: 76px;
    height: 76px;

    object-fit: cover;

    border-radius: 50%;

    border:
        1px solid rgba(87,177,226,.45);

    box-shadow:
        0 0 22px rgba(67,153,211,.12);
}

.fv-account-online {
    position: absolute;

    right: 3px;
    bottom: 5px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    border:
        2px solid #07101c;

    background: #52da85;

    box-shadow:
        0 0 8px rgba(82,218,133,.5);
}

.fv-account-welcome > span {
    color: #657b91;

    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .17em;
}

.fv-account-welcome h2 {
    margin:
        4px 0 6px;

    color: #dce5ed;

    font-family: Georgia, serif;

    font-size: 28px;
    font-weight: 400;

    letter-spacing: .05em;
}

.fv-account-welcome p {
    max-width: 570px;

    margin: 0;

    color: #7e8fa2;

    font-size: 12px;

    line-height: 1.55;
}

.fv-account-edit {
    min-width: 125px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #a9bed1 !important;

    border:
        1px solid rgba(73,147,198,.40);

    background:
        rgba(8,29,46,.45);

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .08em;

    text-decoration: none !important;
}

.fv-account-edit:hover {
    color: #fff !important;

    border-color:
        rgba(87,180,231,.70);
}


/* stats */

.fv-account-stats {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

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

.fv-account-stat {
    min-height: 92px;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-right:
        1px solid rgba(255,255,255,.05);
}

.fv-account-stat:last-child {
    border-right: 0;
}

.fv-account-stat-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #8096aa;

    border:
        1px solid rgba(96,132,165,.22);

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

.fv-account-stat-icon--frost {
    color: #68bee9;
}

.fv-account-stat-icon--void {
    color: #ae71d3;
}

.fv-account-stat span {
    display: block;

    color: #65778a;

    font-size: 9px;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.fv-account-stat strong {
    display: block;

    margin-top: 4px;

    color: #cbd6e0;

    font-family: Georgia, serif;

    font-size: 12px;
    font-weight: 400;
}


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

.fv-user-section {
    margin-top: 20px;
}

.fv-user-section-heading {
    margin-bottom: 11px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}

.fv-user-section-heading span {
    color: #596c7f;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .18em;
}

.fv-user-section-heading h3 {
    margin: 3px 0 0;

    color: #cbd6df;

    font-family: Georgia, serif;

    font-size: 16px;
    font-weight: 400;

    letter-spacing: .08em;
}

.fv-user-section-heading > i {
    color: #65798e;

    font-size: 7px;
}

.fv-user-quick-grid {
    display: grid;

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

    gap: 10px;
}

.fv-user-quick-card {
    min-height: 92px;

    padding:
        17px 18px;

    display: grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    align-items: center;

    gap: 12px;

    color: #8fa1b3 !important;

    border:
        1px solid rgba(89,126,160,.22);

    background:
        linear-gradient(
            145deg,
            rgba(7,14,24,.96),
            rgba(3,8,15,.98)
        );

    text-decoration: none !important;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.fv-user-quick-card > i {
    color: #67a9d1;

    font-size: 18px;
}

.fv-user-quick-card strong {
    display: block;

    color: #c8d3dd;

    font-family: Georgia, serif;

    font-size: 11px;

    letter-spacing: .08em;
}

.fv-user-quick-card span {
    display: block;

    margin-top: 4px;

    color: #68798c;

    font-size: 10px;

    line-height: 1.4;
}

.fv-user-quick-card b {
    color: #536d83;

    font-size: 15px;
}

.fv-user-quick-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(81,165,214,.42);
}

.fv-user-quick-card--void > i {
    color: #a76ed0;
}

.fv-user-quick-card--void:hover {
    border-color:
        rgba(151,79,201,.42);
}


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

@media (max-width: 950px) {

    .fv-user-layout {
        grid-template-columns: 1fr;
    }

    .fv-account-stats {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .fv-user-quick-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .fv-user-page {
        padding:
            145px 13px
            70px;
    }

    .fv-user-heading h1 {
        font-size: 27px;
    }

    .fv-account-profile {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .fv-account-avatar {
        margin: 0 auto;
    }

    .fv-account-edit {
        margin: 0 auto;
    }

    .fv-account-stats {
        grid-template-columns: 1fr;
    }

    .fv-account-stat {
        border-right: 0;

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

}


/* ==========================================================
   FROSTVOID — PROFILE
   ========================================================== */

.fv-profile-form {
    width: 100%;
}


/* card */

.fv-profile-card {
    position: relative;

    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    min-height: 390px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,15,26,.985),
            rgba(3,8,16,.995)
        );

    border:
        1px solid rgba(91,129,166,.28);

    box-shadow:
        0 25px 60px rgba(0,0,0,.36);
}

.fv-profile-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #58b8eb,
            transparent 45%,
            transparent 55%,
            #9850cb
        );
}


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

.fv-profile-avatar-panel {
    position: relative;

    padding:
        36px 25px;

    text-align: center;

    border-right:
        1px solid rgba(255,255,255,.055);

    background:
        radial-gradient(
            circle at center 30%,
            rgba(48,114,160,.08),
            transparent 55%
        );
}

.fv-profile-small-title {
    display: block;

    color: #607489;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .20em;
}

.fv-profile-avatar-panel h3 {
    margin:
        4px 0 23px;

    color: #cbd6df;

    font-family: Georgia, serif;

    font-size: 16px;
    font-weight: 400;

    letter-spacing: .10em;
}


/* avatar */

.fv-profile-avatar-wrap {
    position: relative;

    width: 150px;
    height: 150px;

    margin: 0 auto 20px;
}

.fv-profile-avatar-wrap > img {
    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 50%;

    border:
        1px solid rgba(86,176,226,.46);

    box-shadow:
        0 0 28px rgba(63,151,210,.12);
}


/* upload overlay */

.fv-profile-avatar-upload {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color: transparent;

    border-radius: 50%;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.fv-profile-avatar-upload:hover {
    color: #e7f3fb;

    background:
        rgba(3,8,15,.73);
}

.fv-profile-avatar-upload input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.fv-profile-avatar-upload i {
    font-size: 18px;
}

.fv-profile-avatar-upload span {
    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .12em;
}

.fv-profile-avatar-note {
    margin: 0;

    color: #627487;

    font-size: 10px;

    line-height: 1.5;
}

.fv-profile-avatar-note i {
    margin-right: 5px;

    color: #6695b5;
}


/* ==========================================================
   PROFILE FIELDS
   ========================================================== */

.fv-profile-fields {
    padding:
        32px 34px
        34px;
}

.fv-profile-section-title {
    margin-bottom: 25px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}

.fv-profile-section-title span {
    color: #5f7184;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .18em;
}

.fv-profile-section-title h3 {
    margin:
        4px 0 0;

    color: #cdd8e1;

    font-family: Georgia, serif;

    font-size: 17px;
    font-weight: 400;

    letter-spacing: .08em;
}

.fv-profile-section-title > i {
    color: #657a90;

    font-size: 7px;
}


/* grid */

.fv-profile-grid {
    display: grid;

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

    gap:
        23px 18px;
}


/* labels */

.fv-profile-field > label {
    display: block;

    margin-bottom: 7px;

    color: #8d9daf;

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* input */

.fv-profile-input,
.fv-profile-select-wrap {
    position: relative;

    height: 50px;

    display: flex;

    align-items: center;

    border:
        1px solid rgba(84,130,168,.29);

    background:
        rgba(4,10,19,.83);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.fv-profile-input:focus-within,
.fv-profile-select-wrap:focus-within {
    border-color:
        rgba(87,176,229,.56);

    box-shadow:
        0 0 18px rgba(54,139,199,.09);
}


.fv-profile-input > i:first-child,
.fv-profile-select-wrap > i:first-child {
    width: 48px;

    flex: 0 0 48px;

    color: #71889d;

    text-align: center;

    border-right:
        1px solid rgba(255,255,255,.045);
}


/* text input */

.fv-profile-input input {
    width: 100%;
    height: 100%;

    min-width: 0;

    padding:
        0 14px;

    color: #d5dee7;

    border: 0;

    outline: 0;

    background: transparent;

    font-size: 13px;

    box-shadow: none;
}


/* disabled */

.fv-profile-input-disabled {
    opacity: .72;

    background:
        rgba(4,8,15,.70);
}

.fv-profile-input-disabled input {
    color: #8392a2;
}


/* email edit */

.fv-profile-edit-email {
    width: 45px;
    height: 100%;

    flex: 0 0 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #8272a2 !important;

    border-left:
        1px solid rgba(255,255,255,.045);

    text-decoration: none !important;

    transition:
        color .2s ease,
        background .2s ease;
}

.fv-profile-edit-email:hover {
    color: #c395e1 !important;

    background:
        rgba(111,55,156,.08);
}


/* ==========================================================
   SELECT
   ========================================================== */

.fv-profile-select-wrap select {
    width: 100%;
    height: 100%;

    padding:
        0 38px 0 14px;

    color: #d5dee7;

    border: 0;

    outline: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    font-size: 13px;

    cursor: pointer;
}

.fv-profile-select-wrap select option {
    color: #d5dee7;

    background: #07101c;
}

.fv-profile-select-arrow {
    position: absolute;

    right: 14px;

    color: #677b90;

    font-size: 9px;

    pointer-events: none;
}


/* ==========================================================
   PROFILE ACTION
   ========================================================== */

.fv-profile-actions {
    margin-top: 18px;

    display: flex;

    justify-content: flex-end;
}

.fv-profile-submit {
    min-width: 210px;
    height: 48px;

    padding:
        0 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #dbe7f1;

    border:
        1px solid rgba(92,132,178,.48);

    background:
        linear-gradient(
            100deg,
            #081827,
            #0d2335 36%,
            #1b1a35 60%,
            #321643
        );

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .12em;

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(0,0,0,.25);

    transition:
        transform .2s ease,
        border-color .2s ease,
        filter .2s ease;
}

.fv-profile-submit:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(103,171,213,.66);

    filter:
        brightness(1.08);
}


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

@media (max-width: 900px) {

    .fv-profile-card {
        grid-template-columns: 1fr;
    }

    .fv-profile-avatar-panel {
        border-right: 0;

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

}


@media (max-width: 650px) {

    .fv-profile-fields {
        padding:
            28px 20px;
    }

    .fv-profile-grid {
        grid-template-columns: 1fr;
    }

    .fv-profile-actions {
        justify-content: stretch;
    }

    .fv-profile-submit {
        width: 100%;
    }

}


/* ==========================================================
   FROSTVOID — SECURITY
   ========================================================== */

.fv-security-card,
.fv-security-history {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,15,26,.985),
            rgba(3,8,16,.995)
        );

    border:
        1px solid rgba(91,129,166,.27);

    box-shadow:
        0 22px 55px rgba(0,0,0,.32);
}

.fv-security-card::before,
.fv-security-history::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #58b8eb,
            transparent 43%,
            transparent 57%,
            #9850cb
        );
}


/* ==========================================================
   SECURITY CARD HEADING
   ========================================================== */

.fv-security-card-heading,
.fv-security-history-heading {
    padding:
        21px 24px;

    display: flex;

    align-items: center;
    justify-content: space-between;

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

.fv-security-card-heading span,
.fv-security-history-heading span {
    display: block;

    color: #607488;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .18em;
}

.fv-security-card-heading h3,
.fv-security-history-heading h3 {
    margin:
        4px 0 0;

    color: #d0dbe4;

    font-family: Georgia, serif;

    font-size: 17px;
    font-weight: 400;

    letter-spacing: .08em;
}

.fv-security-card-heading > i {
    color: #778ba0;

    font-size: 17px;
}


/* ==========================================================
   SECURITY OPTIONS
   ========================================================== */

.fv-security-options {
    display: grid;

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

.fv-security-option {
    min-height: 104px;

    padding:
        20px 22px;

    display: grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    align-items: center;

    gap: 15px;

    color: #9cadbf !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

.fv-security-option:first-child {
    border-right:
        1px solid rgba(255,255,255,.055);
}

.fv-security-option:hover {
    background:
        linear-gradient(
            90deg,
            rgba(43,107,153,.09),
            rgba(88,48,127,.06)
        );
}

.fv-security-option-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(92,128,161,.24);

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

    font-size: 17px;
}

.fv-security-option-icon--frost {
    color: #63b8e6;
}

.fv-security-option-icon--void {
    color: #ad70d1;
}

.fv-security-option-text strong {
    display: block;

    color: #ccd7e1;

    font-family: Georgia, serif;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .05em;
}

.fv-security-option-text span {
    display: block;

    margin-top: 5px;

    color: #718397;

    font-size: 11px;

    line-height: 1.45;
}

.fv-security-option-arrow {
    color: #536b82;

    font-size: 10px;

    transition:
        transform .2s ease,
        color .2s ease;
}

.fv-security-option:hover
.fv-security-option-arrow {
    transform:
        translateX(3px);

    color: #8eb7d5;
}


/* ==========================================================
   HISTORY
   ========================================================== */

.fv-security-history {
    margin-top: 18px;
}


/* header badge */

.fv-security-history-badge {
    min-height: 30px;

    padding:
        0 11px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #71869a;

    border:
        1px solid rgba(91,127,160,.22);

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

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .11em;
}


/* ==========================================================
   HISTORY FRAME
   ========================================================== */

.fv-security-history-frame {
    position: relative;

    padding:
        0 5px 34px;
}


/*
   ESTA ES LA CLAVE:
   altura fija + scroll interno
*/

.fv-security-history-scroll {
    position: relative;

    height: 330px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        #506d84
        rgba(255,255,255,.025);
}


/* Chrome scrollbar */

.fv-security-history-scroll::-webkit-scrollbar {
    width: 8px;
}

.fv-security-history-scroll::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,.018);
}

.fv-security-history-scroll::-webkit-scrollbar-thumb {
    border:
        2px solid #050b13;

    background:
        linear-gradient(
            180deg,
            #397ba4,
            #594174,
            #753d8d
        );
}

.fv-security-history-scroll::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #4e9dcc,
            #674b87,
            #8d4aa7
        );
}


/* ==========================================================
   TABLE
   ========================================================== */

.fv-security-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.fv-security-table thead {
    position: sticky;

    top: 0;

    z-index: 10;

    background:
        rgba(5,11,20,.98);

    backdrop-filter:
        blur(6px);
}

.fv-security-table th {
    height: 45px;

    padding:
        0 16px;

    color: #718397;

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

    font-family: Georgia, serif;

    font-size: 9px;
    font-weight: 400;

    letter-spacing: .11em;

    text-align: left;

    text-transform: uppercase;
}

.fv-security-table th:nth-child(1) {
    width: 25%;
}

.fv-security-table th:nth-child(2) {
    width: 12%;

    text-align: center;
}

.fv-security-table th:nth-child(3) {
    width: 35%;
}

.fv-security-table th:nth-child(4) {
    width: 28%;
}


.fv-security-table td {
    height: 49px;

    padding:
        0 16px;

    color: #91a3b5;

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

    font-size: 11px;

    vertical-align: middle;
}

.fv-security-table tbody tr {
    transition:
        background .16s ease;
}

.fv-security-table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(40,100,146,.06),
            rgba(89,46,130,.045)
        );
}

.fv-security-table td:nth-child(2) {
    text-align: center;
}


/* status */

.fv-security-status {
    width: 22px;
    height: 22px;

    margin: 0 auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 9px;
}

.fv-security-status--success {
    color: #06140c;

    background: #54d79a;

    box-shadow:
        0 0 10px rgba(84,215,154,.12);
}

.fv-security-status--failed {
    color: #190609;

    background: #d66571;

    box-shadow:
        0 0 10px rgba(214,101,113,.10);
}


/* ip */

.fv-security-ip {
    color: #758ba0;

    font-family:
        monospace;

    font-size: 10px;
}


/* empty */

.fv-security-empty {
    height: 120px !important;

    color: #5f7184 !important;

    text-align: center;
}


/* ==========================================================
   SCROLL HINT
   ========================================================== */

.fv-security-scroll-hint {
    position: absolute;

    left: 50%;
    bottom: 8px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    color: #52667a;

    font-family: Georgia, serif;

    font-size: 7px;

    letter-spacing: .13em;

    pointer-events: none;
}

.fv-security-scroll-hint i {
    color: #6f8397;

    font-size: 7px;
}


/* ==========================================================
   BACKEND PAGINATION
   ========================================================== */

.fv-security-pagination {
    margin-top: 13px;

    display: flex;

    justify-content: center;
}

.fv-security-pagination .uk-pagination {
    margin: 0;

    gap: 5px;
}

.fv-security-pagination .uk-pagination > * > * {
    min-width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #7f91a4;

    border:
        1px solid rgba(87,124,158,.22);

    background:
        rgba(5,11,20,.72);

    font-size: 10px;
}

.fv-security-pagination
.uk-pagination > .uk-active > * {
    color: #fff;

    border-color:
        rgba(91,172,221,.50);

    background:
        linear-gradient(
            135deg,
            rgba(34,107,151,.35),
            rgba(91,46,129,.28)
        );
}


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

@media (max-width: 750px) {

    .fv-security-options {
        grid-template-columns: 1fr;
    }

    .fv-security-option:first-child {
        border-right: 0;

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

    .fv-security-history-scroll {
        height: 360px;

        overflow-x: auto;
    }

    .fv-security-table {
        min-width: 650px;
    }

}