@font-face {
    font-family: "Zeronero";
    src: url("../../skin_2016/font/zeronero.woff") format("woff");
  }

  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }



  body.locked {
      height: 100vh;
      overflow: hidden;
  }
          .bar_avatar {
      width: 50px;
      height: 50px;
      background-size: 50px;
  }
  .copertina {
    width: 1300px;
    margin: 0 auto;
    text-align: center;
    height: 530px;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.copertina .box_copertina img {
    min-width: 100%;
    position:relative;

}
.box_copertina {
    overflow: hidden;
    height: 400px;
    border-left: 10px solid var(--nl-color-darkgrey);
    border-right: 10px solid var(--nl-color-darkgrey);
}
.edit_copertina {
    position: absolute;
    top: 60%;
    right: 2%;
    font-size: 20px;
    cursor: pointer;
    font-variant: small-caps;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.edit_copertina:hover {
    background: var(--nl-color-white)!important;
    color: var(--nl-basecolor)!important;
}

.top_bottom {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    background: var(--nl-color-darkgrey);
    border-radius: 0 0 10px 10px;
}

.profile {
    position: relative;
    margin: auto;
    width: 1300px;
    padding: 0 45px 45px 45px;
    border-radius:10px;
}
.profile_avatar {
    width: 230px;
    height: 230px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 11px solid var(--nl-color-darkgrey);
    overflow: hidden;
    cursor: pointer;
}
  .avatar_img {
    position: relative;
    background: var(--nl-color-darkest);
    min-width: 100%;
    min-height: 100%;
}
  
  .profile_nickname {
    position: relative;
    width: calc(50% - 115px);
    height: 130px;
    float: right;
}
  
.profile_nickname h1 {
    position: absolute;
    left: 0;
    top: 0%;
    font-size: 50px;
    font-variant: small-caps;
    font-family: "Raleway";
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
}
.profilo_ff {
    border-radius: 5px;
    color: var(--nl-basecolor)!important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(50% + 150px);
    padding: 20px 30px;
}
a.discord_btn {
    display: block;
    width: 200px;
    overflow: hidden;
    height: 69px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    color: var(--nl-basecolor);
    text-decoration: none;
}
a.discord_btn div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.discord_btn img {
    max-width: 100%;
}
.ruolo {
    display: block;
    font-size: 18px;
    position: absolute;
    top: 60px;
    font-family: 'Open Sans';
    font-variant: no-common-ligatures;
    color: var(--nl-basecolor);
    font-weight: normal;
}

.impostazioni_profilo {
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 5%;
    font-family: 'Open Sans';
    font-weight: normal;
    border-radius: 5px;
}


.profile_selector {
    font-size: 12pt;
    text-align: center;
    padding-top: 20px;
}
  
  
  .profile_selector ul {
      display: block;
      padding: 0;
      list-style-type: none;
      margin: 0 auto;
  }
  
  
  .profile_selector ul li {
      display: inline-block;
      cursor: pointer;
      letter-spacing: 1px;
      margin: 0;
      padding: 10px 10px;
  }
  .profile_selector ul:not(.profile_selector_schedapg) li:hover {
    border-bottom: 2px solid var(--nl-basecolor);
    font-weight: bold;
}
  
  .profile_selector ul:not(.profile_selector_schedapg) li.selected {
      color: var(--nl-basecolor);
      border-bottom: 2px solid;
      font-weight: bold;
  }
  
  .profile_selector ul li.selected:hover {
      background: none!important
  }
 
  .profile_gallery .w3-col {
      width: 32.2%;
      padding-bottom: 32.2%;
      margin: 0.555%;
      overflow: hidden;
      position: relative;
  }
  .profile_gallery .w3-col img {
      max-width: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .profile_left, .profile_right {
      padding: 1em;
      background: var(--nl-color-darkest);
      margin-top: 5%;
      float:left;
      border-radius: 10px;
  }
  .profile_left {
      width:32%;
  }
  .profile_left h2 {
    text-transform: none;
    font-variant: normal;
    font-family: 'Open Sans';
    font-weight: bold;
    display: inline-block;
    width: auto;
}

a.see_all_img {
    display: inline-block;
    font-size: 13pt;
    color: #9c2308;
    font-family: 'Roboto';
    line-height: 37pt;
    cursor: pointer;
}
.see_all_img:hover {
    color: var(--nl-basecolor);
}

  .profile_right {
      margin-left: 3%;
      width: 65%;
  }

  .profile_selector_left {
    width: 32%;
    float: left;
    display: none;
}

.profile_selector_right {
    width: 68%;
    float: right;
}

.profile_selector_left .w3-row.w3-left {
    width: 100%;
    text-align: left;
}
.mini_pg_profile h3 {
    text-align: left;
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 20px;
    color: var(--nl-basecolor);
    margin: 0;
}
.mini_pg_profile h2 {
    text-transform: unset;
    font-weight: 500;
    font-size: 42px;
    margin: 0px;
    text-align: left;
    white-space: nowrap;
}

.mini_pg_profile .w3-row {
    height: 95px;
}

.mini_pg_profile .s2 {
    height: 100%;
    padding-top: 15px;
}

img#logo-villaggio {
    max-width: 100%;
}

#mini_scheda_villaggio {
    text-transform: capitalize;
}
.mini_pg_chart {
    float: right;
    width: 50%;
}
.profile_selector_left h4 {
    margin: 0;
    font-variant: small-caps;
    font-family: 'Roboto';
    color: var(--nl-basecolor);
    font-size: 18px;
}

.profile_selector_left .content {
    font-family: 'Roboto';
    font-weight: normal;
}
.profile_selector_left button {
    font-variant: small-caps;
    border-radius: 5px;
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 20px;
    padding: 5px 15px;
    display: block;
    position: relative;
    right: 0;
    margin: 10px 0 auto auto;
}

  .pg_selector {
    position: relative;
    display: inline-block;
    margin: auto 0.5vw;


}
.imm_pg {
    width: 125px;
    height: 125px;
    cursor: pointer;
    overflow: hidden;
    
}

.imm_pg::before {
    content: " ";
    position: absolute;
    z-index: 0;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid var(--nl-color-darkest);
    border-radius: 51%;
}
.imm_pg img {
    opacity: 0.33;
    transition: all 500ms;
    position: relative;
    min-height: 100%;
    min-width: 100%;
}
.pg_selector.active .imm_pg.active {
    width: 150px;
    height: 150px;
}

.pg_selector:hover .imm_pg img, .pg_selector.active .imm_pg.active img {
    opacity: 1;
}
.nomepg {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    color: var(--nl-color-white);
    width: 75%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    font-family: 'Roboto';
    font-variant: small-caps;
    font-size: 20px;
}
.imm_pg.active .nomepg.active {
    display: none;
}


   .edit_avatar {
    position: absolute;
    top: 70px;
    left: calc(50% + 80px);
    width: 40px;
    height: 40px;
    transform: translate(-50%,-50%);
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border: 5px solid var(--nl-color-darkgrey);
}

.edit_avatar.av_pg, .edit_avatar.congela_pg {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--nl-basecolor)!important;
    border: 3px solid var(--nl-color-darkgrey);
    width: 0px;
    height: 0px;
    font-size: 15px;
    line-height: 26px;
    opacity: 0;
    cursor: pointer;
    transition: all 500ms;
    color: var(--nl-color-darkest)!important;
}
.pg_selector.active .edit_avatar.av_pg{
    opacity: 1;
    top: 113.5px;
    left: 139.95px;
    width: 30px;
    height: 30px;
}
.pg_selector.active .edit_avatar.congela_pg {
    opacity: 1;
    top: 113.5px;
    left: 10.05px;
    width: 30px;
    height: 30px;
}

.edit_avatar:hover {
    color:#e9e5d5!important;
    background: var(--nl-basecolor)!important;
}

.profile_pg {
    display: none;
    height: 100vh;
    overflow: hidden;
}
.profile_pg.active {
    display: block;
}
.profile_scheda {
    display: none;
    overflow: auto;
    height: 75%;
}
.profile_scheda > h2 {
    margin: 2em auto;
    font-size: 20pt;
    text-transform: none;
    letter-spacing: 3px;
    font-weight: 500;
    color: var(--nl-basecolor);
}
.profile_pg h2 {
    font-size: 24px;
    font-weight: lighter;
    font-family: 'Raleway';
    color: var(--nl-basecolor);
    border-bottom: 1px solid #9c23087a;
    max-width: 50%;
    margin: 25px auto;
    min-width: 300px;
}

.profilo_pg_elemento {
    width: 75%;
    margin: 30px auto;
    border-radius: 10px;
    font-size: 11pt;
    padding: 7px;
    min-width: 300px;
}

.profilo_pg_elemento h4 {
    font-size: 11pt;
    font-weight: bold;
    color: var(--nl-basecolor);
}

.profile_form {
    margin: 15px auto;
    text-align: center;
    width: 65%;
    min-width: 350px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--nl-color-darkgrey);
}
.profile_form input {
    display: block;
    width: 25%;
    min-width: 300px;
    background: var(--nl-color-darkgrey);
    border: none;
    margin: 5px auto;
    border-radius: 5px;
    color: #e9e5c5BB;
    padding: 5px;
    font-size: 12px;
}
.profile_form input:focus {
    border: 1px solid #9c2308!important;
}
.profile_form h4 {
    font-size: 15px;
    font-variant: small-caps;
    font-family: 'Roboto';
}

.modal_gallery, .modal_gallery_all {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 900;
}
.nl-swal-htmlcontainer .modal_gallery {
    display: block!important;
}
.modal_close {
    position: absolute;
    top: 3%;
    left: 3%;
    background: #232b31;
    font-size: 20pt;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    line-height: 40pt;
    opacity: 0.66;
    cursor: pointer;
}
.modal_close:hover {
    opacity: 1;
}

.modal_img {
    position: relative;
    height: 100%;
}
.modal_img:after {
    content: "";
    display: block;
    width: 1px;
    height: 75%;
    background: #9c2308;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


.modal_img img {
    display: block;
    margin: auto;
    max-height: 80%;
    max-width: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.modal_img button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nl-color-white);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--nl-color-darkgrey);
    font-size: 34px;
    text-align: center;
    opacity: 0.66;
}
.modal_img button:hover {
    opacity: 1;
}
#modal_prev {
    left: 1%
}

#modal_next {
    right: 1%
}


.modal_controls > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12pt;
    padding: 40px

}
.modal_controls h4 {
    display: inline-block;
    margin-right: 15px;
    font-variant: small-caps;
}

#direct_link input, #direct_link button {
    margin: auto 10px;
    height: 37px;
}

.modal_controls button {
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Open Sans';
    font-weight: normal;
    display: block;
    margin: 20px 0;
    width: 300px;
    text-align: left;
    font-variant: small-caps;
}
.modal_controls button.first {
    margin-top: 60px;
}
.modal_controls button.last {
    margin-top: 60px;
}

.modal_grid {
    height: 100vh;
    overflow: scroll;
    padding: 10px;
}

.gallery_row .w3-col {
    width: 18%;
    padding-bottom: 18%;
    margin: 0.555%;
    overflow: hidden;
    position: relative;
}
.gallery_row .w3-col img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

div#switch_tratti {
    margin: 15px auto;
    text-align: center;
    font-variant: small-caps;
    position: relative;
    height: 100px;
    cursor: pointer;
}
#switch_tratti > div {
    display: inline-block;
    width: 50px;
    height: 25px;
    border-radius: 50px;
    border: 2px solid var(--nl-color-darkgrey);
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%,-50%);
}

.show_all {
    background: #9c2308;
}
.show_acq {
    background: var(--nl-color-darkgrey);
}

#switch_tratti >span {
    width: 75px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#switch_tratti >span:first-child {
    left: calc(80% - 100px);

}

#switch_tratti >span:last-child {
    left: calc(80% + 25px);
}

#switch_tratti > div:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: var(--nl-color-darkest);
    position: absolute;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);

}

#switch_tratti > div.show_all:after {
    left:0
}
#switch_tratti > div.show_acq:after {
    left:25px

}

.portfolio_tratti {
    text-align: center;
    border-bottom: 1px solid var(--nl-color-darkgrey);
    padding-top: 20px;
}
.portfolio_tratti h4 {
    font-size: 17px;
    font-family: 'Raleway';
    font-variant: small-caps;
    color: var(--nl-basecolor);
}


.portfolio_tratti .tratto {
    margin: 10px;
    cursor:pointer;
}
.tratto.noactive {
    opacity: 0.45;
    filter: saturate(0);
    cursor: not-allowed!important;
}

.portfolio_tratti > div > span {
    display: block;
    font-variant: small-caps;
    margin: 10px auto;
    width: 33%;
    border-bottom: 1px solid #313b42;
    padding: 10px;
    opacity: 0.75;
}
.tratto_cumulabile {
    position: relative;
    display: inline-block;
}
.tratto.cumulabile::after {
    content: attr(data-acquisiti);
    display: block;
    position: absolute;
    top: 11px;
    left: calc(50% + 30px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #601108;
    line-height: 26px;
    font-size: 10px;
    text-align: center;
    color: #bc9755;
    border: 2px solid var(--nl-color-darkest);
}

.tratti-swal-popup {
    width: 750px;
}
.tratti-swal-popup table {
    width: 100%;
    margin: 50px auto;
    text-align: center;
    border-spacing: 0;
}

.tratti-swal-popup td {
    height: 150px;
    border-bottom: 1px solid #486073;
}
.tratti-swal-popup table tr:first-child th {
    border-bottom: 2px solid var(--nl-basecolor);
    font-family: 'Raleway';
    font-weight: normal;
    padding: 5px;
}
.tratti-swal-popup td:nth-child(odd) {
    width: 25%;
    color: var(--nl-basecolor);
    font-family: 'Raleway';
    font-weight: bold;
}



.tbl-tratti-swal-popup {
    WIDTH: 66%;
   /* height: 85vh;*/
    min-width: 1000px;
}

.tbl-tratti-swal-htmlcontainer {
    min-height: 65vh;
    overflow-x: hidden;
}
div#AcquistoTrattiPanel {
    width: 95%;
    margin: auto;
}

.acquisto-tratti-container-stemma {
    display: inline-block;
    margin: 0 5px;
}

.acquisto-tratti-grado {
    font-variant: small-caps;
    padding: 10px 0;
    font-size: 20px;
    border-bottom: 2px solid var(--nl-basecolor);
    margin: 30px auto 20px auto;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--nl-color-darkgrey);
    z-index: 100;
}

.acquisto-tratti-container-stemma {
    zoom: 0.9;
    display: inline-block;
    margin: 10px 5px;
    transition: all 250ms;
}

.stemma-selected {
    background: var(--nl-color-darkest);
    zoom: 1.1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid var(--nl-basecolor);
}


div#AcquistoTrattiCostoeAcquisto {
    position: fixed;
    width: 400px;
    height: 200px;
    bottom: 0;
    right: 0;
    background: var(--nl-color-darkgrey);
    border-top: 2px solid var(--nl-basecolor);
}

div#AcquistoTrattiCostoeAcquisto > div {
    height: 50%;
    font-size: 15px;
    text-align: justify;
    padding: 30px 0;
    width: 90%;
    margin: auto;
    border-bottom: 3px solid var(--nl-color-darkest);
    font-size: 14px;
}


div#AcquistoTrattiCostoeAcquisto b {
    color: var(--nl-basecolor);
}

.portfolio_stemmi {
    text-align: center;
    border-radius: 20px;
    margin: 50px auto;
    padding: 10px;
}

.modal_stemma {
    border: 2px solid var(--nl-color-darkgrey);
    padding: 20px;
    box-shadow: 10px 10px 10px 0 #000000aa;
}
.modal_stemma > h2 {
    text-transform: none;
    color: var(--nl-basecolor);
    width: 75%;
    margin: 10px auto;
    font-weight: bold;
}
.modal_stemma > h2 > span {
    display: block;
    font-size: 10px;
}
/*
.modal_stemma.stemma_semplice {
    border-color: white;
}
.modal_stemma.stemma_onore {
    border-color: silver;
}
.modal_stemma.stemma_elite {
    border-color: black;
    box-shadow: 0px 0px 15px 3px #ffffffa1;
}
.modal_stemma.stemma_argento {
    border-color: silver;
}
.modal_stemma.stemma_lode {
    border-color: darkgoldenrod;
}

.modal_stemma.stemma_semplice > h2  {
    color: white;
}
.modal_stemma.stemma_onore > h2 {
    color: silver;
}
.modal_stemma.stemma_elite > h2 {
    color: black;
    filter: drop-shadow(0px 0px 4px silver);
}
.modal_stemma.stemma_argento > h2 {
    color: silver;
}
.modal_stemma.stemma_lode > h2 {
    color: darkgoldenrod;
}*/



.modal_stemma.stemma_semplice > h2 > span {
    color: white;
}
.modal_stemma.stemma_onore > h2 > span {
    color: silver;
}
.modal_stemma.stemma_elite > h2 > span {
    color: black;
    filter: drop-shadow(0px 0px 4px white);
}
.modal_stemma.stemma_argento > h2 > span {
    color: black;
    filter: drop-shadow(0px 0px 4px silver);
}
.modal_stemma.stemma_lode > h2 > span {
    color: darkgoldenrod;
}
.modal_stemma .descrizione {
    text-align: center;
    border-bottom: 1px solid var(--nl-basecolor);
    width: 75%;
    margin: 0 auto;
    padding-bottom: 15px;
}
.modal_stemma > table {
    width: 75%;
    font-size: 15px;
    text-align: justify;
    line-height: 115%;
    border-spacing: 0px;
    margin: 20px auto;
}
.modal_stemma > table th {
    text-align: center;
    font-size: 18px;
    font-variant: small-caps;
    font-weight: normal;
    padding: 5px;
}
.modal_stemma > table td {
    padding: 0.75em;
    text-align: center;
    font-weight: bold;
    color: var(--nl-basecolor);
    width: 33.33%;
    border-bottom: 2px solid var(--nl-color-darkgrey);
}
.modal_stemma > table  h3 {
    font-size: 18px;
    text-align: center;
    margin: 20px auto;
    font-variant: small-caps;
    color: var(--nl-basecolor);
}



  .w3-background-d3 {
      background-color: var(--nl-color-darkgrey)!important;
  }

  /*Da trasferire nel nuovo css della scheda*/

  .profile_schedapg {
    width: calc(100% + 90px);
    background: var(--nl-color-darkgrey);
    margin-top: 5%;
    display: none;
    padding: 1.5em;
    color: #e9e5d5;
    position: relative;
    left: -45px;
    bottom: -45px;
}

.nome_pg {
    font-variant: small-caps;
    text-align: center;
    margin: 0px auto;
    font-family: 'Marcellus SC';
}

.sc_titolo_pg {
    text-transform: unset;
    font-size: 20px;
    font-variant: small-caps;
    font-family: 'Open Sans';
}

#selector_scheda {
    padding-top:0px;
    margin-bottom: 20px;
}
ul.profile_selector_schedapg {
    width: 100%;
}

.profile_selector_schedapg li {
    font-size: 14px;
    font-weight: normal;
    border-radius: 0!important;
}
.profile_selector_schedapg li:hover {
    font-weight: bold;
}
.profile_selector_schedapg li.selected {
    border-bottom: 3px solid var(--nl-basecolor);
    font-weight: bold;
}

.schedapg {
    position: relative;
}

.scheda_bottom {
}


.schedapg_schede {
    overflow: auto;
    height: calc(100vh - 400px);
    padding: 1em;
    font-size: 11pt;
    line-height: 1.35;
    text-align: justify;
    left: 50%;
}
.schedapg_schede >div {
    display: none;
}
#profile_bg_desc {
    display: block;
}
.schedapg_schede > div > h2 {
    font-size: 40pt;
    text-transform: none;
    font-weight: bold;
    color: var(--nl-basecolor);
}
.schedapg_immagine {
    margin: 10px auto;
    width: 100%;
    text-align: center;
}
.immagine_pg {
    max-width: 100%;
    max-height: 100%;
}

.divisore_scheda {
    width: 98%;
    border-width: 1px;
    border-color: var(--nl-basecolor);
}

.tabella_scheda {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
}

.tabella_colonna {
    width: auto;
    float: none;
    vertical-align: top;
    font-family: 'Raleway';
    font-size: 11pt;
    text-align: left;
    position: relative;
}
.tabella_colonna:after {
    height: 100px;
    width: 1px;
    content: "";
    display: block;
    background: var(--nl-color-white);
    position: absolute;
    top: 70px;
    right: 0;
}

.tabella_colonna table {
    border-spacing: 0px;
}

.tabella_colonna:last-child:after {
    display: none;
}
.tabella_scheda th {
    background: var(--nl-basecolor);
    padding:0px 10px;
    font-weight: normal;
    font-family: 'Raleway';
    text-align: center;
    height:45px;
}
.tabella_scheda table tr:nth-child(2) td {
    padding-top: 20px;
}

.tabella_scheda table tr td:first-child {
    font-weight: bold;
    color: var(--nl-basecolor);
    padding-left: 12px;
}

.tabella_scheda td {
    padding: 4px 12px;
}

#tbl_spec td {
    font-weight: normal;
    color: unset;
}
td#tbl_grafico_stat canvas {
    width: 175px;
}

#profile_bg_desc > div:nth-child(2), #profile_bg_desc > div:nth-child(4) {
    height: 310px;
    overflow: auto;
}
.indice {
    position: fixed;
    bottom: 0;
    background: var(--nl-color-darkest);
    padding: 0px 10px 10px 10px;
    height: 70vh;
    overflow: auto;
    width: 530px;
    box-shadow: 3px 3px 5px 0px #0000004f;
    border-left: 3px solid var(--nl-basecolor);
}
.indice.closed {
    display: none;
}

.indice > h3 {
    position: relative;
    font-size: 30pt;
    font-variant: normal;
    font-weight: 500;
    color: var(--nl-basecolor);
}

.indice > ul {
    position: relative;
    padding-bottom: 10px;
    padding-left: 15%;
    list-style-type: circle;
}

.indice li {
    padding-bottom: 3px;
    cursor: pointer;
}

.indice li:hover {
    font-weight: bold;
}
a.indice_scheda {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: var(--nl-basecolor);
    color: var(--nl-color-white);
    text-align: center;
    line-height: 40px;
    border-radius: 100%;
    margin: 20px auto;
}
a.indice_icona, .indice_close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}

.indice.closed:hover, .indice_icona:hover {
    cursor: pointer;
    
}
.indice_close {
    right: 20px;
}

.indice_icona {
    right: 50px;
}

elemento {
    margin-bottom: 50px;
}
elemento > elemento {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 0;
}
testata {
    font-size: 14pt;
}

sommario {
    font-size: 12pt;
}







.profile_album {
    display: none;
}

.profile_album > h1 {
    text-align: center;
    margin: 40px auto 10px auto;
    font-family: 'Raleway';
    font-variant: small-caps;
    font-size: 40pt;
    color: var(--nl-color-white);
    font-weight: 500;
}

.gallery_menu {
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 420px;
    align-items: flex-start;
    flex-direction: row;
    margin: auto;
}
.gallery_button {
    font-size: 14px;
    color: var(--nl-basecolor);
    text-align: center;
    width: 110px;
}
.gallery_button > button {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    display: block;
    font-size: 50px;
    text-align: center;
    position: relative;
}

.gallery_button > button:hover {
    background: var(--nl-basecolor)!important;
    color: var(--nl-color-darkest)!important;
}

.gallery_album_selector_wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 240px;
    margin-top: 75px;
}

.album-selector-scroll {
    position: absolute;
    top: 0;
    width: 240px;
    height: 100%;
    z-index: 25;
    color: var(--nl-basecolor);
    font-size: 75px;
    line-height: 225px;
}
.album-selector-scroll.scroll-right {
    right: 0;
    background: linear-gradient(to right, transparent 5%, var(--nl-color-darkgrey) 95%);
    text-align: right;

}

.album-selector-scroll.scroll-left {
    left: 0;
    background: linear-gradient(to left, transparent 5%, var(--nl-color-darkgrey) 95%);;
    text-align: left;
}

.gallery_album_selector {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin: 30px auto 5px auto;
    align-items: baseline;
    position: absolute;
    top: 0;
    left: 0;
}
.album-button {
    width: 260px;
    height: 205px;
    cursor: pointer;
    font-size: 13pt;
    color: var(--nl-color-white);
    font-family: 'Raleway';
    transition: all 500ms;
    margin: 0;
    padding: 0px 10px 10px 10px;
    text-align: left;
    border-radius: 20PX;
    font-weight: bold;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-button.ui-droppable-active.ui-droppable-hover {
    background: var(--nl-basecolor);

}
.album-button:hover {
    background-color: var(--nl-color-darkest);
}
#CaricaImmagine > span {
    position: absolute;
    top: 54px;
    right: 11px;
    font-size: 25px;
    color: var(--nl-color-white);
    display: block;
    background: var(--nl-color-darkest);
    height: 29px;
    border-radius: 50%;
    line-height: 30px;
    width: 29px;
    text-align: center;
}

#CaricaImmagine:hover > span {
    color: var(--nl-color-darkest)!important;
    border-color: var(--nl-basecolor); 
    background: var(--nl-basecolor)!important;
}
.album-icon {
    width: 240px;
    height: 170px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 10px;
}
.album-thumbnail {
    width: 50%;
    height: calc(100% - 20px);
    overflow: hidden;
    position: absolute;
    border: 2px solid var(--nl-color-darkgrey);
    border-radius: 20px;
    left: 50%;
    transform: translateX(0);
    transition: all 500ms;
    background: var(--nl-color-darkest);
    box-shadow: 3px 0px 5px 0px #0000004f;
}



.album-thumbnail:first-child {
    z-index: 6;
}
.album-thumbnail:first-child + .album-thumbnail {
    z-index: 5;
}

.album-thumbnail:first-child + .album-thumbnail + .album-thumbnail  {
    z-index: 4;

}
.album-thumbnail:first-child + .album-thumbnail + .album-thumbnail + .album-thumbnail {
    z-index: 3;

}
.album-thumbnail:first-child + .album-thumbnail + .album-thumbnail + .album-thumbnail + .album-thumbnail {
    z-index: 2;
    

}


/*
.album-icon:hover .album-thumbnail:first-child {
    transform: translateX(-100%);
}

.album-icon:hover .album-thumbnail:first-child + .album-thumbnail + .album-thumbnail  {
    transform: translateX(0%);
}*/

.album-thumbnail img {
    height: 150%;
    display: block;
    margin: auto;
    position: absolute;
    transform: translateX(-50%);
    top: -10%;
    left: 50%;
}

.album-selected {
    background: var(--nl-color-darkest);
    position: relative;
}
.album-command {
    z-index: 15;
}
.album-add-img {
    font-size: 20pt;
    padding: 5px;
    margin: 0 auto;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 0;
    border-radius: 50%;
}

.album-edit {
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 0;
    border-radius: 50%;
    font-size: 15px;
    margin: 0;
    top: 25px!important;
    right: 0px!important;
}
.album-lock {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    top: 25px!important;
    left: 25px!important;
    border-radius: 50%;
    z-index: 15;
    text-align: center;
}


.gallery {
    border-top: 2px solid var(--nl-basecolor);
}

.gallery_album > h2 {
    color: var(--nl-basecolor);
    font-family: 'Raleway';
    margin: 75px auto 30px auto;
    font-size: 40px;
    text-transform: none;
    background-color: var(--nl-color-darkgrey);
    position: sticky;
    top: 49px;
    left: 0;
    z-index: 200;
    padding: 25px 0px;

}

.gallery_album > h2 div.selection-mode {
    width: 5%;
    height: 50%;
    background: var(--nl-color-darkest);
    position: absolute;
    top: 25%;
    right: -45px;
    border-radius: 20px 0 0 20px;
    cursor: pointer;
    transition: all 250ms;
    font-size: 14px;
}

.selection-mode:not(.selection-active)::before {
    content: "\f0ae";
    font: var(--fa-font-solid);
    color: var(--nl-color-white);
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


div.selection-mode.selection-active {
    width: 32%!important;
    height: fit-content!important;
    top: 12.5%!important;
    display: inline-block;
    border-radius: 0%!important;
    border-bottom: 3px solid;
}

.selection-mode button {
    border: 2px solid var(--nl-basecolor);
    color: var(--nl-color-white);
    font-weight: bold;
    padding: 5px 10px;
    margin: 5px;
}
.selection-mode button:hover {
    background-color: var(--nl-basecolor)!important;
    color: var(--nl-color-white)!important;
}
.selection-mode button:disabled {
    border: none;
}
.selection-mode button:disabled:hover {
    background: transparent!important;
}
button#MultiEdit-Close {
    border: none;
    color: var(--nl-basecolor);
    font-size: 20px;
    width: 50px;
    float: left;
    height: 76px;
}

button#MultiEdit-Close {
    background-color: transparent;
}
.selection-header {
    width: calc(100% - 50px);
    margin-left: 50px;
    color: var(--nl-basecolor);
    font-weight: bold;
    padding: 5px 0;
}

div.selection-mode:not(.selection-active):hover {
    background-color: var(--nl-basecolor);
    color: var(--nl-color-darkest)!important
}


.gallery_img_list {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    align-items: flex-start;
    justify-content: space-around;
    height: 100vh;
    overflow: auto;
}


.gallery_colonna {
    width: 20%;
}

.gallery img {
    max-width: 90%;
    display: block;
    margin: 2em auto;
    border-radius: 20px;
    max-height: 400px;
    background: var(--nl-color-darkest);
    cursor: pointer;
    transition: all 250ms;
}
.gallery_img {
    position: relative;
}
.privacy-public::after {
    content: "\f7a2";
    font: var(--fa-font-solid);
    position: absolute;
    top: 8px;
    left: 20px;
    color: var(--nl-color-white);
    display: block;
    background: var(--nl-basecolor);
    width: 20px;
    height: 21px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    opacity: 0.75;
}

.privacy-private::after {
    content: "\f023";
    font: var(--fa-font-solid);
    position: absolute;
    top: 8px;
    left: 20px;
    color: var(--nl-color-white);
    display: block;
    background: var(--nl-basecolor);
    width: 20px;
    height: 21px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    opacity: 0.75;
}

.gallery_img.ui-selectee {
    max-width: 66%;
    margin: 2.5em auto;
    filter: contrast(0.6) grayscale(0.4)
}

.gallery_img.ui-selectee.is-selected {
    filter: contrast(1.3) grayscale(0)!important;
    max-width: 90%!important;
}

.gallery-drag-helper {
    width: 100px;
    opacity: 0.75;
    background: var(--nl-color-darkest);
}
.gallery img:hover {
    opacity: 0.75;
}


ul.album-list {
    max-height: 50vh;
    overflow: auto;
    text-align: left;
    list-style-type: decimal;
    font-size: 15px;
    font-family: 'Raleway';
    padding: 10px 10px 10px 20px;
}

.album-list li {
    padding: 5px 3px;
    border: 1px solid;
    margin-bottom: 4px;
    cursor: move;
}

.album-list li:hover {
    background-color: var(--nl-color-darkest);
    font-weight: 500;
}





table.tabella-ryo {
    margin: 30px auto;
    width: 95%;
    border-spacing: 0;
}

table.tabella-ryo th {
    border-bottom: 2px solid var(--nl-basecolor);
    font-family: 'Raleway';
    font-size: 14pt;
    font-variant: small-caps;
    font-weight: 400;
    text-align: center;
    padding: 5px 5px 10px 5px;
    top: 0;
    position: sticky;
    background: var(--nl-color-darkest);
}

.tabella-ryo td {
    font-family: 'Raleway';
    padding: 5px 10px;
    text-align: left;
    width: 20%;
    border-bottom: 1px solid var(--nl-color-darkgrey);
    font-size: 13pt;
}

.negative-ryo .ryo {
    color: var(--nl-basecolor);
}

.positive-ryo .ryo {
    color: var(--nl-color-green);
}
.deleted-ryo {
    color: var(--nl-color-grey);
    text-decoration:line-through;
}
.ryo-saldo {
    text-align: center;
    font-size: 20pt;
    font-family: 'Raleway';
    width: fit-content;
    padding: 0.66em;
    margin: 40px auto;
}
.tabella-ryo button {
    color: var(--nl-color-white);
    background: transparent;
    font-size: 12px;
    margin-left: 10px;
}

div#Stipendi-Container {
    height: 800px;
    overflow: auto;
}


/*TIMELINE*/

.timeline-taglist {
    text-align: center;
    margin: 30px auto;
    width: 100%;
    font-size: 13px;
    position: sticky;
    top: -1px;
    z-index: 20;
    background: var(--nl-color-darkest);
    padding: 3% 7.5%;
}

.timeline-taglist > span {
    background: var(--nl-basecolor)!important;
}

span.timeline-tag {
    display: inline-block;
    margin: 5px 10px;
    background: var(--nl-basecolor-d3);
    font-weight: bold;
    padding: 6px;
    border-radius: 30px;
}

.evento-box {
    background: var(--nl-color-darkgrey);
    font-family: 'Raleway';
    padding: 40px 20px;
    margin: 50px auto;
    border-radius: 20px;
    position: relative;
}
.evento-box.primo-evento {
    margin-top: 20px;
}


.evento-button {
    position: absolute;
    top: 40px;
    right: 25px;
    padding: 0;
    border-radius: 50%;
    margin: 0;
}

.evento-button button {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    padding: 0;
    margin: 0px 0px 0px 10px;
}

.evento-assegna-stemma img {
    width: 19.67px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 1px;
    left: 1px;
}


.evento-box > h3 {
    font-variant: normal;
    text-align: center;
    border-bottom: 2px solid var(--nl-basecolor);
    width: fit-content;
    margin: 0px auto 10px auto;
    padding: 0 10px 10px 10px;
}

.evento-box > h3 > a {
    text-decoration: none;
}

h4.evento-data {
    text-align: center;
    font-weight: bold;
    color: var(--nl-basecolor);
    margin-bottom: 25px;
    font-family: 'Raleway';
}

.evento-interno {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    height: 250px;
}

.evento-interno > div {
    margin: 0.5em;
    font-size: 13px;
    text-align: justify;
    height: 100%;
}


.evento-left {
    width: 70%;
}

.evento-img {
    width: 165px;
    overflow: hidden;
}

.evento-img > img {
    position: relative;
    min-height: 100%;
    min-width: 100%;
}

.evento-descrizione {
    height: 125px;
    padding: 0px 5px;
    overflow: auto;
    margin-bottom: 5px;
}

.evento-stemmi {
    overflow: hidden;
    white-space: nowrap;
    min-height: 105px;
}
.evento-tag {
    color: var(--nl-basecolor);
    font-weight: bold;
}




.evento-swal-popup {
    width: 750px;
}


div#Evento-Container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: left;
}


.evento-swalcontainer label {
    margin: 10px auto;
    width: 100%;
}

.evento-swalcontainer input {
    margin-left: 10px;
    background: var(--nl-color-darkest);
    border: none;
    color: var(--nl-color-white);
    padding: 3px;
    margin-top: 10px;
    height: 40px;
    font-size: 12PT;
    width: 250px;
}
.evento-swalcontainer .evento-descrizione, .stemma-motivazioni {
    width: 90%;
    margin: 30px auto;
    background: transparent;
    color: var(--nl-color-white);
    font-size: 10pt;
}


.evento-immaginebox {
    height: 250px;
    width: 162px;
    position: relative;
    float: left;
    overflow: hidden;
}

.evento-immaginebox img {
    min-width: 100%;
    min-height: 100%;
    position: relative;
}

button.evento-edit-img {
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 0;
    font-size: 14px;
    font-family: 'Raleway';
    font-variant: small-caps;
    background: var(--nl-basecolor);
    padding: 3px;
    color: var(--nl-color-white);
    font-weight: bold;
}

.timeline-tag.ui-selected {
    zoom: 1.3;
}


/*STEMMI*/
.stemma-container > p {
    font-family: 'Raleway';
    font-variant: small-caps;
    font-size: 13px;
    line-height: 150%;
}

.stemma-nome {
    font-variant: small-caps;
    font-size: 22px;
    font-weight: 200;
    font-family: 'Raleway';
    width: 100%;
    margin: 40px 0 10px 0;
    padding: 5px;
    background: var(--nl-color-white);
    white-space: nowrap;
    overflow: hidden;
    color: var(--nl-color-darkest);
}

.stemma-descrizione {
    font-family: 'Raleway';
    font-size: 14px;
    padding: 0.5em 2em;
    width: calc(100% - 20px);
    border-radius: 0px 0px 300px 300px;
    height: 119px;
    overflow: auto;
    background: var(--nl-color-darkgrey);
    margin: auto;
}
.stemma-box {
    width: 224px;
    height: 270px;
    margin: 20px auto;
    border-radius: 0 0 300px 300px;
    background: transparent;
    text-align: center;
    border: 8px solid;
}

.stemma-grado {
    width: 76%;
    height: 40px;
    color: var(--nl-color-darkest);
    background: var(--nl-color-white);
    border: transparent;
    text-align: center;
    font-variant: small-caps;
    font-size: 24px;
}


.stemma-container label {
    margin: 10px auto;
}

.stemma-container input {
    margin-left: 10px;
    color: var(--nl-color-white);
    background: var(--nl-color-darkest);
    border: none;
    border-bottom: 2px solid var(--nl-basecolor);
    padding: 4px;
}
.stemma-grado {
    width: 76%;
    height: 40px;
    color: var(--nl-color-white);
    background: var(--nl-color-darkest);
    border: transparent;
    text-align: center;
    font-variant: small-caps;
    font-size: 24px;
}
.acquisto-stemmi-button, .acquisto-tratti-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 2em auto;
    position: relative;
    padding: 0;
}

.acquisto-stemmi-button:hover, .acquisto-tratti-btn:hover {
    filter: brightness(1.3);
}

.acquisto-stemmi-button img, .acquisto-tratti-btn img {
    width: 30px;
    /* display: inline-block; */
    /* margin-left: 3px; */
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.acquisto-stemmi-button img {
    left: 54%;
}
/*MATERIALE PERSONALE*/



.crea-mp-action {
    display: none;
}

.crea-mp-box elemento {
    margin: 25px auto;
}
.crea-mp-input {
    width: 50px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--nl-basecolor);
    margin: 3px;
    padding: 3px;
    text-align: center;
    font-family: 'Raleway';
    color: var(--nl-color-white);
}

.crea-mp-select {
    color: inherit;
    font-family: 'Raleway';
    background: var(--nl-color-darkest);
    width: fit-content;
    max-width: 250px;
}

.crea-mp.text {
    min-height: 75px;
    width: 100%;
}
.crea-mp.text.no-width {
    width: fit-content;
    min-height: 0px;
}
.crea-mp-editable {
    display: table-cell;
    border: none;
    opacity: 1;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

td.mp-classe.t_avanzate:before {
    content: "TA";
    font-weight: bold;
    font-size: 18px;
}

td.mp-classe.equip:before {
    content: "EQ";
    font-weight: bold;
    font-size: 18px;
}

td.mp-classe.t_speciali:before {
    content: "TS";
    font-weight: bold;
    font-size: 18px;
}

td.mp-classe.competenze:before {
    content: "CP";
    font-weight: bold;
    font-size: 18px;
}

.crea-mp-box > div {
    display: none;
    padding: 1em 0.5em;
    margin: 2em auto;
    font-size: 13px;
}
.crea-mp-box > div > h3 {
    font-family: 'Raleway';
    text-align: center;
    font-weight: 500;
    color: var(--nl-color-white);
    border-bottom: 1px solid var(--nl-basecolor);
    width: fit-content;
    margin: 1em auto;
    padding: 5px 10px;
    font-size: 14pt;
    text-transform: uppercase;
}
div#CreaMP-competenze > elemento > div > div {
    width: 80%;
    margin: 20px auto;
}
.mp-cp-type-selector h4 {
    text-align: center;
    font-family: 'Raleway';
    font-size: 15px;
    padding: 10px;
    border-bottom: 1px solid var(--nl-basecolor);
    width: fit-content;
    margin: 10px auto;
}

.mp-cp-type-selector label {
    display: inline-block;
    margin: 5px;
    font-size: 14px;
}

.crea-mp.nl-editable {
    background: var(--nl-color-darkest);
    padding: 0.5em;
    border-bottom: 0;
}
.mp-approved {
    text-align: center;
    background: var(--nl-color-green);
    font-size: 13px;
    font-weight: normal;
}

.mp-in-valutazione {
    text-align: center;
    text-decoration: none!important;
    background: var(--nl-basecolor-d3);
}

.mp-valutato {
    text-align: center;
    text-decoration: none!important;
}

/*MODERAZIONE*/
.mod-panel {
    display: none;
}
.mod-panel > h3 {
    text-align: center;
    font-variant: small-caps;
    color: var(--nl-basecolor);
    margin: 160px auto 80px auto;
}


.mod-table {
    width: 100%;
    margin: 3em auto;
    text-align: center;
}

.mod-table td {
    max-width: 200px;
}
.mod-avatar {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: var(--nl-color-darkgrey);
}

.mod-table h4 {
    font-size: 13px;
    font-weight: 500;
    font-variant: small-caps;
    font-family: 'Raleway';
}
.mod-table td > p {
    text-align: justify;
    font-size: 13px;
    line-height: 130%;
}

.mod-table button {
    display: block;
    font-size: 13px;
    width: 90%;
    margin: 10px auto;
}

.mod-table a {
    color: var(--nl-basecolor);
    text-decoration: none;
    font-weight: bold;
}

.mod-mp-spoiler {
    text-align: center;
    margin: 50px auto;
    font-size: 28px;
    font-family: 'Raleway';
    color: var(--nl-basecolor);
    cursor: pointer;
}



.mod-mp-panel {
    width: 80%;
    margin: 50px auto;
    background: var(--nl-color-darkgrey);
    border-radius: 10px;
    padding: 20px;
}
.mod-mp-panel.mp-panel-R {
    display: none;
}
.mod-mp-title {
    align-items: center;
    justify-content: space-between;
}

.mod-mp-avatar {
    width: 66px;
    height: 66px;
}

.mod-mp-title > h3 {
    font-family: 'Raleway';
    font-size: 20px;
    font-weight: 500;
    display: block;
    width: calc(100% - 80*2px);
}

.mod-mp-title > h3 > a {
    display: block;
    text-decoration: none;
    border-bottom: 2px solid var(--nl-basecolor);
    padding: 5px 10px;
    font-variant: small-caps;
}
.mod-mp-data {
    padding: 0 10px;
    font-family: 'Raleway';
    color: var(--nl-basecolor);
    font-size: 16px;
}
.mod-mp-icon {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--nl-color-darkest);
    font-family: 'Raleway';
    width: 45px;
    text-align: center;
    height: 45px;
    background: var(--nl-basecolor);
    line-height: 45px;
    border-radius: 5px;
}
.mod-mp-nome {
    padding: 1em 0.5em;
    font-size: 18px;
    font-family: 'Raleway';
    font-weight: 500;
    font-variant: small-caps;
    align-items: center;
    justify-content: space-between;
}

.mod-mp-nome.mod-mp-nome-3 > *:first-child{
    flex-basis: 55%;
}
.mod-mp-nome.mod-mp-nome-2 > *:first-child{
    flex-basis: 75%;
}
.mod-mp-nome.mod-mp-nome-1 > *:first-child{
    flex-basis: 100%;
}

.mp-status.st-R {
    color: var(--nl-color-white);
    background: var(--nl-basecolor);
    padding: 3px;
    border-radius: 10px;
    flex-basis: 18%;
    font-size: 14px;
    width: 100px;
    text-align: center;
}
.mp-status.st-R:before {
    content: 'Valutato';
}


.mp-status.st-V {
    flex-basis: 0%;
}
.mod-mp-N-button {
    font-size: 13px;
    display: block;
    width: 50px;
    margin: 10px;
}
.mod-mp-conoscenzahtml {
    padding-top: 20px;
    width: 95%;
    margin: 0 auto 20px auto;
    display: none;
}

.mod-mp-topfooter {
    justify-content: space-around;
    align-items: center;
    font-size: 17px;
    font-family: 'Raleway';
    padding: 5px 0px;
    display: flex;
}
.mod-mp-topfooter > div {
    width: 33%;
    text-align: center;
    cursor: pointer;
    padding: 10px 0px;
    border-radius: 5px;
    background: var(--nl-color-darkest);
}

.mod-mp-topfooter > div:hover {
    background: var(--nl-color-grey);
}

.mod-mp-icon.competenze:before {
    display: inline;
    content: 'CP';
}

.mod-mp-icon.t_avanzate:before {
    display: inline;
    content: 'TA';
}

.mod-mp-icon.t_speciali:before {
    display: inline;
    content: 'TS';
}

.mod-mp-icon.equip:before {
    display: inline;
    content: 'EQ';
}
.mod-mp-msg-row {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    width: 95%;
    margin: 20px auto;
}
.mod-mp-msg-textarea {
    display: block;
    width: 85%;
    margin: 25px 0px 5px 90px;
    border: none;
    background: var(--nl-color-darkest);
    border-radius: 20px;
    opacity: 1;
    min-height: 30px;
    padding: 15px;
    font-family: 'Raleway';
}
.mod-mp-msg-textarea:not(.nl-editable-edited):before {
    content: 'Scrivi un messaggio...';
    opacity: 0.5;
}
.mod-mp-disc-wrapper {
    display: none;
}
.mod-mp-html-hide {
    display: none;
}
.mod-mp-approva {
    position: relative;
    left: 11.5%;
    font-variant: small-caps;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    padding: 10px 15px;
}
.mod-mp-msg {
    width: 90%;
    padding: 13px;
    background: var(--nl-color-darkest);
    border-radius: 10px;
    margin-left: 10px;
    font-size: 14px;
    font-family: 'raleway';
}
.mod-mp-button {
    display: block;
    position: relative;
    left: 96.5%;
    top: 6px;
    transform: translateX(-100%);
    margin: 0px;
    font-weight: 500;
    font-variant: small-caps;
}
.mod-mp-msg-avatar {
    width: 50px;
    height: 50px;
}
a.mod-mp-msg-username {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    font-variant: small-caps;
    color: var(--nl-basecolor);
}

span.mod-mp-msg-data {
    display: block;
    margin-top: 10px;
    opacity: 0.7;
    border-top: 1px solid var(--nl-color-darkgrey);
    padding-top: 10px;
}

.mod-mp-msg a.open_spoiler {
    display: none;
}
.mod-mp-msg a.open_spoiler + elemento {
    display: none;
}

.mod-mp-msg a.open_spoiler + elemento + hr {
    display: none;
}
.home-panel {
    background: var(--nl-color-darkgrey);
    width: 85%;
    margin: 3em auto;
    border-radius: 15px;
    padding: 15px;
    overflow: hidden;
}

.mod-schede-lm {
    text-align: left;
    font-size: 14px;
}

.mod-schede-lm > h4 {
    font-family: 'Raleway';
    font-size: 16px;
    font-variant: small-caps;
    font-weight: bold;
    color: var(--nl-basecolor);
}

/*HOMEPAGE*/
.home-title {
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}
.home-avatar {
    width: 66px;
    height: 66px;
}

.home-nickname {
    width: calc(100% - 100px);
}

.home-nickname > h3 {
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--nl-basecolor);
    padding-bottom: 5px;
    padding-top: 0px;
    margin: 0;
    font-family: 'Raleway';
    font-weight: bold;
    font-size: 19px;
}

.home-nickname {
    width: calc(100% - 160px);
}
.home-data {
    font-family: 'Raleway';
    padding-top: 5px;
    display: block;
    color: var(--nl-basecolor);
    font-size: 16px;
    font-weight: 500;
}
.home-icon {
    text-align: center;
}
.home-icon.svg {
    width: 40px;
    height: 40px;
    filter: invert(57%) sepia(80%) saturate(5066%) hue-rotate(356deg) brightness(89%) contrast(98%);
}
.home-icon.fa-svg {
    width: 40px;
    height: 40px;
    filter: invert(40%) sepia(80%) saturate(5066%) hue-rotate(356deg) brightness(89%) contrast(98%);
}
.home-icon > img {
    max-height: 40px;
}
.home-content {
    padding: 10px 0;
    font-family: 'Raleway';
    font-size: 16px;
}

.home-content .stemma  {
    margin: unset;
    
}
.home-img {
    width: calc(100% + 30px);
    position: relative;
    left: -15px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: -25px;
}
.home-img-true {
    max-width: 100%;
    max-height: 35vh;
    display: block;
    position: relative;
    z-index: 1;
    margin: auto;
}

img.home-img-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 250%;
    filter: blur(20px);
}






#profile_impostazioni label {
    font-size: 17px;
    width: 80%;
    margin: auto;
}

#profile_impostazioni label > div {
    width: 50%;
}
.user-pnglist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.png_selector {
    position: relative;
    display: block;
    width: fit-content;
    margin: 10px;
    cursor: pointer;
}
.imm_pg.png {
    border: 2px solid var(--nl-basecolor);
    cursor: pointer;
}
.png_selector:hover .imm_pg.png img, .png_selector.active .imm_pg.active img {
    opacity: 1;
}
.png_selector.active .edit_avatar.av_pg {
    opacity: 1;
    top: 113.5px;
    left: 139.95px;
    width: 30px;
    height: 30px;
}

.home-stemma-text {
    cursor: pointer;
}

.home-stemma-text:hover {
    text-decoration: underline;
}

b.home-stemma-text.semplice {
    color: white;
}
b.home-stemma-text.onore {
    color: silver;
}
b.home-stemma-text.elite {
    color: black;
    text-shadow: 0 0 4px #f8f8f8;
}

b.home-stemma-text.argento {
    color: silver;
}
b.home-stemma-text.lode {
    color: gold;
}

.mp-desc {
    width: 90%;
    margin: auto;
    height: 400px;
    overflow: auto;
    padding: 20px 0;
}

.mp-desc-nomod {
    display: block;
    margin: auto;
}



.crea-mp-box {
    background: var(--nl-color-darkgrey);
    padding: 0 5px;
}

.scheda_bottom .w3-left {
    display: flex;
    flex-direction: column;
}

.mod-mp-n {
    justify-content: space-between;
}