@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

@font-face {
    font-family: "MrsEavesPetiteCaps";
    src: url("/Content/fonts/mrseavespetitecaps.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Garamond";
    src: url("../Content/fonts/EBGaramond-VariableFont_wght.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}


.body-content {
    /*margin-top: 0.5em;*/
    /*padding-left: 15px;
    padding-right: 15px;*/
    padding-inline: 0.3% !important;
    min-width: 100%;
    min-height: 100% !important;
    flex: 1;
}

.body-content-margin {
    /*margin-top: 140px;*/
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    max-width: 280px;
}

.disabled {
    color: gray;
}

/*inizio prova notify*/
.notification-panel {
    position: fixed;
    top: 20%; /* Adjust vertical position as needed */
    right: 0; /* Panel is anchored at the right */
    width: 300px; /* Set panel width */
    height: 200px; /* Set panel height */
    background-color: #b5651d; /* Brown background */
    color: #fff;
    overflow-y: auto;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%); /* Shifted fully off-screen to the right */
    z-index: 1000; /* Lower z-index than toggle button */
}

    /* When expanded, slide panel into view */
    .notification-panel.expanded {
        transform: translateX(0);
    }

    /* Panel content styling */
    .notification-panel .panel-content {
        padding: 1em;
        font-family: 'Garamond', serif;
        font-size: 1rem;
    }

/* Toggle Button: Fixed, always visible at the right edge */
.notification-toggle {
    position: fixed;
    top: 20%; /* Align vertically with the panel */
    right: 10px; /* Slight margin from right edge */
    width: 45px;
    height: 45px;
    background-color: #b5651d; /* Matching panel's base color */
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3000; /* Higher than the panel so it's always on top */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

    /* Toggle button hover/active styles */
    .notification-toggle:hover,
    .notification-toggle:active {
        background-color: #ea8e3d;
    }
/*fine prova notify*/

.groana-bianca {
    background-image: url(../Content/images/groana_white.png);
    width: 2em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 2em;
    min-width: 2em;
    min-height: 1em;
}

.login-container {
    margin-inline: 2.5em;
    border: 0.2em solid rgba(54, 32, 16, 0.5);
    padding: 1.5em;
    border-radius: 8px;
    width: fit-content;
    background: rgba(54, 32, 16, 0.07);
    min-height: 30em;
}

.create-container {
    margin-inline: 3%;
    margin-bottom: 6em;
    border: 0.2em solid rgba(54, 32, 16, 0.5);
    padding: 1.5em;
    border-radius: 8px;
    width: fit-content;
    background: rgba(54, 32, 16, 0.07);
    font-family: 'Garamond';
}

.beni-container {
    margin-inline: 4%;
    margin-bottom: 2em;
    margin-top: 2em;
    border: 0.2em solid rgba(54, 32, 16, 0.5);
    padding: 1em 0.5em;
    border-radius: 8px;
    width: 30em;
    background: rgba(54, 32, 16, 0.07);
    font-family: 'Garamond';
}

.login-button-container {
    height: fit-content;
    width: fit-content;
    display: flex;
    border-radius: 7px;
    background: white;
    position: relative;
    opacity: 0.80;
}

.login-button {
    border-radius: 7px;
    background: linear-gradient(133deg, #ea8e3d 0.00%, #b929c2 100.00%);
    position: relative;
    top: 0.15em;
    left: 0.15em;
}

.generic-button {
    border-radius: 7px;
    background: transparent;
    border: 2px solid #333;
    color: #333;
    padding: 0.75em 1.5em;
    font-size: 1rem;
    font-weight:normal;
    transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
    --hover-bg: #ea8e3d;
}
    .generic-button:hover,
    .generic-button:active {
        background-color: var(--hover-bg);
        color: #fff;
        font-weight:bold;
    }

.login-form-group {
    margin-bottom: 2% !important;
    font-family: 'Garamond' !important;
    font-size: 1em !important;
}

.create-form-group {
    margin-top: 0.5em !important;
    margin-bottom: 0.9em !important;
}

.nav-gapper {
    gap: 2em;
    margin: 0 !important;
    padding-left: 0 !important;
}


.icon-button {
    display: inline-block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-size: contain;
    vertical-align: middle;
    margin: 5px;
    background-image: url(../Content/images/edit-text.png);
    background-repeat: no-repeat;
}

.management-button {
    display: inline-block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-size: contain;
    vertical-align: middle;
    margin: 5px;
    background-image: url(../Content/images/warehouse.svg);
    background-repeat: no-repeat;
}


.action-link {
    display: inline-block;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
}

.edit-icon {
    background-image: url('../Content/images/edit-text.png');
}

.delete-icon {
    background-image: url('../Content/images/delete-ic.png');
    display: inline-block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-size: contain;
    vertical-align: middle;
    margin: 5px;
    background-repeat:no-repeat;
}

.setprincipale-icon {
    background-image: url('../Content/images/ribbon-badge.png');
}

.hide-icon {
    background-image: url('../Content/images/hide-icon.png');
}

.setpub-icon {
    background-image: url('../Content/images/people-icon.png');
}

.profile-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 11.38%;
    width: 100%;
    background-color: #fff;
    margin: 0pc 0px 1.5em 0px;
}

.profile-pic {
    aspect-ratio: 1 / 1;
    border-color: #ffffff;
    border-width: 4px;
    border-style: solid;
    border-radius: 60px;
    filter: drop-shadow(-10px 13px 20px rgba(0, 0, 0, 0.07));
    background: #f7f7f7;
    margin-right: 2%;
    margin-left: 8.42%;
    width: 17em;
}

    .profile-pic img {
        object-fit: cover;
        border-radius: 8px;
        width: 100%;
        height: 100%;
    }

.profile-info {
    /* max-width: 60%; */
    flex-grow: 1;
    width: 20em;
    /* margin-top: 58px; */
    padding: 0em 1em 1em 1em;
    /*gap: 0.7em;*/
    display: flex;
    flex-direction: column;
    padding-top: 5em;
}

.username {
    /*position: absolute;*/
    width: 100%;
    /* height: 103px; */
    font-family: "MrsEavesPetiteCaps";
    font-size: 190%;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #343434;
}

.stats {
    display: flex;
    /* margin-bottom: 4.20%; */
    flex-direction: column;
    /* margin-top: 4.5em; */
    min-width: 7em;
    max-width: 15em;
    margin-left: 5.8em;
}

.stat {
    width: 100%;
    border-width: 0.2em;
    border-style: solid;
    border-radius: 7px;
    margin: 0.50em 0.50em 0.50em 0.0em;
    padding: 1%;
    display: flex;
    justify-content: space-between;
}

    .stat span {
        text-align: right;
    }

.pa {
    background: #d45d5f;
    border-color: #e49193;
}

.puc {
    border-color: #75a5b1;
    background: #4f8897;
}

.edit-profile {
    font-family: "Garamond";
    font-size: 1.3em;
    font-weight: normal;
    line-height: 50%;
    font-style: normal;
    text-align: right;
    color: #84481c;
    text-decoration: none;
    max-width: 44%;
    padding-inline: 1em 0.5em;
    margin-top: 3.5em;
}

.back-button {
    font-family: "Garamond";
    font-size: 1.5em;
    font-weight: normal;
    line-height: 2em;
    font-style: normal;
    text-align: left;
    margin: 0.5%;
}

    .back-button a {
        color: #84481c !important;
        text-decoration: none;
    }

.news {
    background-color: rgba(54, 32, 16, 0.07);
    padding: 1%;
    /* margin-top: 20px; */
    border-left: 2em solid #84481c;
    font-size: 30%;
    color: #555;
    width: 33.5%;
    aspect-ratio: 1 / 0.55;
}

    .news p {
        font-family: "Garamond";
        font-size: 400%;
        font-weight: normal;
        line-height: 200%;
        font-style: normal;
        text-align: right;
        color: #84481c;
        margin: 1% 0;
    }

.novita-container {
    width: 100%;
    margin-bottom: 2.23%;
    height: 35vh;
}

/* Title bar of Novità section */
.novita-header {
    background-color: #b1b1b1;
    color: #fff;
    text-align: left;
    padding: 0px 10.73%;
    font-size: 140%;
    font-weight: bold;
    height: 6.33%;
    display: flex;
    align-items: center;
    font-family: 'Garamond';
    border-bottom: 0.2em solid #cbcbcb;
}


/* Content area of Novità section */
.novita-content {
    background-color: #fafafa;
    padding: 1.5%;
    color: #000;
    overflow: hidden;
    height: 93.67%;
    border-bottom: 0.3em solid #cbcbcb;
}

.box-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    padding: 1.2% 0px 1.1% 0px;
    margin-inline: 2em;
    height: 20vh;
}

.box {
    position: relative;
    width: 18%;
    height: 100%;
    background-size: cover;
    color: white;
    text-align: left;
    font-weight: bold;
    background-position-x: -1em;
    padding: 0.5em 0px 0px 0.2em;
    font-family: 'Garamond';
}

    .box .number {
        font-size: 32px;
        /*margin-bottom: 65px;*/
    }

    .box .name {
        font-size: 18px;
    }

.first-container {
    width: 66%;
    display: flex;
    flex-direction: column;
}

.second-container {
    display: flex;
    width: 50em;
    padding: 1%;
}


.ammo-box {
    background-image: url('/Content/images/counter_belgograd.svg');
    background-color: #fc7272;
}

.sand-box {
    background-image: url('/Content/images/counter_terengrat.svg');
    background-color: #ffaa33;
}

.brat-box {
    background-image: url('/Content/images/counter_naomh.svg');
    background-color: #55d19b;
}

.chinese-box {
    background-image: url('/Content/images/counter_hyadzgaar.svg');
    background-color: #5568d1;
}

.match-box {
    background-image: url('/Content/images/counter_lyndersin.svg');
    background-color: #712a64;
}

.member-id {
    font-size: 18px;
    color: #666;
    margin: 10px 0;
    font-family: "MrsEavesPetiteCaps";
}

.table {
    width: 75%;
    min-width: 50%;
    margin-inline: 10%;
    background: rgba(54, 32, 16, 0.09);
    box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.07);
}

    .table tbody {
        border: 1px rgba(54,32,16,0.9 );
    }

    .table td {
        align-content: center;
    }

.table-bordered th,
.table-bordered td {
    border: 0.090em solid #b7b7b7;
    height: 0;
    position: relative;
    width: 20%
}

.table-bordered tr {
    position: relative;
}

.table-bordered th::after,
.table-bordered td::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: #b7b7b7;
}

.buttons-container {
    display: flex;
    flex-direction: row;
    padding-right: 0px !important;
    width: 100% !important;
    gap: 0.3em;
    justify-content: center;
}

.btn-icon {
    display: flex;
    text-decoration: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 2em;
    border: 0px;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-color: inherit;
    margin-top: 4px;
}

.edit-link::before {
    content: "";
    background-image: url('/Content/images/edit-text.png');
}


/*ctrCreateBasePersonaggio*/
.cbp-form-horizontal {
    margin-inline: 5%;
    width: fit-content;
    height: fit-content;
    border: 1px solid #eeeeee;
    border-radius: 5%;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12));
    background: #fbfbfb2b;
    padding: 2% 5% 2% 3%;
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.cbp-form-control {
    border: 1px solid #ebebeb !important;
    border-radius: 10px;
    filter: drop-shadow(0px 2px 2.5px rgba(0,0,0,0.16));
    background: #ffffff;
    padding: 5px 8px 5px 10px;
    width: 100%;
}

.cbp-button-container {
    width: fit-content;
    height: fit-content;
    background: linear-gradient(133deg, #ea8e3d 0.00%, #b929c2 100.00%) !important;
    border-radius: 7px;
    /*padding: 0px 1px 2px 0px;*/
    display: flex;
}

.cbp-button {
    border-radius: 7px;
    background: #ffffff !important;
    color: black;
    position: relative;
    opacity: 0.80;
    top: -2.5px;
    left: -2.5px;
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
    border: 0px !important;
}


    .cbp-button:hover {
        color: black !important;
    }
/*AmbitoSelector*/
.as-form-check {
    min-height: fit-content !important;
    align-items: center;
}

.as-form-check-input {
    border: 1px solid #707070;
    background: #ffffff;
    min-width: 1.5em;
    min-height: 1.5em;
    border-radius: 50% !important;
    transition: background 500ms ease 0s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/Content/images/not-checked-green.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}


    .as-form-check-input:checked {
        border: 2px solid #3e9142;
        background: #4aaa51 !important;
        background-image: url(/Content/images/maybe-this.svg) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        fill: white;
    }

        .as-form-check-input:checked::after {
        }
/*ctrPA*/
/*.profile-PA {*/
/*display: flex;
    align-items: center;
    background-color: #F8B757;*/ /* The yellow background color */
/*border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
    position: relative;*/
/*    position: absolute;
    width: 100%;
    height: 173px;*/
/*opacity: 0.60;*/
/*background: linear-gradient(180deg, rgba(255, 255, 255, 1) 25.23%, rgba(255, 204, 133, 255) 25%, rgba(255, 204, 133, 255) 83%, rgba(255, 255, 255, 1) 83.15%);
    display: flex;
    margin-bottom: 2.87%;
}*/

.profile-PA {
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 25.23%, var(--dynamic-color) 26%, var(--dynamic-color) 83%, rgba(255, 255, 255, 1) 84% );
    display: flex;
    margin-bottom: 2.87%;
    position: relative;
}

    /* Using ::before to add the SVG as a separate layer */
    .profile-PA::before {
        content: "";
        position: absolute;
        right: 10px;
        top: 58%;
        transform: translateY(-50%);
        width: 15%;
        height: 100%;
        background-image: var(--svg-url);
        background-size: 150% 200%;
        background-repeat: no-repeat;
        filter: brightness(0) invert(1);
        background-position: right center;
        color: white;
    }


.profile-pic-PA {
    width: 368px;
    height: 368px;
    background-color: #f7f7f7;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #666;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 4px solid #ffffff;
    filter: drop-shadow(-10px 13px 20px rgba(0,0,0,0.07 ));
    margin-left: 200px;
    margin-right: 80px;
}

.advancements-info {
    display: flex;
    flex-direction: row;
    margin-top: 4em;
    gap: 2em;
}


.advancement {
    display: flex;
    /*margin-bottom: 2%;*/
    margin-inline: 0%;
    font-size: 1.4em;
    font-family: "MrsEavesPetiteCaps";
    color: #808080;
    align-items: center;
}

    .advancement::after {
        content: attr(data-label);
    }

.advancement-number {
    font-size: 36px;
    font-weight: bold;
    margin-right: 10px;
    color: #8E6936 !important;
    font-size: 1.5em;
    font-family: "MrsEavesPetiteCaps";
}

.advancement span {
    font-size: 1.5em;
    color: #ad9a81;
    font-family: "MrsEavesPetiteCaps";
}

.profile-container:before {
    /*content: "";*/
    /*background-image: url('dragon.png');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    opacity: 0.2;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    border-radius: 12px;
}

.profile-container > * {
    z-index: 1;
}

/*<hr> element style*/
.hr-text {
    position: relative;
    display: flex;
    align-items: center;
    margin: 1em 0;
}

    .hr-text::before {
        content: "";
        position: absolute;
        top: 55%;
        left: 0;
        right: 0;
        border-bottom: 0.15em solid #999;
    }

    .hr-text span {
        position: relative;
        margin-left: 3%;
        font-size: 170%;
        color: #666;
        background-color: #fff;
        padding: 0 1%;
        z-index: 1;
    }

.h5-text {
    display: flex;
    align-items: center;
    margin-bottom: 1.2em;
    margin-top: 0.5em;
}

    .h5-text::before {
        margin-right: 0.5rem;
        width: 5%;
        content: "";
        border-bottom: 2px solid #ccc;
    }

    .h5-text::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid #ccc;
        margin-left: 0.5rem;
    }


.profile-pic-PA {
    height: 9em;
    width: 9em;
    aspect-ratio: 1 / 1;
    border-color: #ffffff;
    border-width: 4px;
    border-style: solid;
    border-radius: 55px;
    filter: drop-shadow(-10px 13px 20px rgba(0, 0, 0, 0.07));
    background: #f7f7f7;
    margin: 1.2em !important;
}

.middle-text {
    position: relative;
    display: flex;
    align-items: center;
    margin: 2% 0;
}

    .middle-text::before {
        content: "";
        position: absolute;
        top: 55%;
        left: 0;
        right: 0;
        border-bottom: 0.1em solid #999;
    }

    .middle-text span {
        position: relative;
        margin-left: 8.5%;
        font-size: 150%;
        color: #000000;
        background-color: #fff;
        padding: 0 10px;
        z-index: 1;
        opacity: 0.95;
        font-family: "MrsEavesPetiteCaps";
    }


#tabPers {
    margin-left: 9.06%;
    display: flex;
    gap: 2em;
    border-bottom: 0px;
    margin-bottom: 0.93%;
}

#tabPersContent {
    margin-inline: 9.06%;
    height: 27.26%;
    width: 81.88%;
}

.tabPers-button {
    border: 1px solid #eeeeee !important;
    border-radius: 33px !important;
    color: black !important;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12));
    padding: 8px 65px 12px 85px;
    background-color: #ffffff;
    transition: background-color 0.5s ease 0s;
}

    .tabPers-button.active {
        background-color: #ffcc84 !important;
    }

.accordion-item {
    margin-bottom: 15px !important;
    border: 0px !important;
    min-width: 40% !important;
    max-width: 65% !important;
}

    .accordion-item:first-of-type {
        margin-bottom: 15px !important;
        border: 0px !important;
        min-width: 40% !important;
        max-width: 65% !important;
    }

.accordion-button {
    background-color: #ffffff !important;
    --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
    --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
    --bs-accordion-btn-icon-transform: rotate(0deg) !important;
}

    .accordion-button.collapsed {
        border-radius: 10px !important;
        border: 1px solid #ebebeb !important;
        filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12)) !important;
        --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
        --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
        --bs-accordion-btn-icon-transform: rotate(0deg) !important;
    }

    .accordion-button:not(.collapsed) {
        border-radius: 10px 10px 0px 0px !important;
        border: 1px solid #ebebeb !important;
        filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12)) !important;
        --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
        --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
        --bs-accordion-btn-icon-transform: rotate(0deg) !important;
    }

.accordion-body {
    border-radius: 0px 0px 10px 10px !important;
    font-family: 'Garamond' !important;
    background: #ebebeb !important;
}

.lv-button {
    font-size: 2.5em;
    margin-inline: 45%;
    background: #ffffff;
    font-family: 'MrsEavesPetiteCaps';
    font-style: normal;
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    align-items: center;
    margin-top: 10%;
}

.lv-zero-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 55%, rgba(255, 255, 255, 1) 55%);
    background-position-x: -5px;
    background-repeat: no-repeat;
}

.lv-one-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 59%, rgba(255, 255, 255, 1) 59%);
    background-position-x: -5px;
    background-repeat: no-repeat;
}

.lv-two-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 52%, rgba(255, 255, 255, 1) 52%);
    background-position-x: -8px;
    background-repeat: no-repeat;
}

.lv-three-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 47%, rgba(255, 255, 255, 1) 47%);
    background-position-x: -12px;
    background-repeat: no-repeat;
}

.lv-four-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 50%, rgba(255, 255, 255, 1) 50%);
    background-position-x: -12px;
    background-repeat: no-repeat;
}

.lv-five-saved {
    color: #3c9142;
    background: radial-gradient(circle, rgba(74, 170, 81, 1) 54%, rgba(255, 255, 255, 1) 54%);
    background-position-x: -7px;
    background-repeat: no-repeat;
}

.lv-button span {
    text-align: center;
    position: relative;
    color: black !important;
}

.lv-button-selectable {
    font-size: 2.5em;
    margin-inline: 45%;
    background: #ffffff;
    font-family: 'MrsEavesPetiteCaps';
    font-style: normal;
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    align-items: center;
    color: #707070;
    margin-top: 10%;
}

    .lv-button-selectable span {
        text-align: center;
        position: relative;
        color: #c9c9c9 !important;
    }

.lv-button-selected {
    font-size: 2.5em;
    margin-inline: 45%;
    background: #ffffff;
    font-family: 'MrsEavesPetiteCaps';
    font-style: normal;
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    align-items: center;
    color: #707070;
}

    .lv-button-selected span {
        text-align: center;
        position: relative;
        color: black !important;
    }


.roman-zero {
    left: -25px;
    font-size: 0.6em;
}

.roman-one {
    left: -24px;
    font-size: 0.6em;
}

.roman-two {
    left: -28px;
    font-size: 0.6em;
}

.roman-three {
    left: -32.5px;
    font-size: 0.6em;
}

.roman-four {
    left: -32px;
    font-size: 0.6em;
}

.roman-five {
    left: -27.5px;
    font-size: 0.6em;
}

.question-patch-container {
    text-decoration: none;
    display: flex;
    position: relative;
    width: fit-content;
    /*top: -50%;*/
    margin-right: 15%;
}

.ctrAb-form-check {
    display: flex;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
    justify-content: space-between;
    min-width: 90%;
    gap: 0.3em;
}

.nav_container {
    background: linear-gradient(135deg, #ffbb00 0.00%, #a900ff 100.00%);
    height: 3.8em;
    min-width: 100%;
    margin-bottom:1em;
}

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

    [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        pointer-events: none;
    }

    [data-tooltip]:hover::after {
        opacity: 1;
    }

.tooltip-container {
    position: relative;
    display: inline-block;
}

    .tooltip-container::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        pointer-events: none;
    }

    .tooltip-container:hover::after {
        opacity: 1;
    }

.flex-columns {
    display: flex;
    justify-content: center;
    gap: 2em;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.5em;
}

.footer-column a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

    .footer-column a:hover {
        text-decoration: underline;
    }

.footer-column i {
    margin-right: 0.5em;
}

.beni-modify {
    display: flex;
    gap: 0.3em;
}

.virgolette {
    font-family: 'Garamond';
}

    .virgolette::before {
        content: "«";
    }

    .virgolette::after {
        content: "»";
    }

/*------------------------------------------------------*/
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table {

    background: rgba(54, 32, 16, 0.09);
    box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.07);
    border-collapse: collapse;
}
    .responsive-table td {
        align-content: center;
    }


.table-bordered th,
.table-bordered td {
    border: 0.09em solid #b7b7b7;
    position: relative;
}

    
    .table-bordered th::after,
    .table-bordered td::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 1px;
        background-color: #b7b7b7;
    }

.sticky-col {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    left: 0;
    background-color: rgba(54, 32, 16, 0.09);
    z-index: 1;
    border-right: 0.09em solid #b7b7b7; 
}

@media (max-width: 530px) {
    
}

/*------------------------------------------------------*/
@media (max-width: 880px) {
    .custom-collapse .navbar-collapse {
        display: none !important;
    }

        .custom-collapse .navbar-collapse.show {
            display: block !important;
        }

    .custom-collapse .navbar-toggler {
        display: block !important;
    }
}

@media (min-width: 881px) {
    .custom-collapse .navbar-collapse {
        display: flex !important;
    }

    .custom-collapse .navbar-toggler {
        display: none !important;
    }
}

@media only screen and (max-width: 840px) {
     .news {
        background-color: rgba(54, 32, 16, 0.07);
        padding: 2%;
        border-left: 2em solid #84481c;
        font-size: 25%;
        color: #555;
        aspect-ratio: 1 / 0.5;
        width: 100%;
        max-height: 15vh
    }

        .news p {
            font-family: "Garamond";
            font-size: 300%;
            font-weight: normal;
            line-height: 200%;
            font-style: normal;
            text-align: right;
            color: #84481c;
            margin: 1% 0;
        }

    .profile-pic {
        height: 9em;
        width: 9em;
        aspect-ratio: 1 / 1;
        border-color: #ffffff;
        border-width: 4px;
        border-style: solid;
        border-radius: 55px;
        filter: drop-shadow(-10px 13px 20px rgba(0, 0, 0, 0.07));
        background: #f7f7f7;
        margin: 0px !important;
    }

    .first-container {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .second-container {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .profile-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0px;
        padding: 1.5em 0.1em 0.2em 0.5em;
    }

    .username {
        width: 100%;
        font-family: "MrsEavesPetiteCaps";
        font-size: 1em;
        font-weight: normal;
        font-style: normal;
        text-align: left;
        color: #343434;
    }

    .stats {
        display: flex;
        flex-direction: column;
        width: 15em;
        margin: 1.5em 1em 0.5em 0.3em;
        max-width: 100%;
    }

    .stat {
        width: 100%;
        border-width: 0.2em;
        border-style: solid;
        border-radius: 7px;
        margin: 0.50em 1em 0.50em 0.1em;
        padding: 2%;
        display: flex;
        justify-content: space-between;
    }

    .edit-profile {
        font-family: "Garamond";
        font-size: 0.9em;
        font-weight: normal;
        line-height: 100%;
        font-style: normal;
        text-align: left;
        color: #84481c;
        text-decoration: none;
        max-width: 100%;
        padding-inline: 0;
    }

    .body-content {
        /*margin-top: 0.5em;*/
        /*padding-left: 15px;
    padding-right: 15px;*/
        padding-inline: 0.3% !important;
        min-width: 100%;
        min-height: 100% !important;
        flex: 1;
    }
}

@media only screen and (max-width: 932px) and (orientation: portrait) {

    .generic-button {
        border-radius: 7px;
        background: transparent;
        border: 2px solid #333;
        color: #333;
        padding: 0.75em 1.5em;
        font-size: 0.8rem;
        font-weight: normal;
        transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
        --hover-bg: #ea8e3d;
    }

        .generic-button:hover,
        .generic-button:active {
            background-color: var(--hover-bg);
            color: #fff;
            font-weight: bold;
        }

    .beni-container{
        margin-bottom: 2em;
        margin-top: 2em;
        border: 0.2em solid rgba(54, 32, 16, 0.5);
        padding: 0em 0.5em;
        border-radius: 8px;
        width: 80%;
        background: rgba(54, 32, 16, 0.07);
        font-family: 'Garamond';
        margin-inline: 4%;
    }

    /*------------------------------------------------------*/
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .responsive-table {
        width: 150% !important;
        min-width: 80% !important;
        margin-inline: 10%;
        background: rgba(54, 32, 16, 0.09);
        box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.07);
        border-collapse: collapse;
    }

        .responsive-table td {
            align-content: center;
        }


    .table-bordered th,
    .table-bordered td {
        border: 0.09em solid #b7b7b7;
        position: relative;
    }


        .table-bordered th::after,
        .table-bordered td::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 1px;
            background-color: #b7b7b7;
        }

    th.sticky-col,
    td.sticky-col {
        position: sticky;
        left: 0;
        background: #b7b7b7;
    }

        th.sticky-col::after,
        td.sticky-col::after {
            content: "";
            position: absolute;
            right: -5px;
            top: 0;
            bottom: -1px;
            width: 5px;
            border-left: 1px solid #b7b7b7;
            background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
        }

        th.sticky-col::before,
        td.sticky-col::before {
            content: "";
            position: absolute;
            left: -5px;
            top: 0;
            bottom: -1px;
            width: 5px;
            border-right: 1px solid #b7b7b7;
            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
        }
    /*------------------------------------------------------*/

    .profile-PA {
        background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 25.23%, var(--dynamic-color) 26%, var(--dynamic-color) 83%, rgba(255, 255, 255, 1) 84% );
        display: flex;
        margin-bottom: 2.87%;
        position: relative;
    }

        .profile-PA::before {
            content: "";
            position: absolute;
            right: 0.1em;
            top: 57%;
            transform: translateY(-50%);
            min-width: 16%;
            height: 100%;
            /*background-image: var(--svg-url);
            background-size: 190% 200%;
            background-repeat: no-repeat;
            filter: brightness(0) invert(1);
            background-position: right center;
            color: white;*/
        }

    .profile-pic {
        height: 9em;
        width: 9em;
        aspect-ratio: 1 / 1;
        border-color: #ffffff;
        border-width: 4px;
        border-style: solid;
        border-radius: 55px;
        filter: drop-shadow(-10px 13px 20px rgba(0, 0, 0, 0.07));
        background: #f7f7f7;
        margin: 0px !important;
    }

    .advancements-info {
        display: flex;
        flex-direction: row;
        margin-top: 2em;
        gap: 2em;
    }

    .advancement {
        display: flex;
        margin-bottom: 2%;
        margin-inline: 0%;
        font-size: 1.3em;
        font-family: "MrsEavesPetiteCaps";
        color: #808080;
        align-items: center;
    }

    .beni-table {
        font-size: 50%;
    }

    #tabPers {
        margin-left: 1.06%;
        display: flex;
        gap: 1em;
        border-bottom: 0px;
        margin-bottom: 0.93%;
    }

    #tabPersContent {
        margin-inline: 9.06%;
        height: 27.26%;
        width: 100%;
    }

    .body-content {
        margin-top: 1.5em;
        padding-left: 2px;
        padding-right: 2px;
        max-width: 10em;
    }

    .profile-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0px;
        padding: 1.5em 0.1em 0.2em 0.5em;
    }

    .beni-modify {
        display: flex;
        gap: 0.5em;
    }

    .username {
        width: 100%;
        font-family: "MrsEavesPetiteCaps";
        font-size: 1em;
        font-weight: normal;
        font-style: normal;
        text-align: left;
        color: #343434;
    }

    .stats {
        display: flex;
        flex-direction: column;
        width: 15em;
        margin: 1.5em 1em 0.5em 0.3em;
        max-width: 100%;
    }

    .stat {
        width: 100%;
        border-width: 0.2em;
        border-style: solid;
        border-radius: 7px;
        margin: 0.50em 1em 0.50em 0.1em;
        padding: 2%;
        display: flex;
        justify-content: space-between;
    }

    .news {
        background-color: rgba(54, 32, 16, 0.07);
        padding: 2%;
        border-left: 2em solid #84481c;
        font-size: 25%;
        color: #555;
        aspect-ratio: 1 / 0.5;
        width: 100%;
        max-height: 15vh
    }

        .news p {
            font-family: "Garamond";
            font-size: 300%;
            font-weight: normal;
            line-height: 200%;
            font-style: normal;
            text-align: right;
            color: #84481c;
            margin: 1% 0;
        }

    .nav_container {
        background: linear-gradient(135deg, #ffbb00 0.00%, #a900ff 100.00%);
        height: 3.8em;
        max-width: 100%;
        margin-bottom:1em
    }

    .profile-container {
        display: flex;
        height: 11.38%;
        width: 100%;
        background-color: #fff;
        margin: 0px 0px 1.5em 0px;
        flex-direction: column;
        padding-inline-start: 0.8em;
        align-content: start;
        flex-wrap: wrap;
    }

    .edit-profile {
        font-family: "Garamond";
        font-size: 0.9em;
        font-weight: normal;
        line-height: 100%;
        font-style: normal;
        text-align: left;
        color: #84481c;
        text-decoration: none;
        max-width: 100%;
        padding-inline: 0;
    }

    .novita-header {
        background-color: #b1b1b1;
        color: #fff;
        text-align: left;
        padding: 0px 10.73%;
        font-size: 120%;
        font-weight: bold;
        height: 6.33%;
        display: flex;
        align-items: center;
        font-family: 'Garamond';
        border-bottom: 0.2em solid #cbcbcb;
    }

    .novita-content {
        background-color: #fafafa;
        padding: 1.5%;
        color: #000;
        overflow: hidden;
        height: 93.67%;
        border-bottom: 0.3em solid #cbcbcb;
    }

    .box-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 100%;
        padding: 0.5em 1.5em 0.5em 1em;
        margin-inline: 0em 0.8em;
        height: 66vh;
        flex-direction: column;
        gap: 0.3em;
    }

    .box {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        color: white;
        text-align: left;
        font-weight: bold;
        background-position-x: 0em;
        padding: 0.5em 0px 0px 0.2em;
        font-family: 'Garamond';
    }

    .first-container {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .second-container {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .delete-icon {
        background-image: url('../Content/images/delete-ic.png');
        display: inline-block;
        width: 2em;
        aspect-ratio: 1 / 0.6;
        background-size: contain;
        vertical-align: middle;
        margin: 5px;
        background-repeat: no-repeat;
    }

    .table {
        width: 98%;
        min-width: 50%;
        margin-inline: 1%;
        background: rgba(54, 32, 16, 0.09);
        box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.07);
        font-size: 60%;
    }

        .table tbody {
            border: 1px rgba(54,32,16,0.9 );
        }

    .table-bordered th,
    .table-bordered td {
        border: 0.090em solid #b7b7b7;
        height: 0;
        position: relative;
        width: 20%;
    }

    .table-bordered tr {
        position: relative;
    }

    .table-bordered th::after,
    .table-bordered td::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 1px;
        background-color: #b7b7b7;
    }


    .icon-button {
        display: inline-block;
        width: 2em;
        aspect-ratio: 1 / 1;
        background-size: contain;
        vertical-align: middle;
        margin: 5px;
        background-image: url(../Content/images/edit-text.png);
        background-repeat: no-repeat;
    }

    .nav-gapper {
        gap: 0.5em;
    }

    .buttons-container {
        display: flex;
        flex-direction: row;
        padding-right: 0px !important;
        width: 100% !important;
        gap: 0.3em;
    }

    .btn-icon {
        display: inline-block;
        text-decoration: none;
        font-weight: bold;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 20px 25px;
        border: 0px;
        width: 2em;
        height: 2em;
        padding: 0px;
        background-color: inherit;
    }

    .novita-container {
        width: 100%;
        margin-bottom: 2.23%;
        height: 25vh;
    }

    .create-container {
        margin-inline: 8%;
        margin-bottom: 2em;
        border: 0.2em solid rgba(54, 32, 16, 0.5);
        padding: 1em;
        border-radius: 8px;
        width: 83%;
        background: rgba(54, 32, 16, 0.07);
        font-family: 'Garamond';
    }

    .hr-text {
        position: relative;
        display: flex;
        align-items: center;
        margin: 1em 0;
    }

        .hr-text::before {
            content: "";
            position: absolute;
            top: 55%;
            left: 0;
            right: 0;
            border-bottom: 0.15em solid #999;
        }

        .hr-text span {
            position: relative;
            margin-left: 3%;
            font-size: 130%;
            color: #666;
            background-color: #fff;
            padding: 0 1%;
            z-index: 1;
        }

    .profile-PA {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 10.23%, var(--dynamic-color) 11%, var(--dynamic-color) 99%, rgba(255, 255, 255, 1) 100%);
        display: flex;
        margin-bottom: 2.87%;
        position: relative;
    }

        .profile-PA::before {
            content: "";
            position: absolute;
            right: 10px;
            top: 58%;
            transform: translateY(-50%);
            width: 15%;
            height: 100%;
            background-image: none;
            background-size: 150% 200%;
            background-repeat: no-repeat;
            filter: brightness(0) invert(1);
            background-position: right center;
            color: white;
        }

    .profile-pic-PA {
        height: 6em;
        width: 6em;
        aspect-ratio: 1 / 1;
        border-color: #ffffff;
        border-width: 4px;
        border-style: solid;
        border-radius: 35px;
        filter: drop-shadow(-10px 13px 20px rgba(0, 0, 0, 0.07));
        background: #f7f7f7;
        margin: 0.3em !important;
        position: relative;
        top: 1.5em;
    }

    .advancements-info {
        display: flex;
        flex-direction: column;
        margin-top: 2em;
        gap: 0em;
    }

    .advancement {
        display: flex;
        margin-bottom: 2%;
        margin-inline: 0%;
        font-size: 1.1em;
        font-family: "MrsEavesPetiteCaps";
        color: #808080;
        align-items: center;
    }

        .advancement::after {
            content: attr(data-label-mobile);
        }

        .advancement span {
            font-size: 1em;
            color: #ad9a81;
            font-family: "MrsEavesPetiteCaps";
        }

    #tabPersContent {
        margin-inline: 2.06%;
        height: 27.26%;
        width: 100%;
    }

    .tabPers-button {
        border: 1px solid #eeeeee !important;
        border-radius: 33px !important;
        color: black !important;
        filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12));
        padding: 0.5em 1.5em;
        background-color: #ffffff;
        transition: background-color 0.5s ease 0s;
    }

        .tabPers-button.active {
            background-color: #ffcc84 !important;
        }

    .accordion-item {
        margin-bottom: 15px !important;
        border: 0px !important;
        width: 95% !important;
    }

        .accordion-item:first-of-type {
            margin-bottom: 15px !important;
            border: 0px !important;
            width: 95% !important;
        }

    .question-patch-container {
        text-decoration: none;
        display: flex;
        position: relative;
        width: fit-content;
        -
        /*top: -50%;*/
        margin-right: 15%;
        left: 3em;
    }

    .accordion-button {
        background-color: #ffffff !important;
        --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
        --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
        --bs-accordion-btn-icon-transform: rotate(0deg) !important;
        padding: 0.5em 0.3em;
    }

        .accordion-button.collapsed {
            border-radius: 10px !important;
            border: 1px solid #ebebeb !important;
            filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12)) !important;
            --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
            --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
            --bs-accordion-btn-icon-transform: rotate(0deg) !important;
        }

        .accordion-button:not(.collapsed) {
            border-radius: 10px 10px 0px 0px !important;
            border: 1px solid #ebebeb !important;
            filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.12)) !important;
            --bs-accordion-btn-active-icon: url(/Content/images/info-circle.svg) !important;
            --bs-accordion-btn-icon: url(/Content/images//info-circle-fill.svg) !important;
            --bs-accordion-btn-icon-transform: rotate(0deg) !important;
        }
}