/* NORMAL MODE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    -moz-osx-font-smoothing: grayscale;
    
}

code {
    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}

@-webkit-keyframes nav-btn-wobble {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes nav-btn-wobble {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes nav-btn-before-wobble {
    0% {
      top: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      top: -3px;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
    50% {
      top: -6px;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    75% {
      top: -3px;
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
    100% {
      top: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  @keyframes nav-btn-before-wobble {
    0% {
      top: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      top: -3px;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
    50% {
      top: -6px;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    75% {
      top: -3px;
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
    100% {
      top: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
  /* Animazione wobble per il pseudo-elemento :after */
  @-webkit-keyframes nav-btn-after-wobble {
    0% {
      bottom: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      bottom: 3px;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    50% {
      bottom: 6px;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
    75% {
      bottom: 3px;
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
    100% {
      bottom: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  @keyframes nav-btn-after-wobble {
    0% {
      bottom: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      bottom: 3px;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    50% {
      bottom: 6px;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
    75% {
      bottom: 3px;
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
    100% {
      bottom: 0;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

@-webkit-keyframes nav-btn-in {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    33% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes nav-btn-in {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    33% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes nav-btn-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    66% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    to {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
}

@keyframes nav-btn-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    66% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    to {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
}

@-webkit-keyframes nav-btn-before-in {
    0% {
        top: 0
    }

    33% {
        top: 0
    }

    66% {
        top: 0
    }

    to {
        top: -10px
    }
}

@keyframes nav-btn-before-in {
    0% {
        top: 0
    }

    33% {
        top: 0
    }

    66% {
        top: 0
    }

    to {
        top: -10px
    }
}

@-webkit-keyframes nav-btn-before-out {
    0% {
        top: -10px
    }

    33% {
        top: 0
    }

    66% {
        top: 0
    }

    to {
        top: 0
    }
}

@keyframes nav-btn-before-out {
    0% {
        top: -10px
    }

    33% {
        top: 0
    }

    66% {
        top: 0
    }

    to {
        top: 0
    }
}

@-webkit-keyframes nav-btn-after-in {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 0
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: -10px
    }
}

@keyframes nav-btn-after-in {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 0
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: -10px
    }
}

@-webkit-keyframes nav-btn-after-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: -10px
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    to {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 0
    }
}

@keyframes nav-btn-after-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: -10px
    }

    33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    66% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        bottom: 0
    }

    to {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 0
    }
}

:root {
    --bg: #f0f0f0;
    --bg1: #fcfcfc;
    --bg2: #ededed;
    --primary: #ed8c0d;
    --lighter: #dea768;
    --darker: #ed8c0d;
    --gradient: linear-gradient(90deg,#a38141,#deb968);
    --warning: #eda708;
    --alert: #913e36;
    --alert-dark: #45110c;
    --textcolor: #595c61;
    --textcolorlight: #707680;
    --invert-bg: #292e38;
    --invert-textcolor: #e0e6f0;
    --shadow: hsla(0,0%,44.3%,0.2)
}

html {
    scroll-behavior: smooth;
    height: 100%;
    background-color: var(--bg);
}

a,body,button,div,footer,h1,h2,header,html,i,iframe,img,input,label,nav,p,span,textarea {
    outline: none!important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0)!important
}

a:after,a:before,body:after,body:before,button:after,button:before,div:after,div:before,footer:after,footer:before,h1:after,h1:before,h2:after,h2:before,header:after,header:before,html:after,html:before,i:after,i:before,iframe:after,iframe:before,img:after,img:before,input:after,input:before,label:after,label:before,nav:after,nav:before,p:after,p:before,span:after,span:before,textarea:after,textarea:before {
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 7px;
    height: 0
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: #e88707;
    background: var(--primary);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #e88707;
    background: var(--lighter)
}

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg);
    color: #595c61;
    color: var(--textcolor);
    margin: 0;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    height: 100%
}

#root {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
}

#root>div:nth-child(2) {
    margin-bottom: 50px
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #595c61;
    color: var(--textcolor)
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none
}

.bg-start10 {
    background: #fcfcfc;
    background: var(--bg1)
}

.bg-start10t {
    background: #ededed;
    background: var(--bg2)
}

.bg-start50 {
    background: var(--start50)
}

.bg-start50t {
    background: var(--start50t)
}

.bg-gradient {
    background: linear-gradient(90deg,#41a36e,#68de9d);
    background: var(--gradient);
    color: #fff
}

.bg-primary {
    background: #e88205;
    background: var(--primary);
    color: #fff
}

.bg-darker {
    background: #134529;
    background: var(--darker);
    color: #fff
}

.bg-warning {
    background: #eda708;
    background: var(--warning);
    color: #fff
}

.bg-alert {
    background: #913e36;
    background: var(--alert);
    color: #fff
}

.bg-alert-dark {
    background: #45110c;
    background: var(--alert-dark);
    color: #fff
}

.gold {
    color: #ffd600!important
}

.silver {
    color: #adadad!important
}

.bronze {
    color: #e49b45!important
}

.t-center {
    text-align: center
}

.h-auto,.w-auto {
    width: auto!important
}

.h--20,.w--20 {
    width: -20%!important
}

.fs--20 {
    font-size: -20px!important
}

.h--15,.w--15 {
    width: -15%!important
}

.fs--15 {
    font-size: -15px!important
}

.h--10,.w--10 {
    width: -10%!important
}

.fs--10 {
    font-size: -10px!important
}

.h--5,.w--5 {
    width: -5%!important
}

.fs--5 {
    font-size: -5px!important
}

.h-0,.w-0 {
    width: 0!important
}

.fs-0 {
    font-size: 0!important
}

.h-5,.w-5 {
    width: 5%!important
}

.fs-5 {
    font-size: 5px!important
}

.h-10,.w-10 {
    width: 10%!important
}

.fs-10 {
    font-size: 10px!important
}

.h-15,.w-15 {
    width: 15%!important
}

.fs-15 {
    font-size: 15px!important
}

.h-20,.w-20 {
    width: 20%!important
}

.fs-20 {
    font-size: 20px!important
}

.h-25,.w-25 {
    width: 25%!important
}

.fs-25 {
    font-size: 25px!important
}

.h-30,.w-30 {
    width: 30%!important
}

.fs-30 {
    font-size: 30px!important
}

.h-35,.w-35 {
    width: 35%!important
}

.fs-35 {
    font-size: 35px!important
}

.h-40,.w-40 {
    width: 40%!important
}

.fs-40 {
    font-size: 40px!important
}

.h-45,.w-45 {
    width: 45%!important
}

.fs-45 {
    font-size: 45px!important
}

.h-50,.w-50 {
    width: 50%!important
}

.fs-50 {
    font-size: 50px!important
}

.h-55,.w-55 {
    width: 55%!important
}

.fs-55 {
    font-size: 55px!important
}

.h-60,.w-60 {
    width: 60%!important
}

.fs-60 {
    font-size: 60px!important
}

.h-65,.w-65 {
    width: 65%!important
}

.fs-65 {
    font-size: 65px!important
}

.h-70,.w-70 {
    width: 70%!important
}

.fs-70 {
    font-size: 70px!important
}

.h-75,.w-75 {
    width: 75%!important
}

.fs-75 {
    font-size: 75px!important
}

.h-80,.w-80 {
    width: 80%!important
}

.fs-80 {
    font-size: 80px!important
}

.h-85,.w-85 {
    width: 85%!important
}

.fs-85 {
    font-size: 85px!important
}

.h-90,.w-90 {
    width: 90%!important
}

.fs-90 {
    font-size: 90px!important
}

.h-95,.w-95 {
    width: 95%!important
}

.fs-95 {
    font-size: 95px!important
}

.h-100,.w-100 {
    width: 100%!important
}

.fs-100 {
    font-size: 100px!important
}

.mt-auto {
    margin-top: auto!important
}

.mt--20 {
    margin-top: -20px!important
}

.pt--20 {
    padding-top: -20px!important
}

.mt--15 {
    margin-top: -15px!important
}

.pt--15 {
    padding-top: -15px!important
}

.mt--10 {
    margin-top: -10px!important
}

.pt--10 {
    padding-top: -10px!important
}

.mt--5 {
    margin-top: -5px!important
}

.pt--5 {
    padding-top: -5px!important
}

.mt-0 {
    margin-top: 0!important
}

.pt-0 {
    padding-top: 0!important
}

.mt-5 {
    margin-top: 5px!important
}

.pt-5 {
    padding-top: 5px!important
}

.mt-10 {
    margin-top: 10px!important
}

.pt-10 {
    padding-top: 10px!important
}

.mt-15 {
    margin-top: 15px!important
}

.pt-15 {
    padding-top: 15px!important
}

.mt-20 {
    margin-top: 20px!important
}

.pt-20 {
    padding-top: 20px!important
}

.mt-25 {
    margin-top: 25px!important
}

.pt-25 {
    padding-top: 25px!important
}

.mt-30 {
    margin-top: 30px!important
}

.pt-30 {
    padding-top: 30px!important
}

.mt-35 {
    margin-top: 35px!important
}

.pt-35 {
    padding-top: 35px!important
}

.mt-40 {
    margin-top: 40px!important
}

.pt-40 {
    padding-top: 40px!important
}

.mt-45 {
    margin-top: 45px!important
}

.pt-45 {
    padding-top: 45px!important
}

.mt-50 {
    margin-top: 50px!important
}

.pt-50 {
    padding-top: 50px!important
}

.mt-55 {
    margin-top: 55px!important
}

.pt-55 {
    padding-top: 55px!important
}

.mt-60 {
    margin-top: 60px!important
}

.pt-60 {
    padding-top: 60px!important
}

.mt-65 {
    margin-top: 65px!important
}

.pt-65 {
    padding-top: 65px!important
}

.mt-70 {
    margin-top: 70px!important
}

.pt-70 {
    padding-top: 70px!important
}

.mt-75 {
    margin-top: 75px!important
}

.pt-75 {
    padding-top: 75px!important
}

.mt-80 {
    margin-top: 80px!important
}

.pt-80 {
    padding-top: 80px!important
}

.mt-85 {
    margin-top: 85px!important
}

.pt-85 {
    padding-top: 85px!important
}

.mt-90 {
    margin-top: 90px!important
}

.pt-90 {
    padding-top: 90px!important
}

.mt-95 {
    margin-top: 95px!important
}

.pt-95 {
    padding-top: 95px!important
}

.mt-100 {
    margin-top: 100px!important
}

.pt-100 {
    padding-top: 100px!important
}

.bt-1 {
    border-top: 1px solid!important
}

.bt-2 {
    border-top: 2px solid!important
}

.bt-3 {
    border-top: 3px solid!important
}

.bt-4 {
    border-top: 4px solid!important
}

.bt-5 {
    border-top: 5px solid!important
}

.mr-auto {
    margin-right: auto!important
}

.mr--20 {
    margin-right: -20px!important
}

.pr--20 {
    padding-right: -20px!important
}

.mr--15 {
    margin-right: -15px!important
}

.pr--15 {
    padding-right: -15px!important
}

.mr--10 {
    margin-right: -10px!important
}

.pr--10 {
    padding-right: -10px!important
}

.mr--5 {
    margin-right: -5px!important
}

.pr--5 {
    padding-right: -5px!important
}

.mr-0 {
    margin-right: 0!important
}

.pr-0 {
    padding-right: 0!important
}

.mr-5 {
    margin-right: 5px!important
}

.pr-5 {
    padding-right: 5px!important
}

.mr-10 {
    margin-right: 10px!important
}

.pr-10 {
    padding-right: 10px!important
}

.mr-15 {
    margin-right: 15px!important
}

.pr-15 {
    padding-right: 15px!important
}

.mr-20 {
    margin-right: 20px!important
}

.pr-20 {
    padding-right: 20px!important
}

.mr-25 {
    margin-right: 25px!important
}

.pr-25 {
    padding-right: 25px!important
}

.mr-30 {
    margin-right: 30px!important
}

.pr-30 {
    padding-right: 30px!important
}

.mr-35 {
    margin-right: 35px!important
}

.pr-35 {
    padding-right: 35px!important
}

.mr-40 {
    margin-right: 40px!important
}

.pr-40 {
    padding-right: 40px!important
}

.mr-45 {
    margin-right: 45px!important
}

.pr-45 {
    padding-right: 45px!important
}

.mr-50 {
    margin-right: 50px!important
}

.pr-50 {
    padding-right: 50px!important
}

.mr-55 {
    margin-right: 55px!important
}

.pr-55 {
    padding-right: 55px!important
}

.mr-60 {
    margin-right: 60px!important
}

.pr-60 {
    padding-right: 60px!important
}

.mr-65 {
    margin-right: 65px!important
}

.pr-65 {
    padding-right: 65px!important
}

.mr-70 {
    margin-right: 70px!important
}

.pr-70 {
    padding-right: 70px!important
}

.mr-75 {
    margin-right: 75px!important
}

.pr-75 {
    padding-right: 75px!important
}

.mr-80 {
    margin-right: 80px!important
}

.pr-80 {
    padding-right: 80px!important
}

.mr-85 {
    margin-right: 85px!important
}

.pr-85 {
    padding-right: 85px!important
}

.mr-90 {
    margin-right: 90px!important
}

.pr-90 {
    padding-right: 90px!important
}

.mr-95 {
    margin-right: 95px!important
}

.pr-95 {
    padding-right: 95px!important
}

.mr-100 {
    margin-right: 100px!important
}

.pr-100 {
    padding-right: 100px!important
}

.br-1 {
    border-right: 1px solid!important
}

.br-2 {
    border-right: 2px solid!important
}

.br-3 {
    border-right: 3px solid!important
}

.br-4 {
    border-right: 4px solid!important
}

.br-5 {
    border-right: 5px solid!important
}

.mb-auto {
    margin-bottom: auto!important
}

.mb--20 {
    margin-bottom: -20px!important
}

.pb--20 {
    padding-bottom: -20px!important
}

.mb--15 {
    margin-bottom: -15px!important
}

.pb--15 {
    padding-bottom: -15px!important
}

.mb--10 {
    margin-bottom: -10px!important
}

.pb--10 {
    padding-bottom: -10px!important
}

.mb--5 {
    margin-bottom: -5px!important
}

.pb--5 {
    padding-bottom: -5px!important
}

.mb-0 {
    margin-bottom: 0!important
}

.pb-0 {
    padding-bottom: 0!important
}

.mb-5 {
    margin-bottom: 5px!important
}

.pb-5 {
    padding-bottom: 5px!important
}

.mb-10 {
    margin-bottom: 10px!important
}

.pb-10 {
    padding-bottom: 10px!important
}

.mb-15 {
    margin-bottom: 15px!important
}

.pb-15 {
    padding-bottom: 15px!important
}

.mb-20 {
    margin-bottom: 20px!important
}

.pb-20 {
    padding-bottom: 20px!important
}

.mb-25 {
    margin-bottom: 25px!important
}

.pb-25 {
    padding-bottom: 25px!important
}

.mb-30 {
    margin-bottom: 30px!important
}

.pb-30 {
    padding-bottom: 30px!important
}

.mb-35 {
    margin-bottom: 35px!important
}

.pb-35 {
    padding-bottom: 35px!important
}

.mb-40 {
    margin-bottom: 40px!important
}

.pb-40 {
    padding-bottom: 40px!important
}

.mb-45 {
    margin-bottom: 45px!important
}

.pb-45 {
    padding-bottom: 45px!important
}

.mb-50 {
    margin-bottom: 50px!important
}

.pb-50 {
    padding-bottom: 50px!important
}

.mb-55 {
    margin-bottom: 55px!important
}

.pb-55 {
    padding-bottom: 55px!important
}

.mb-60 {
    margin-bottom: 60px!important
}

.pb-60 {
    padding-bottom: 60px!important
}

.mb-65 {
    margin-bottom: 65px!important
}

.pb-65 {
    padding-bottom: 65px!important
}

.mb-70 {
    margin-bottom: 70px!important
}

.pb-70 {
    padding-bottom: 70px!important
}

.mb-75 {
    margin-bottom: 75px!important
}

.pb-75 {
    padding-bottom: 75px!important
}

.mb-80 {
    margin-bottom: 80px!important
}

.pb-80 {
    padding-bottom: 80px!important
}

.mb-85 {
    margin-bottom: 85px!important
}

.pb-85 {
    padding-bottom: 85px!important
}

.mb-90 {
    margin-bottom: 90px!important
}

.pb-90 {
    padding-bottom: 90px!important
}

.mb-95 {
    margin-bottom: 95px!important
}

.pb-95 {
    padding-bottom: 95px!important
}

.mb-100 {
    margin-bottom: 100px!important
}

.pb-100 {
    padding-bottom: 100px!important
}

.bb-1 {
    border-bottom: 1px solid!important
}

.bb-2 {
    border-bottom: 2px solid!important
}

.bb-3 {
    border-bottom: 3px solid!important
}

.bb-4 {
    border-bottom: 4px solid!important
}

.bb-5 {
    border-bottom: 5px solid!important
}

.ml-auto {
    margin-left: auto!important
}

.ml--20 {
    margin-left: -20px!important
}

.pl--20 {
    padding-left: -20px!important
}

.ml--15 {
    margin-left: -15px!important
}

.pl--15 {
    padding-left: -15px!important
}

.ml--10 {
    margin-left: -10px!important
}

.pl--10 {
    padding-left: -10px!important
}

.ml--5 {
    margin-left: -5px!important
}

.pl--5 {
    padding-left: -5px!important
}

.ml-0 {
    margin-left: 0!important
}

.pl-0 {
    padding-left: 0!important
}

.ml-5 {
    margin-left: 5px!important
}

.pl-5 {
    padding-left: 5px!important
}

.ml-10 {
    margin-left: 10px!important
}

.pl-10 {
    padding-left: 10px!important
}

.ml-15 {
    margin-left: 15px!important
}

.pl-15 {
    padding-left: 15px!important
}

.ml-20 {
    margin-left: 20px!important
}

.pl-20 {
    padding-left: 20px!important
}

.ml-25 {
    margin-left: 25px!important
}

.pl-25 {
    padding-left: 25px!important
}

.ml-30 {
    margin-left: 30px!important
}

.pl-30 {
    padding-left: 30px!important
}

.ml-35 {
    margin-left: 35px!important
}

.pl-35 {
    padding-left: 35px!important
}

.ml-40 {
    margin-left: 40px!important
}

.pl-40 {
    padding-left: 40px!important
}

.ml-45 {
    margin-left: 45px!important
}

.pl-45 {
    padding-left: 45px!important
}

.ml-50 {
    margin-left: 50px!important
}

.pl-50 {
    padding-left: 50px!important
}

.ml-55 {
    margin-left: 55px!important
}

.pl-55 {
    padding-left: 55px!important
}

.ml-60 {
    margin-left: 60px!important
}

.pl-60 {
    padding-left: 60px!important
}

.ml-65 {
    margin-left: 65px!important
}

.pl-65 {
    padding-left: 65px!important
}

.ml-70 {
    margin-left: 70px!important
}

.pl-70 {
    padding-left: 70px!important
}

.ml-75 {
    margin-left: 75px!important
}

.pl-75 {
    padding-left: 75px!important
}

.ml-80 {
    margin-left: 80px!important
}

.pl-80 {
    padding-left: 80px!important
}

.ml-85 {
    margin-left: 85px!important
}

.pl-85 {
    padding-left: 85px!important
}

.ml-90 {
    margin-left: 90px!important
}

.pl-90 {
    padding-left: 90px!important
}

.ml-95 {
    margin-left: 95px!important
}

.pl-95 {
    padding-left: 95px!important
}

.ml-100 {
    margin-left: 100px!important
}

.pl-100 {
    padding-left: 100px!important
}

.bl-1 {
    border-left: 1px solid!important
}

.bl-2 {
    border-left: 2px solid!important
}

.bl-3 {
    border-left: 3px solid!important
}

.bl-4 {
    border-left: 4px solid!important
}

.bl-5 {
    border-left: 5px solid!important
}

.modale {
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity,visibility;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: auto;
    padding: 0 20px;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.modale .modal-content {
    cursor: default;
    padding: 20px;
    border-radius: 20px;
    background: #f0f0f0;
    background: var(--bg);
    margin: 0 auto;
    height: -webkit-max-content;
    height: max-content;
    max-width: 650px;
    overflow: hidden
}

.modale .modal-content h3 {
    text-align: center;
    font-size: 25px;
    margin: 0 0 20px
}

.modale .modal-content p {
    text-align: center;
    font-size: 18px
}

.modale .modal-content label.checkFiltro .placeholder {
    background-color: #fcfcfc;
    background-color: var(--bg1)
}

.modale .modal-content .selectTab {
    margin-top: 0!important
}

.modale.open {
    opacity: 1;
    visibility: visible
}

.modale.long .modal-content {
    margin: 20px auto;
    align-self: baseline
}

.modale.long .modal-content .say-mese {
    top: 0!important
}

.modale.full .modal-content {
    width: 100%
}

.modale.elimina-account .bgalert,.modale.elimina .bgalert {
    opacity: 0;
    transition: opacity .5s 1s
}

.modale.elimina-account.open .bgalert,.modale.elimina.open .bgalert {
    opacity: 1
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    --multiplier: calc(600px - 100%)
}

.row.bkp-300 {
    --multiplier: calc(300px - 100%)
}

.row.bkp-350 {
    --multiplier: calc(350px - 100%)
}

.row.bkp-400 {
    --multiplier: calc(400px - 100%)
}

.row.bkp-450 {
    --multiplier: calc(450px - 100%)
}

.row.bkp-500 {
    --multiplier: calc(500px - 100%)
}

.row.bkp-550 {
    --multiplier: calc(550px - 100%)
}

.row .col,.row .col-2,.row .col-3,.row .col-3-2,.row .col-4,.row .col-4-2,.row .col-4-3 {
    direction: ltr;
    max-width: 100%;
    margin-right: 20px;
    flex-basis: calc(var(--multiplier)*999)
}

.row .auto {
    direction: ltr;
    max-width: 100%;
    margin-right: 20px
}

.row .col {
    width: 100%;
    min-width: 0;
    flex-basis: auto
}

.row .col-2 {
    min-width: calc(50% - 20px)
}

.row .col-3 {
    min-width: calc(33.33333% - 20px)
}

.row .col-3-2 {
    min-width: calc(66.66667% - 20px)
}

.row .col-4 {
    min-width: calc(25% - 20px)
}

.row .col-4-2 {
    min-width: calc(50% - 20px)
}

.row .col-4-3 {
    min-width: calc(75% - 20px)
}

.row.space-between {
    justify-content: space-between
}

.row.a-center {
    align-items: center
}

.row.a-baseline {
    align-items: baseline
}

.row.a-top {
    align-items: flex-start
}

.row.a-bot {
    align-items: flex-end
}

.row.no-wrap {
    flex-wrap: nowrap
}

.row.invert {
    direction: rtl
}

.row.row-gap-10 {
    grid-row-gap: 10px;
    row-gap: 10px
}

.row.row-gap-15 {
    grid-row-gap: 15px;
    row-gap: 15px
}

.row.row-gap-20 {
    grid-row-gap: 20px;
    row-gap: 20px
}

.row.row-gap-25 {
    grid-row-gap: 25px;
    row-gap: 25px
}

.row.row-gap-30 {
    grid-row-gap: 30px;
    row-gap: 30px
}

label {
    position: relative;
    display: block
}

label:not(.checkbox):not(.checkFiltro):not(.file-upload) .placeholder {
    pointer-events: none;
    position: absolute;
    display: block;
    width: 100%;
    font-weight: 700;
    top: 0;
    line-height: 1.4;
    left: 0;
    font-size: 18px;
    padding: 15px 10px;
    color: var(--start50);
    transition-property: font-size,padding,color;
    transition-duration: .3s
}

label:not(.checkbox):not(.checkFiltro):not(.file-upload) .placeholder i {
    font-size: 1.5em;
    margin-top: -15px;
    margin-bottom: -15px;
    display: inline-block;
    vertical-align: middle
}

label:not(.checkbox):not(.checkFiltro):not(.file-upload) input.placeholderUp,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:focus,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:required:invalid:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:required:valid,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select.placeholderUp,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:focus,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:required:invalid:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:required:valid,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea.placeholderUp,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:focus,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:required:invalid:not(:placeholder-shown),label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:required:valid {
    outline: none
}

label:not(.checkbox):not(.checkFiltro):not(.file-upload) input.placeholderUp~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:focus~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:required:invalid:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) input:required:valid~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select.placeholderUp~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:focus~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:required:invalid:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) select:required:valid~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea.placeholderUp~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:focus~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:required:invalid:not(:placeholder-shown)~.placeholder,label:not(.checkbox):not(.checkFiltro):not(.file-upload) textarea:required:valid~.placeholder {
    padding: 5px 10px!important;
    font-size: 14px!important;
    color: #f1800e!important;
    color: var(--primary)!important
}

label input,label select,label textarea {
    color: #595c61;
    color: var(--textcolor);
    font-family: "Open Sans",sans-serif;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    padding: 25px 10px 5px;
    font-weight: 700;
    font-size: 18px;
    display: block;
    border: none;
    line-height: 1;
    width: 100%;
    position: relative;
    margin: 0;
    transition-property: background;
    transition-duration: .3s;
    resize: none;
    -webkit-resize: none;
    -webkit-appearance: none
}

label input[type=date],label select[type=date],label textarea[type=date] {
    padding: 22.41px 20px 10px
}

label input:first-letter,label select:first-letter,label textarea:first-letter {
    text-transform: uppercase
}

label input:-internal-autofill-selected,label select:-internal-autofill-selected,label textarea:-internal-autofill-selected {
    font-size: 18px
}

label[for=prezzo] {
    text-align: center;
    font-size: 30px
}

label[for=prezzo] input {
    padding: 0;
    display: inline-block;
    font-size: 60px;
    max-width: calc(100% - 37px);
    background: 0;
    text-align: center;
    border-radius: 0
}

label.checkbox {
    position: relative;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px
}

label.checkbox .placeholder {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    text-transform: capitalize
}

label.checkbox .checkmark {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    border: 3px solid #a3a3a3;
    border-radius: 10px;
    transition: .3s
}

label.checkbox .checkmark:before {
    position: absolute;
    color: #fff;
    font-size: 20px;
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-align: center;
    width: 30px;
    left: 1px;
    top: 5px;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: .3s
}

label.checkbox input[type=checkbox] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

label.checkbox input[type=checkbox]:checked+.checkmark {
    border: 15px solid #41a36e;
    border: 15px solid var(--primary)
}

label.checkbox input[type=checkbox]:checked+.checkmark:before {
    -webkit-transform: scale(1);
    transform: scale(1)
}

label.checkFiltro {
    width: calc(50% - 5px);
    position: relative;
    cursor: pointer;
    height: -webkit-max-content;
    height: max-content
}

label.checkFiltro.fullWidth {
    width: auto
}

label.checkFiltro .placeholder {
    display: block;
    background-color: #f0f0f0;
    background-color: var(--bg);
    padding: 8px 10px;
    border-radius: 5px;
    transition-property: background,box-shadow;
    transition-duration: .3s
}

label.checkFiltro input[type=checkbox],label.checkFiltro input[type=radio] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

label.checkFiltro input[type=checkbox]:checked+.placeholder,label.checkFiltro input[type=radio]:checked+.placeholder {
    color: #fff;
    background: #f17406;
    background: var(--primary)
}

label.checkFiltro:hover .placeholder {
    box-shadow: 0 0 5px 3px #41a36e;
    box-shadow: 0 0 5px 3px var(--primary)
}

label.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

label.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    background-color: #ccc;
    transition: .3s
}

label.switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background-color: var(--bianco);
    transition: .3s
}

label.switch input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0
}

label.switch input[type=checkbox]:checked+.slider {
    background-color: #e58517;
    background-color: var(--primary)
}

label.switch input[type=checkbox]:checked+.slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px)
}

label.file-upload {
    height: 300px;
    margin: 20px 0 0;
    cursor: pointer
}

label.file-upload .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #ededed;
    background-color: var(--bg2);
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    color: #595c61!important;
    color: var(--textcolor)!important;
    text-align: center
}

label.file-upload input[type=file] {
    cursor: pointer;
    opacity: 0;
    height: 100%;
    width: 100%
}

label.file-upload input[type=file]:focus+.placeholder {
    color: red!important
}

label.clickToView .clickToViewME {
    overflow: hidden;
    height: 0;
    transition-property: height;
    transition-duration: .3s
}

label.clickToView input[type=checkbox] {
    height: 0;
    opacity: 0;
    z-index: 1
}

label.clickToView input[type=checkbox]:checked~.clickToViewME {
    height: 80px
}

label.clickToView .campo {
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: 0;
    font-size: 20px;
    padding: 13px;
    background: var(--start3);
    border-radius: 20px
}

label input[type=color] {
    min-height: 60px;
    padding: 10px
}

label.select-wrap:after {
    z-index: 1;
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: var(--nero);
    right: 14px;
    top: calc(50% - 8px);
    height: 16px;
    position: absolute;
    pointer-events: none
}

label select {
    font-size: 16px
}

label select~.placeholder {
    padding: 0 15px;
    font-size: 15px;
    top: -10px;
    z-index: 1
}

label select~.placeholder:before {
    opacity: 1
}

label.sceglitema {
    height: 125px;
    margin: 100px auto 0;
    width: 125px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.25)
}

label.sceglitema.chiaro {
    background: #fff
}

label.sceglitema.scuro {
    background: #000
}

label.sceglitema input[type=radio] {
    opacity: 0
}

label.thin .placeholder {
    padding: 15px
}

label.thin input,label.thin select,label.thin textarea {
    padding: 20px 10px 10px;
    font-size: 16px
}

label.thin input[type=date],label.thin input[type=datetime-local],label.thin input[type=month],label.thin input[type=time],label.thin input[type=week],label.thin select[type=date],label.thin select[type=datetime-local],label.thin select[type=month],label.thin select[type=time],label.thin select[type=week],label.thin textarea[type=date],label.thin textarea[type=datetime-local],label.thin textarea[type=month],label.thin textarea[type=time],label.thin textarea[type=week] {
    padding: 17.82px 10px 5px
}

label.thin.file-upload:after {
    padding: 20px 15px
}

label.bot-place .placeholder {
    top: auto;
    bottom: 0
}

label.bot-place input:focus~.placeholder,label.bot-place input:not(:placeholder-shown)~.placeholder,label.bot-place input:required:invalid:not(:placeholder-shown)~.placeholder,label.bot-place input:required:valid~.placeholder,label.bot-place select:focus~.placeholder,label.bot-place select:not(:placeholder-shown)~.placeholder,label.bot-place select:required:invalid:not(:placeholder-shown)~.placeholder,label.bot-place select:required:valid~.placeholder,label.bot-place textarea:focus~.placeholder,label.bot-place textarea:not(:placeholder-shown)~.placeholder,label.bot-place textarea:required:invalid:not(:placeholder-shown)~.placeholder,label.bot-place textarea:required:valid~.placeholder {
    top: auto;
    bottom: -10px
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px
}

.button {
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    display: block;
    transition: .3s
}

.button:not(.no-hover):not(.disabled):hover {
    cursor: pointer;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.button.small {
    font-size: 16px;
    padding: 6px
}

.button.short {
    padding-right: 20px;
    padding-left: 20px;
    width: -webkit-max-content;
    width: max-content
}

.button.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.button.border {
    box-shadow: inset 0 0 0 4px #41a36e;
    box-shadow: inset 0 0 0 4px var(--primary)
}

.button.copy {
    position: relative
}

.button.copy:after {
    content: "Copiato";
    position: absolute;
    width: 100%;
    text-align: center;
    top: 10px;
    left: 0;
    opacity: 0;
    transition: opacity .3s
}

.button.copy .copy {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    opacity: 1;
    transition: opacity .3s
}

.button.copy.copying:after {
    opacity: 1
}

.button.copy.copying .copy {
    opacity: 0
}

.button.disabled {
    background: #ededed!important;
    background: var(--bg2)!important;
    color: #595c61;
    color: var(--textcolor)
}

.side-section>h3,h3.side-section {
    font-size: 14px;
    font-weight: 700;
    color: var(--start50);
    margin: 10px
}

.side-section>h3 i,h3.side-section i {
    color: #707680;
    color: var(--textcolorlight);
    margin-right: 5px
}

#serverpage div.side-section {
    margin-left: -15px;
    margin-right: -15px
}

#serverpage div.side-section .section {
    padding: 10px 15px
}

div.side-section .section {
    border-radius: 8px;
    padding: 10px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

div.side-section .section h4 {
    font-size: 14px;
    text-transform: capitalize;
    margin: 0 0 5px
}

div.side-section .section .external_links {
    margin-bottom: 10px
}

div.side-section .section .external_links .mdi.WEBSITE:before {
    content: "󰖟"
}

div.side-section .section .external_links .mdi.FACEBOOK:before {
    content: "󰈌"
}

div.side-section .section .external_links .mdi.TWITTER:before {
    content: "󰕄"
}

div.side-section .section .external_links .mdi.TELEGRAM:before {
    content: "󰔁"
}

div.side-section .section .external_links .mdi.INSTAGRAM:before {
    content: "󰋾"
}

div.side-section .section .external_links .mdi.TIKTOK:before {
    content: ""
}

div.side-section .section .external_links .mdi.SHOP:before {
    content: "󱇕"
}

div.side-section .section .external_links a {
    color: #e08814;
    color: var(--primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

div.side-section .section .premium-label {
    display: block;
    text-align: center;
    margin-bottom: 10px
}

div.side-section .section>div:not(:last-child) {
    margin-bottom: 10px
}

#vote-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity,visibility;
    transition-duration: .3s
}

#vote-popup .popup-body {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 101;
    background: #f0f0f0;
    background: var(--bg);
    padding: 20px;
    border-radius: 10px
}

#vote-popup .popup-body h2 {
    margin: 0;
    text-align: center
}

#vote-popup .popup-body p {
    margin: 30px 0;
    text-align: center
}

#vote-popup .popup-body p b {
    display: block
}

#vote-popup .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,.8);
    cursor: pointer
}

#vote-popup.opened {
    opacity: 1;
    visibility: visible
}

#vote-popup.opened .popup-body {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.openVote {
    cursor: pointer
}

#navbar {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1000;
    height: 65px;
    background: #fcfcfc;
    background: var(--bg1);
    box-shadow: 0 4px 4px hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 4px var(--shadow)
}


#navbar+.container {
    margin-top: 100px
}

#navbar .mobile {
    background: #fcfcfc;
    background: var(--bg1);
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    z-index: 1001;
    top: 0;
    height: 65px;
    padding: 0 20px 0 10px
}

#navbar .mobile .nav-left {
    display: flex;
    height: 100%;
    align-items: center
}

#navbar .mobile .nav-left .nav-logo {
    display: block;
    width: 65px;
    height: 100%;
    padding: 16px 0
}

#navbar .mobile .nav-left .nav-logo img {
    height: 100%;
}

#navbar .mobile .nav-left .nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-right: 5px
}

#navbar .mobile .nav-left .nav-btn div {
    position: relative;
    border-radius: 5px;
    width: 30px;
    height: 3px;
    background: #595c61;
    background: var(--textcolor);
    -webkit-animation-name: nav-btn-in;
    animation-name: nav-btn-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

#navbar .mobile .nav-left .nav-btn div:after,#navbar .mobile .nav-left .nav-btn div:before {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 5px;
    width: 30px;
    height: 3px;
    background: #595c61;
    background: var(--textcolor)
}

#navbar .mobile .nav-left .nav-btn div:before {
    top: -8px;
    -webkit-animation: nav-btn-before-out 0.6s ease;
    animation: nav-btn-before-out 0.6s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

#navbar .mobile .nav-left .nav-btn div:after {
    bottom: -8px;
    -webkit-animation: nav-btn-after-in 0.6s ease;
    animation: nav-btn-after-in 0.6s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    animation-timing-function: cubic-bezier(.46,.03,.52,.96);
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

#navbar .menu {
    justify-content: space-between;
    padding: 0 20px;
    margin: 0 auto;
    max-width: 1240px
}

#navbar .menu,#navbar .menu .nav-left {
    display: flex;
    align-items: center;
    height: 100%
}

#navbar .menu .nav-left {
    display: flex;
    align-items: center;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px
}

#navbar .menu .nav-left .nav-logo {
    height: 100%;
    padding: 7px 20px
}

#navbar .menu .nav-left .nav-logo img {
    height: 100%;
}

#navbar .menu .nav-left .nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    color: #707680;
    color: var(--textcolorlight);
    transition: color .2s
}

#navbar .menu .nav-left .nav-item:after {
    content: " ";
    display: table;
    clear: both;
    right: 100%
}

#navbar .menu .nav-left .nav-item:hover {
    color: #595c61;
    color: var(--textcolor)
}

#navbar .menu .nav-left .nav-item:hover:after {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    height: 4px;
    border-radius: 8px;
    background: #707680;
    background: var(--textcolorlight);
    display: block;
    transition: right .2s ease-in
}

#navbar .menu .nav-left .nav-item.active {
    font-weight: 700;
    color: #e67b0f
}

#navbar .menu .nav-left .nav-item.active:after {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    height: 4px;
    border-radius: 8px;
    display: block;
    transition: right .2s ease-in;
    background: linear-gradient(-270deg,#fa970d 0%, #fcb758 100%)
}

#navbar .nav-right {
    display: flex;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    height: 100%;
    align-items: center;
    color: #fff
}

#navbar .nav-right .p-navgroup-link--logIn i:after {
    content: "󰷖"
}

#navbar .nav-right .p-navgroup-link--logIn i:after,#navbar .nav-right .p-navgroup-link--register i:after {
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: 18px;
    font-weight: 400;
    line-height: inherit;
    width: auto;
    min-width: 1em;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 5px
}

#navbar .nav-right .p-navgroup-link--register i:after {
    content: "󰅌"
}

#navbar .nav-right a {
    font-size: 14px;
    color: #707680;
    color: var(--textcolorlight);
    transition: color .2s
}

#navbar .nav-right a:hover {
    color: #595c61;
    color: var(--textcolor)
}

#navbar .nav-right .avatar {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    background-color: #df760d;
    background-color: var(--primary);
    margin-left: 5px;
    border-radius: 10px;
    color: #fff;
    position: relative
}

#navbar .nav-right .avatar img {
    left: 0;
    top: 0;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* THEME */

#navbar .nav-right .changeTema {
    cursor: pointer;
    color: #707680;
    color: var(--textcolorlight);
    transition-property: color;
    transition-duration: .3s
}

#navbar .nav-right .changeTema i {
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0);
    transform: translate(0);
    width: auto
}

#navbar .nav-right .changeTema i:before {
    font-size: 22px;
    content: "󰽥"
}

.darkmode #navbar .nav-right .changeTema i:before {
    content: "󰌶"
}

#navbar .nav-right .changeTema:hover {
    color: #595c61;
    color: var(--textcolor)
}

/* MESSAGES */

#navbar .nav-right .messages {
    cursor: pointer;
    color: #707680;
    color: var(--textcolorlight);
    transition-property: color;
    transition-duration: .3s
}

#navbar .nav-right .messages i {
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0);
    transform: translate(0);
    width: auto
}

#navbar .nav-right .messages i:before {
    color: inherit;
    font-size: 22px;
    content: "\f0e0"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.darkmode #navbar .nav-right .messages i:before {
    color: inherit;
    content: "\f0e0"; 
}

#navbar .nav-right .messages:hover {
    color: #595c61;
    color: var(--textcolor)
}

/* ALERT */

#navbar .nav-right .alerts {
    cursor: pointer;
    color: #707680;
    color: var(--textcolorlight);
    transition-property: color;
    transition-duration: .3s
}

#navbar .nav-right .alerts i {
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0);
    transform: translate(0);
    width: auto
}

#navbar .nav-right .alerts i:before {
    color: inherit;
    font-size: 22px;
    content: "\f0f3"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.darkmode #navbar .nav-right .alerts i:before {
    color: inherit;
    content: "\f0f3"; 
}

#navbar .nav-right .alerts:hover {
    color: #595c61;
    color: var(--textcolor)
}

/* ADBITS */

#navbar .nav-right .adbits {
    cursor: pointer;
    color: #d2700f;
    transition-property: color;
    transition-duration: .3s
}

#navbar .nav-right .adbits i {
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0);
    transform: translate(0);
    width: auto
}

#navbar .nav-right .adbits i:before {
    color: #d2700f;
    font-size: 22px;
    content: "\f51e"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}



.darkmode #navbar .nav-right .adbits i:before {
    color: #d2700f;
    content: "\f51e"; 
}

#navbar .nav-right .adbits:hover {
    color: #595c61;
    color: var(--textcolor)
}

@media screen and (max-width: 900px) {
    #navbar .overlay {
        width:100%;
        height: 100%;
        z-index: 100;
        background: rgba(0,0,0,.4);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity,visibility
    }

    #navbar .menu,#navbar .overlay {
        position: fixed;
        left: 0;
        top: 0;
        transition-duration: .3s
    }

    #navbar .menu {
        background: #fcfcfc;
        background: var(--bg1);
        z-index: 1000;
        min-width: 250px;
        width: 70vw;
        max-width: 350px;
        padding: 65px 0 0;
        flex-direction: column;
        grid-row-gap: 10px;
        row-gap: 10px;
        -webkit-transform: translateX(-101%);
        transform: translateX(-101%);
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform
    }

    #navbar .menu .nav-left {
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: flex-start
    }

    #navbar .menu .nav-left .nav-logo {
        display: none
    }

    #navbar .menu .nav-left .nav-item {
        height: auto;
        width: 100%;
        padding: 10px 15px
    }

    #navbar .menu .nav-left .nav-item:after {
        display: none!important
    }

    #navbar .menu .nav-left .nav-item.active {
        font-weight: 400;
        background-color: #ededed;
        background-color: var(--bg2)
    }

    #navbar .menu .nav-right {
        display: none
    }

    #navbar .mobile {
        display: flex
    }

    #navbar+#account-page>.page>.side {
        position: fixed;
        z-index: 2000;
        overflow: auto;
        height: calc(100% - 210px);
        left: 0;
        bottom: 0;
        min-width: 250px;
        width: 70vw;
        max-width: 350px;
        -webkit-transform: translateX(-101%);
        transform: translateX(-101%);
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        transition-duration: .3s
    }

    #navbar+#account-page>.page>.side .block-container {
        border-radius: 0;
        box-shadow: none
    }

    #navbar.opened .overlay {
        opacity: 1;
        visibility: visible
    }

    #navbar.opened .menu {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    #navbar.opened .mobile .nav-btn div {
        -webkit-animation: nav-btn-out 0.6s ease;
        animation: nav-btn-out 0.6s ease;
        -webkit-animation-direction: normal;
        animation-direction: normal
    }

    #navbar.opened .mobile .nav-btn div:before {
        -webkit-animation: nav-btn-before-out 0.6s ease;
        animation: nav-btn-before-out 0.6s ease;
        -webkit-animation-direction: normal;
        animation-direction: normal
    }

    #navbar.opened .mobile .nav-btn div:after {
        -webkit-animation: nav-btn-after-in 0.6s ease;
        animation: nav-btn-after-in 0.6s ease;
        -webkit-animation-direction: normal;
        animation-direction: normal
    }

    #navbar.opened+#account-page>.page>.side {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

#footer {
    border-top: 4px solid #41a36e;
    border-top: 4px solid var(--primary);
    background: #fcfcfc;
    background: var(--bg1);
    margin-top: auto;
    z-index: -1;
}

#footer .menu {
    height: 100%;
    padding: 48px 0;
    font-size: 12px
}

#footer .menu p {
    line-height: 1.7;
    margin: 0;
    padding: 15px 0
}

#footer .menu h3 {
    font-size: 13px;
    margin: 0;
    padding: 0 0 10px;
    text-decoration: none;
    font-weight: 700
}

#footer .menu h3 i {
    font-size: 18px;
    padding-right: 10px
}

#footer .menu .nav-right {
    display: flex;
    flex-direction: column
}

#footer .menu .nav-right .nav-item {
    padding: 7.5px;
    border-bottom: 1px solid hsla(0,0%,100%,.12)
}

#footer>.bottom {
    background: #ededed;
    background: var(--bg2);
    padding-bottom: 10px
}

#footer>.bottom .top {
    text-align: right;
    font-size: 22px;
    padding-top: 15px;
    padding-bottom: 15px
}

#footer>.bottom .top .socialMedia a {
    color: #d89f0f;
    color: var(--primary)
}

#footer>.bottom .bottom {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#footer>.bottom .bottom .buttons .btn {
    cursor: pointer;
    margin: 6px;
    color: var(--start50);
    border: 2px solid #ededed;
    border: 2px solid var(--bg2);
    padding: 6px;
    border-radius: 4px;
    display: inline-block
}

#footer>.bottom .bottom .buttons .btn.changeTema:after {
    content: "RewardADs Light"
}

#footer>.bottom .bottom .linkList a {
    padding: 6px;
    border-radius: 4px;
    display: inline-block
}

#footer>.bottom .bottom .linkList a.rssLink>span {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 1.44em;
    height: 1.44em;
    line-height: 1.44em;
    text-align: center;
    font-size: .8em;
    background-color: orange;
    border-radius: 2px
}

@media screen and (max-width: 730px) {
    #footer>.bottom .bottom {
        display:block
    }
}

.status_slider {
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    padding: 0 5px!important
}

.status_slider .swiper-wrapper {
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    align-items: center
}

.status_slider .swiper-wrapper .checkFiltro {
    width: auto
}

.status_slider .swiper-wrapper .swiper-slide {
    width: -webkit-max-content;
    width: max-content;
    padding: 8.2px 5px
}

.storico {
    display: flex;
    align-items: center;
    margin-bottom: 30px
}

.storico .titolo {
    font-size: 16px;
    width: 130px
}

.storico .mySwiper {
    width: calc(100% - 130px)
}

.storico .mySwiper .swiper-wrapper {
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    align-items: center
}

.storico .mySwiper .swiper-wrapper .swiper-slide {
    width: -webkit-max-content;
    width: max-content;
    padding: 10px 0
}

.storico .server {
    width: -webkit-max-content;
    width: max-content;
    width: 207px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    padding: 5px;
    margin: 0 10px;
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

.storico .server .info {
    align-items: center;
    display: flex;
    width: calc(100% - 39px)
}

.storico .server .info .img {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 5px
}

.storico .server .info .img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.storico .server .info .name {
    margin: 0 5px;
    width: calc(100% - 44px);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.storico .server .position {
    background: #f0f0f0;
    background: var(--bg);
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center
}

.storico .altro {
    height: 44px;
    width: -webkit-max-content;
    width: max-content;
    align-items: center;
    display: flex;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

@media screen and (max-width: 500px) {
    .storico {
        display:block
    }

    .storico .titolo {
        text-align: center;
        width: 100%
    }

    .storico .mySwiper {
        margin: 0 -20px;
        width: calc(100% + 40px);
        padding: 0 10px
    }
}

h1.account-section {
    padding: 0;
    font-size: 36px;
    font-weight: 400;
    margin: 0 auto 23px 0
}

.page {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 25px;
    -webkit-column-gap: 25px;
    column-gap: 25px;
    grid-row-gap: 20px;
    row-gap: 20px;
    --multiplier: calc(854px - 100%)
}

.page .content,.page .side {
    max-width: 100%;
    flex-basis: calc(var(--multiplier)*999)
}

.page:not(.ltr) {
    direction: rtl
}

.page .side {
    direction: ltr;
    min-width: 250px
}

.page .side .block-container {
    overflow: auto;
    border-radius: 8px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow);
    color: #707680;
    color: var(--textcolorlight);
    margin-bottom: 20px
}

.page .side .block-container .block-header {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    border-bottom: 1px solid #ededed;
    border-bottom: 1px solid var(--bg2)
}

.page .side .block-container .block-header:before {
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: 18px!important;
    padding-right: 10px;
    font-weight: 400;
    line-height: inherit;
    width: auto;
    content: "󰈤";
    text-align: center
}

.page .side .block-container .block-header:not(:first-child) {
    border-top: 1px solid #ededed;
    border-top: 1px solid var(--bg2);
    margin-top: 10px
}

.page .side .block-container .block-body {
    font-size: 13px
}

.page .side .block-container .block-body a {
    display: block;
    color: #707680;
    color: var(--textcolorlight);
    text-decoration: none;
    cursor: pointer;
    padding: 7.5px 15px
}

.page .side .block-container .block-body a.active,.page .side .block-container .block-body a:hover {
    background-color: #fcfcfc;
    background-color: var(--bg1)
}

.page .side .block-container .block-body a.active {
    color: #e97c07;
    color: var(--primary);
    font-weight: 700;
    border-left: 2px solid #d2700f;
    border-left: 2px solid var(--primary);
    padding-left: 13px
}

.page .side .cercaEfiltri {
    grid-row-gap: 10px;
    row-gap: 10px
}

.page .side .cercaEfiltri .cerca {
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

.page .side .button.openFilter {
    display: none
}

.page .side .filtri {
    margin-top: 10px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    grid-row-gap: 10px;
    row-gap: 10px
}

@media screen and (max-width: 900px) {
    .page .side .button.openFilter {
        display:block
    }

    .page .side .filtri-wrap {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity,visibility;
        transition-duration: .3s
    }

    .page .side .filtri-wrap h3.side-section {
        display: none
    }

    .page .side .filtri-wrap .filtri {
        position: relative;
        z-index: 101;
        max-width: 400px;
        max-height: 100%;
        overflow: auto
    }

    .page .side .filtri-wrap .overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(0,0,0,.6);
        cursor: pointer
    }

    .page .side .filtri-wrap.opened {
        opacity: 1;
        visibility: visible
    }
}

.page .side.disable {
    display: none!important
}

.page .side.disable+.content {
    min-width: 100%
}

.page .content {
    min-width: calc(100% - 275px);
    direction: ltr
}

.serverBox-bar {
    background: #fcfcfc;
    background: var(--bg1);
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    padding: 0 10px
}

.serverBox-bar div {
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer
}

.serverBox-bar div:after {
    content: "";
    font-family: "Font Awesome 6 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left: 5px;
    transition: opacity .3s;
    opacity: .3
}

.serverBox-bar div.fromH:after {
    content: "";
    font-weight: 900;
    opacity: 1
}

.serverBox-bar div.fromL:after {
    content: "";
    font-weight: 900;
    opacity: 1
}

.serverBox-bar div:hover:after {
    opacity: 1
}

.serverBox-bar .voti {
    padding-left: 5px;
    width: 158px
}

.serverBox-bar .server {
    width: calc(100% - 263px)
}

.serverBox-bar .player {
    width: 105px
}

@media screen and (max-width: 650px) {
    .serverBox-bar .voti {
        padding-left:5px;
        width: 75px
    }

    .serverBox-bar .server {
        width: calc(90% - 115px)
    }
}

.serverBox {
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    margin: 15px 0;
    padding: 10px;
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow);
    display: flex;
    position: relative;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s,-webkit-filter .3s
}

.serverBox:first-child {
    margin-top: 0
}

.serverBox .position {
    min-width: 75px;
    max-width: 75px;
    min-height: 58px;
    max-height: 58px;
    text-align: center;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch
}

.serverBox .position .place {
    font-size: 18px;
    height: 100%;
    font-weight: 700
}

.serverBox .position .vote {
    font-size: 14px;
    padding: 5px 0;
    border-radius: 5px;
    box-shadow: inset 0 0 0 3px #ec9303;
    box-shadow: inset 0 0 0 3px var(--primary);
    color: #595c61!important;
    color: var(--textcolor)!important
}

.serverBox .position .vote.votato {
    color: #fff!important;
    box-shadow: inset 0 0 0 20px #ee9106;
    box-shadow: inset 0 0 0 20px var(--primary);
    font-weight: 700
}

.serverBox .position .vote.gold {
    box-shadow: inset 0 0 0 3px #ffd600
}

.serverBox .position .vote.gold.votato {
    color: #000!important;
    box-shadow: inset 0 0 0 20px #ffd600
}

.serverBox .position .vote.silver {
    box-shadow: inset 0 0 0 3px #adadad
}

.serverBox .position .vote.silver.votato {
    color: #000!important;
    box-shadow: inset 0 0 0 20px #adadad
}

.serverBox .position .vote.bronze {
    box-shadow: inset 0 0 0 3px #e49b45
}

.serverBox .position .vote.bronze.votato {
    color: #000!important;
    box-shadow: inset 0 0 0 20px #e49b45
}

.serverBox .server-icon {
    margin-right: 10px;
    min-width: 58px;
    max-width: 58px;
    min-height: 58px;
    max-height: 58px;
    border-radius: 5px;
    text-align: center
}

.serverBox .server-icon.no-icon {
    background: url(https://platform.rewardads.it/data/assets/logo/rewardads-logo-rounded.png);
    background-size: contain
}

.serverBox .server-icon.no-icon img {
    display: none
}

.serverBox .server-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.serverBox .server-info {
    width: calc(100% - 268px);
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.serverBox .server-info .server-data {
    display: flex;
    align-items: baseline
}

.serverBox .server-info .server-data .server-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 700;
    min-width: -webkit-max-content;
    min-width: max-content
}

.serverBox .server-info .server-data .server-version {
    white-space: nowrap;
    margin-left: 5px;
    color: var(--start50);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis
}

.serverBox .server-info .server-btn {
    direction: rtl;
    display: flex;
    align-items: stretch;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px
}

.serverBox .server-info .server-btn .server-modes {
    overflow: hidden;
    width: 100%;
    direction: ltr
}

.serverBox .server-info .server-btn .server-modes .swiper-container {
    overflow: unset;
    height: 100%;
    width: 100%
}

.serverBox .server-info .server-btn .server-modes .swiper-container .swiper-wrapper {
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    align-items: center
}

.serverBox .server-info .server-btn .server-modes .swiper-slide {
    width: -webkit-max-content;
    width: max-content
}

.serverBox .server-info .server-btn .server-modes .swiper-slide .tag-mode {
    display: block;
    font-size: 14px;
    padding: 5px 10px;
    margin: 0 10px 0 0;
    border-radius: 5px;
    background: #ededed;
    background: var(--bg2)
}

.serverBox .server-info .server-btn .server-ip {
    cursor: pointer;
    position: relative;
    min-width: -webkit-max-content;
    min-width: max-content;
    overflow: hidden;
    font-size: 14px;
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
    background: #ea7208;
    background: var(--primary);
    direction: ltr
}

.serverBox .server-info .server-btn .server-ip:after {
    content: "Copiato";
    position: absolute;
    color: #595c61;
    color: var(--textcolor);
    z-index: 1;
    width: 100%;
    text-align: center;
    left: 0;
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s,-webkit-transform .4s
}


.uix_extendedFooter {
    position: relative;
    line-height: 1.7;
}

.uix_extendedFooter {
    order: 10;
    background: var(--bg1);
    border-top: 0 solid #d3e1f6;
    border-bottom-width: 0;
    border-bottom-style: solid;
    padding-top: 48px;
    padding-bottom: 48px;
    line-height: 1.7;
}

.uix_extendedFooter .pageContent {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    width: calc(100% - 40px);
    transition: max-width 0.2s;
    padding: 0;
}

.uix_extendedFooter .uix_extendedFooterRow {
    display: flex
;
    flex-wrap: wrap;
    grid-gap: 35px;
}

.uix_extendedFooter .uix_extendedFooterRow > .block {
    font-size: 0.8rem;
    flex-basis: 280px;
    margin: 0;
    flex-grow: 1;
    min-width: 0;
}

.uix_extendedFooter .uix_extendedFooterRow .block-body {
    display: flex;
    flex-direction: column; 
    gap: 5px; 
}


.block:last-child {
    margin-bottom: 0;
}
.block {
    margin-bottom: 20px;
}

.uix_extendedFooter .uix_extendedFooterRow > .block .block-container {
    margin-left: 0;
    margin-right: 0;
    background: none;
    border-width: 0;
    border-style: solid;
    padding: 0;
    box-shadow: none;
}

.block-container {
    color: var(--textcolor);
    border-top-color: rgb(211, 225, 246);
    border-right-color: rgb(211, 225, 246);
    border-bottom-color: rgb(211, 225, 246);
    border-left-color: rgb(211, 225, 246);
    box-shadow: rgba(88, 106, 153, 0.2) 0px 4px 15px 0px;
    background: rgb(255, 255, 255);
    border-width: 0px;
    border-style: solid;
    border-radius: 8px;
}

.uix_extendedFooter .uix_extendedFooterRow > .block .block-container .block-minorHeader {
    background: none;
    border-bottom-width: 0;
    border-bottom-style: solid;
    padding: 0;
    padding-bottom: 10px;
}

.block-minorHeader {
    font-size: 0.9rem;
    color: var(--textcolor);
    font-weight: 700;
    padding: 15px;
    margin: 0px;
    text-decoration: none;
}

.block-body {
    
    list-style: none;
    margin: 0;
    padding: 0;
}



@media (min-width: 900px) {
    .uix_extendedFooter {
        animation: macroAnimation 0.15s ease;
        animation-delay: 0.6s;
        animation-fill-mode: backwards;
    }
}

.uix_extendedFooter .uix_extendedFooterRow > .block .block-container .block-row, .uix_extendedFooter .uix_extendedFooterRow > .block .block-container .blockLink {
    padding-right: 0;
    padding-left: 0;
}


.serverBox .server-info .server-btn .server-ip:before {
    content: "";
    position: absolute;
    background: #f0f0f0;
    background: var(--bg);
    border-radius: 50px;
    width: 70%;
    height: 100%;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition-property: top,border-radius,width;
    transition-duration: .4s
}

.serverBox .server-info .server-btn .server-ip.copying:before {
    top: 0;
    border-radius: 5px;
    width: 100%
}

.serverBox .server-info .server-btn .server-ip.copying:after {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

@media screen and (max-width: 650px) {
    .serverBox .server-info {
        height:95px
    }

    .serverBox .server-info .server-data {
        display: block
    }

    .serverBox .server-info .server-data .server-name {
        min-width: 0
    }

    .serverBox .server-info .server-data .server-version {
        font-size: 15px;
        margin: 5px 0 0
    }

    .serverBox .server-info .server-btn {
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: calc(100% - 20px)
    }
}

@media screen and (max-width: 550px) {
    .serverBox .server-info .server-data .server-name {
        font-size:18px
    }
}

@media screen and (max-width: 450px) {
    .serverBox .server-info {
        height:132px
    }

    .serverBox .server-info .server-data .server-name,.serverBox .server-info .server-data .server-version {
        width: calc(100% + 115px)
    }

    .serverBox .server-info .server-btn {
        flex-direction: column;
        grid-row-gap: 10px;
        row-gap: 10px
    }

    .serverBox .server-info .server-btn .server-ip {
        text-align: center;
        max-width: 100%
    }
}

.serverBox .player {
    min-width: 105px;
    max-width: 105px;
    min-height: 58px;
    max-height: 58px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch
}

.serverBox .player .player-online {
    margin-bottom: 5px;
    height: 100%;
    font-weight: 700;
    border-radius: 5px;
    background: #ededed;
    background: var(--bg2);
    display: flex;
    flex-direction: column
}

.serverBox .player .player-online .num-player {
    margin-bottom: -4px;
    padding-top: 1px;
    font-size: 14px;
    height: 100%
}

.serverBox .player .player-online .online {
    font-weight: 400;
    font-size: 10px;
    color: #ea8808;
    color: var(--primary)
}

.serverBox .player .player-online .offline {
    font-weight: 400;
    font-size: 10px;
    color: #913e36;
    color: var(--alert)
}

.serverBox .player .player-online.off {
    opacity: 0
}

.serverBox .player .server-edition {
    padding: 2px 0;
    background: #ededed;
    background: var(--bg2);
    font-size: 14px;
    border-radius: 5px
}

@media screen and (max-width: 450px) {
    .serverBox .player {
        opacity:0
    }
}

@media screen and (max-width: 650px) {
    .serverBox .server-icon {
        min-width:58px;
        max-width: 58px;
        min-height: 58px;
        max-height: 58px
    }

    .serverBox .position {
        min-width: 60px;
        max-width: 60px
    }

    .serverBox .position .place {
        padding: 0
    }

    .serverBox .server-info {
        width: calc(100% - 246px)
    }
}

.serverBox:hover {
    -webkit-filter: brightness(.95);
    filter: brightness(.95)
}

@media screen and (max-width: 450px) {
    .serverBox.noTag .server-info {
        height:102px
    }
}

@-webkit-keyframes movingGradient {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 100%
    }
}

@keyframes movingGradient {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 100%
    }
}

#serverpage {
    overflow: hidden
}

#account-page #serverpage {
    border-radius: 8px
}

#serverpage .serverLandscape {
    height: 40vh;
    max-height: 300px;
    min-height: 150px;
    background: linear-gradient(90deg,#41a36e,#68de9d);
    background: var(--gradient);
    background-size: 200% 200%;
    -webkit-animation: movingGradient 3s linear infinite alternate;
    animation: movingGradient 3s linear infinite alternate;
    position: relative
}

#serverpage .serverLandscape .banner {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#serverpage .serverLandscape .buttons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    grid-row-gap: 10px;
    row-gap: 10px;
    justify-content: space-between
}

#serverpage .serverLandscape .buttons .btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px 9px 5px 5px;
    grid-column-gap: 3px;
    -webkit-column-gap: 3px;
    column-gap: 3px;
    background: #f0f0f0;
    background: var(--bg);
    width: -webkit-max-content;
    width: max-content;
    border-radius: 4px;
    font-weight: 700
}

#serverpage .serverLandscape .buttons .btn i {
    font-size: 25px;
    margin: -6px 0 -6px -4px
}

#serverpage .serverLandscape .buttons .btn.modifica i {
    font-size: 16px;
    margin: 0 5px
}

#serverpage .container {
    position: relative;
    z-index: 1
}

#serverpage .page {
    --multiplier: calc(650px - 100%);
    margin-top: -50px
}

#serverpage .page .content,#serverpage .page .side {
    background-color: #f0f0f0;
    background-color: var(--bg);
    border-radius: 20px
}

#serverpage .page .side {
    padding: 20px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;
    row-gap: 20px
}

#serverpage .page .side .server-modes {
    width: 100%;
    direction: ltr
}

#serverpage .page .side .server-modes .swiper-container {
    height: 100%;
    width: calc(100% + 30px);
    margin: 0 -15px;
    padding: 0 10px
}

#serverpage .page .side .server-modes .swiper-container .swiper-wrapper {
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    align-items: center
}

#serverpage .page .side .server-modes .swiper-slide {
    width: -webkit-max-content!important;
    width: max-content!important
}

#serverpage .page .side .server-modes .swiper-slide .tag-mode {
    display: block;
    font-size: 14px;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 5px;
    background: #ededed;
    background: var(--bg2)
}

#serverpage .page .side .todayvotes {
    height: 170px;
    overflow: auto;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    grid-row-gap: 10px;
    row-gap: 10px;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px
}

#serverpage .page .side .todayvotes .userwhovoted {
    display: flex;
    align-items: center
}

#serverpage .page .side .todayvotes .userwhovoted .avatar {
    width: 30.8px;
    height: 30.8px
}

#serverpage .page .side .todayvotes .userwhovoted .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#serverpage .page .content .server-name {
    padding: 10px 10px 0;
    display: flex;
    align-items: center;
    grid-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px
}

#serverpage .page .content .server-name .server-icon {
    min-width: 75px;
    max-width: 75px;
    width: 75px;
    min-height: 75px;
    max-height: 75px;
    height: 75px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center
}



#serverpage .page .content .server-name .server-icon.no-icon img {
    display: none
}

#serverpage .page .content .server-name .server-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

#serverpage .page .content .server-name .name {
    font-size: 28px;
    font-weight: 700;
    width: calc(100% - 75px)
}

#serverpage .page .content .server-name .name .position {
    padding-right: 10px
}

#serverpage .page .content .server-name .name .auto:not(.position) {
    overflow: hidden;
    text-overflow: ellipsis
}

#serverpage .page .content .server-name .name .impostazioni {
    cursor: pointer;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    font-size: 25px;
    width: 34px;
    height: 34px;
    justify-content: center;
    margin-right: 20px;
    display: flex;
    align-items: center
}

@media screen and (max-width: 450px) {
    #serverpage .page .content .server-name .server-icon {
        min-width:50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px
    }

    #serverpage .page .content .server-name .name {
        font-size: 25px;
        width: calc(100% - 50px)
    }
}

#serverpage .page .content #server-tabpanel-descrizione {
    word-break: break-word;
    font-size: 15px;
    max-width: 100%
}

#serverpage .page .content #server-tabpanel-descrizione .description {
    word-break: break-word;
    overflow: hidden
}

#serverpage .page .content #server-tabpanel-descrizione .description img {
    max-width: 100%;
    height: auto!important
}

#serverpage .page .content #server-tabpanel-descrizione .description iframe {
    width: 100%
}

#serverpage .page .content #server-tabpanel-staff {
    overflow: hidden
}

#serverpage .page .content #server-tabpanel-staff .modal-content {
    width: 100%;
    max-width: 400px
}

#serverpage .page .content #server-tabpanel-staff .staffSection {
    margin: 50px auto
}

#serverpage .page .content #server-tabpanel-staff .staffSection h3 {
    text-align: center;
    font-size: 25px;
    position: relative
}

#serverpage .page .content #server-tabpanel-staff .staffSection h3 i {
    cursor: pointer;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    width: 34px;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center
}

#serverpage .page .content #server-tabpanel-staff .staffSection .swiper-container {
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    overflow: visible
}

#serverpage .page .content #server-tabpanel-staff .staffSection .swiper-container .swiper-slide {
    width: auto
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox {
    min-width: 130px;
    width: -webkit-max-content;
    width: max-content;
    padding: 10px;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    margin: 0 10px 36px;
    position: relative
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .staffHead {
    width: 110px;
    height: 110px;
    margin: 0 auto
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .staffHead img {
    width: 100%
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .staffHead i {
    font-size: 70px;
    width: 100%;
    text-align: center;
    margin: 22.5px 0
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .staffName {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 700
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .wrap-btn {
    position: absolute;
    bottom: -36px;
    width: calc(100% - 20px);
    display: flex;
    grid-column-gap: 5px;
    -webkit-column-gap: 5px;
    column-gap: 5px
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .wrap-btn .staffbtn {
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 5px
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox .wrap-btn .staffbtn[data-modal] {
    width: 100%
}

#serverpage .page .content #server-tabpanel-staff .staffSection .staffBox.nuovo {
    cursor: pointer
}

@media screen and (max-width: 1000px) {
    #serverpage .page .content #server-tabpanel-staff {
        margin:0 -20px;
        padding: 0 20px
    }
}

#serverpage .page .content #server-tabpanel-statistiche {
    overflow: hidden
}

#serverpage .page .content #server-tabpanel-statistiche h3 {
    text-align: center;
    margin: 50px 0 20px;
    font-size: 20px
}

#serverpage .page .content #server-tabpanel-statistiche .recharts-tooltip-label {
    color: #000
}

#serverpage .page:not([mobile=true]) .side .server-modes .swiper-container {
    overflow: hidden;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0
}

#serverpage .page:not([mobile=true]) .side .server-modes .swiper-container .swiper-wrapper {
    flex-wrap: wrap;
    width: auto;
    grid-row-gap: 10px;
    row-gap: 10px;
    margin: 0 -5px;
    padding: 0
}

#serverpage .page:not([mobile=true]) .side .votaserver h3.mobile {
    display: none
}

#serverpage .page[mobile=true] {
    position: relative
}

#serverpage .page[mobile=true] .content {
    padding-top: 64px
}

#serverpage .page[mobile=true] .content .serverTab {
    top: 40px
}

#serverpage .page[mobile=true] .side .button[data-address] {
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: calc(100% - 20px)
}

#serverpage .page[mobile=true] .side .votaserver {
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0
}

#serverpage .page[mobile=true] .side .votaserver>h3 {
    display: none
}

#serverpage .page[mobile=true] .side .votaserver .section {
    padding: 15px 15px 30px
}

#serverpage .page[mobile=true] .side .votaserver .section h3.mobile {
    margin: 0
}

#serverpage.crea .modale[data-modal=editFilter] .filtri {
    margin-top: 10px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    grid-row-gap: 10px;
    row-gap: 10px
}

#serverpage.crea .modale[data-modal=editFilter] .filtri label input:not(:checked)+.placeholder {
    background: #f0f0f0;
    background: var(--bg)
}

#serverpage.crea .modale[data-modal=editLink] option:disabled {
    display: none
}

#serverpage.crea .modale[data-modal=editLink] .button.invert {
    background: transparent;
    color: #f1880e;
    color: var(--primary);
    box-shadow: inset 0 0 0 5px #e68508;
    box-shadow: inset 0 0 0 5px var(--primary)
}

#serverpage.crea .modale[data-modal=removeServerIcon] .uploading_image,#serverpage.crea .modale[data-modal=updateServerIcon] .uploading_image {
    height: 300px
}

#serverpage.crea .modale[data-modal=removeServerIcon] .uploading_image .img,#serverpage.crea .modale[data-modal=updateServerIcon] .uploading_image .img {
    height: 246px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

#serverpage.crea .modale[data-modal=removeServerIcon] .uploading_image .img img,#serverpage.crea .modale[data-modal=updateServerIcon] .uploading_image .img img {
    height: 75px;
    width: 75px;
    object-fit: cover
}

#serverpage.crea .modale[data-modal=removeServerBanner] .uploading_image,#serverpage.crea .modale[data-modal=updateServerBanner] .uploading_image {
    height: 300px
}

#serverpage.crea .modale[data-modal=removeServerBanner] .uploading_image .img,#serverpage.crea .modale[data-modal=updateServerBanner] .uploading_image .img {
    height: 246px;
    margin-bottom: 10px
}

#serverpage.crea .modale[data-modal=removeServerBanner] .uploading_image .img img,#serverpage.crea .modale[data-modal=updateServerBanner] .uploading_image .img img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

#serverpage.crea .page .content .server-name .server-icon {
    cursor: pointer;
    overflow: unset;
    position: relative;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

#serverpage.crea .page .content .server-name .server-icon:after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e98605;
    background: var(--primary);
    border-radius: 20px;
    opacity: .7;
    transition-property: background,opacity,top,left,width,height;
    transition-duration: .3s
}

#serverpage.crea .page .content .server-name .server-icon .eliminaServerIcon {
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    position: absolute;
    bottom: -10px;
    width: 100%;
    transition-property: visibility,opacity,bottom;
    transition-duration: .3s
}

#serverpage.crea .page .content .server-name .server-icon:hover .eliminaServerIcon {
    visibility: visible;
    bottom: -25px;
    opacity: 1
}

#serverpage.crea .page .content .server-name .server-icon:hover:after {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    opacity: 1
}

#serverpage.crea .page .content .jodit {
    min-height: 200px;
    min-width: 200px;
    max-width: 100%;
    height: auto!important;
    width: auto!important;
    border-color: #fcfcfc;
    border-color: var(--bg1)
}

#serverpage.crea .page .content .jodit .jodit-toolbar__box {
    background-color: #f0f0f0;
    background-color: var(--bg);
    border-color: #fcfcfc;
    border-color: var(--bg1)
}

#serverpage.crea .page .content .jodit .jodit-toolbar__box .jodit-toolbar-button__button:hover,#serverpage.crea .page .content .jodit .jodit-toolbar__box .jodit-toolbar-button__trigger:hover {
    background-color: #fcfcfc;
    background-color: var(--bg1)
}

#serverpage.crea .page .content .jodit .jodit-toolbar__box svg {
    fill: #595c61;
    fill: var(--textcolor);
    stroke: #595c61;
    stroke: var(--textcolor)
}

#serverpage.crea .page .content .jodit .jodit-status-bar {
    background-color: #f0f0f0;
    background-color: var(--bg);
    border-color: #fcfcfc;
    border-color: var(--bg1)
}

#serverpage.crea .page .content .jodit .jodit-status-bar svg {
    fill: #595c61;
    fill: var(--textcolor);
    stroke: #595c61;
    stroke: var(--textcolor)
}

#serverpage.crea .page .content .jodit.jodit_fullsize {
    position: fixed;
    background: #f0f0f0;
    background: var(--bg);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 90vh!important;
    width: 90vw!important
}

#serverpage.crea .page .content .jodit.jodit_fullsize:before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

#serverpage.crea .page .content #server-tabpanel-descrizione.jodit_fullsize-box_true {
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

#serverpage.crea .page .content #server-tabpanel-descrizione.jodit_fullsize-box_true>.button {
    display: none
}

@media screen and (max-width: 700px) {
    #serverpage.crea {
        border-radius:0;
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px
    }
}

.selectTab {
    max-width: 540px;
    margin: 20px auto
}

.selectTab .MuiTabs-root {
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px
}

.selectTab .MuiTabs-root .MuiTabs-flexContainer {
    position: relative;
    z-index: 1;
    padding: 0 5px;
    justify-content: space-between
}

.selectTab .MuiTabs-root div>span {
    z-index: 0;
    bottom: 5px;
    height: calc(100% - 10px);
    border-radius: 5px;
    background: #f0f0f0;
    background: var(--bg)
}

.selectTab:not(.tabStat) .MuiTabs-flexContainer button {
    width: 33.3333333333%;
    min-width: 0
}

.crea .selectTab:not(.tabStat) .MuiTabs-flexContainer button {
    width: 50%
}

@media screen and (max-width: 400px) {
    .selectTab:not(.tabStat) .MuiTabs-flexContainer button {
        width:-webkit-max-content;
        width: max-content
    }
}

.selectTab:not(.tabStat) .MuiTabs-flexContainer button span {
    pointer-events: none
}

.selectTab.tabStat {
    max-width: 350px
}

.selectTab.tabStat .MuiTabs-flexContainer button {
    width: 50%
}

.selectTab.tabStat .MuiTabs-flexContainer button span {
    pointer-events: none
}

.serverTab.true {
    visibility: hidden;
    overflow: hidden;
    height: 0
}

.filter-wrapper {
    overflow: auto;
    padding: 10px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px
}

.filter-wrapper .filter {
    display: flex;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    width: -webkit-max-content;
    width: max-content
}

.filter-wrapper .filter .checkFiltro {
    min-width: -webkit-max-content;
    min-width: max-content
}

#account .banner {
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px;
    height: 123.5px;
    display: flex;
    padding: 20px
}

#account .banner .avatar {
    width: 192px;
    height: 192px;
    margin-right: 20px
}

#account .banner .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#account .banner .userInfo {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px
}

#account .banner .userInfo .username {
    font-size: 36px
}

#account .banner .userInfo .role {
    margin-top: 10px
}

#account .userData {
    display: flex;
    padding: 10px 0 10px 232px
}

#account .userData .data {
    margin-right: 20px;
    font-size: 16px
}

#account .userData .data .label {
    margin: 0 0 10px
}

#account .userData .data .server {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfc;
    background: var(--bg1);
    padding: 5px;
    border-radius: 10px
}

#account .userData .data .server .img {
    height: 50px;
    width: 50px
}

#account .userData .data .server .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#account .userData .data .server .name {
    margin: 0 10px;
    font-weight: 700;
    font-size: 18px
}

#account .ServerInfo {
    margin-top: 30px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px
}

#account .ServerInfo .server .banner {
    position: relative;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(90deg,#41a36e,#68de9d);
    background: var(--gradient);
    background-size: 200% 200%;
    -webkit-animation: movingGradient 3s linear infinite alternate;
    animation: movingGradient 3s linear infinite alternate
}

#account .ServerInfo .server .banner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

#account .ServerInfo .server .banner .insideBanner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between
}

#account .ServerInfo .server .banner .insideBanner .bottom,#account .ServerInfo .server .banner .insideBanner .top {
    width: -webkit-max-content;
    width: max-content;
    padding: 10px
}

#account .ServerInfo .server .banner .insideBanner .bottom .position,#account .ServerInfo .server .banner .insideBanner .top .position {
    padding: 5px 20px;
    border-radius: 10px 10px 0;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    font-size: 25px;
    font-weight: 700
}

#account .ServerInfo .server .banner .insideBanner .top {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 15px;
    -webkit-column-gap: 15px;
    column-gap: 15px;
    grid-row-gap: 15px;
    row-gap: 15px
}

#account .ServerInfo .server .info {
    position: relative;
    padding: 0 10px;
    margin-top: -37.5px;
    display: flex;
    align-items: flex-end;
    grid-column-gap: 15px;
    -webkit-column-gap: 15px;
    column-gap: 15px
}

#account .ServerInfo .server .info .icona {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    overflow: hidden
}

#account .ServerInfo .server .info .icona img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

#account .ServerInfo .server .info .icona.no-icona {
    background-color: #ededed;
    background-color: var(--bg2);
    background-image: url(https://platform.rewardads.it/data/assets/logo/rewardads-logo-rounded.png);
    background-size: contain
}

#account .ServerInfo .server .info .nameEposition {
    width: calc(100% - 90px);
    font-size: 25px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#account .ServerInfo .voti {
    max-height: 237.5px
}

#account .ServerInfo .voti .labelVoti {
    font-weight: 700;
    margin-bottom: 5px
}

#account .ServerInfo .voti-wrapper {
    height: calc(100% - 24px);
    overflow: scroll
}

#account .ServerInfo .voti .single-vote {
    display: flex;
    align-items: center;
    background-color: #ededed;
    background-color: var(--bg2);
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px
}

#account .ServerInfo .voti .single-vote .avatar {
    width: 40px;
    height: 40px
}

#account .ServerInfo .voti .single-vote .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#account .ServerInfo .voti .single-vote .nameEtime {
    padding-left: 7px;
    width: calc(100% - 40px)
}

#account .ServerInfo .voti .single-vote .nameEtime .name {
    margin-bottom: 2px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#account .ServerInfo .voti .single-vote.no-votes {
    font-weight: 700
}

@media screen and (max-width: 670px) {
    #account .banner {
        height:auto;
        padding: 10px
    }

    #account .banner .avatar {
        width: 100px;
        height: 100px
    }

    #account .userData {
        padding: 10px
    }
}

@-webkit-keyframes load {
    0% {
        left: -150px
    }

    to {
        left: 100%
    }
}

@keyframes load {
    0% {
        left: -150px
    }

    to {
        left: 100%
    }
}

.loading-data#serverpage .button.copy,.loading-data#serverpage .server-name .name,.loading-data#serverpage .server-name .server-icon,.loading-data#serverpage .serverLandscape,.loading-data#serverpage .serverTab,.loading-data#serverpage .side-section .section,.loading-data .checkFiltro .placeholder,.loading-data .loading-box,.loading-data .serverBox .player-online,.loading-data .serverBox .position,.loading-data .serverBox .server-btn,.loading-data .serverBox .server-data,.loading-data .serverBox .server-edition,.loading-data .serverBox .server-icon,.loading-data .storico .server {
    color: transparent!important;
    background: #ededed!important;
    background: var(--bg2)!important;
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.loading-data#serverpage .button.copy:before,.loading-data#serverpage .server-name .name:before,.loading-data#serverpage .server-name .server-icon:before,.loading-data#serverpage .serverLandscape:before,.loading-data#serverpage .serverTab:before,.loading-data#serverpage .side-section .section:before,.loading-data .checkFiltro .placeholder:before,.loading-data .loading-box:before,.loading-data .serverBox .player-online:before,.loading-data .serverBox .position:before,.loading-data .serverBox .server-btn:before,.loading-data .serverBox .server-data:before,.loading-data .serverBox .server-edition:before,.loading-data .serverBox .server-icon:before,.loading-data .storico .server:before {
    content: "";
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg,transparent 0,#ededed 50%,transparent);
    background: linear-gradient(90deg,transparent 0,var(--bg2) 50%,transparent);
    -webkit-animation: load 1s cubic-bezier(.4,0,.2,1) infinite;
    animation: load 1s cubic-bezier(.4,0,.2,1) infinite
}

.loading-data#serverpage .button.copy.row,.loading-data#serverpage .server-name .name.row,.loading-data#serverpage .server-name .server-icon.row,.loading-data#serverpage .serverLandscape.row,.loading-data#serverpage .serverTab.row,.loading-data#serverpage .side-section .section.row,.loading-data .checkFiltro .placeholder.row,.loading-data .loading-box.row,.loading-data .serverBox .player-online.row,.loading-data .serverBox .position.row,.loading-data .serverBox .server-btn.row,.loading-data .serverBox .server-data.row,.loading-data .serverBox .server-edition.row,.loading-data .serverBox .server-icon.row,.loading-data .storico .server.row {
    margin-right: 10px
}

.loading-data#serverpage .button.copy a,.loading-data#serverpage .server-name .name a,.loading-data#serverpage .server-name .server-icon a,.loading-data#serverpage .serverLandscape a,.loading-data#serverpage .serverTab a,.loading-data#serverpage .side-section .section a,.loading-data .checkFiltro .placeholder a,.loading-data .loading-box a,.loading-data .serverBox .player-online a,.loading-data .serverBox .position a,.loading-data .serverBox .server-btn a,.loading-data .serverBox .server-data a,.loading-data .serverBox .server-edition a,.loading-data .serverBox .server-icon a,.loading-data .storico .server a {
    color: transparent!important
}

.loading-data#serverpage .button.copy .button,.loading-data#serverpage .button.copy .external_links,.loading-data#serverpage .button.copy .online,.loading-data#serverpage .button.copy .place,.loading-data#serverpage .button.copy .position,.loading-data#serverpage .button.copy .server-ip,.loading-data#serverpage .button.copy .server-modes,.loading-data#serverpage .button.copy .server-name,.loading-data#serverpage .button.copy .server-version,.loading-data#serverpage .button.copy .status,.loading-data#serverpage .button.copy .vote,.loading-data#serverpage .button.copy:after,.loading-data#serverpage .button.copy img,.loading-data#serverpage .server-name .name .button,.loading-data#serverpage .server-name .name .external_links,.loading-data#serverpage .server-name .name .online,.loading-data#serverpage .server-name .name .place,.loading-data#serverpage .server-name .name .position,.loading-data#serverpage .server-name .name .server-ip,.loading-data#serverpage .server-name .name .server-modes,.loading-data#serverpage .server-name .name .server-name,.loading-data#serverpage .server-name .name .server-version,.loading-data#serverpage .server-name .name .status,.loading-data#serverpage .server-name .name .vote,.loading-data#serverpage .server-name .name:after,.loading-data#serverpage .server-name .name img,.loading-data#serverpage .server-name .server-icon .button,.loading-data#serverpage .server-name .server-icon .external_links,.loading-data#serverpage .server-name .server-icon .online,.loading-data#serverpage .server-name .server-icon .place,.loading-data#serverpage .server-name .server-icon .position,.loading-data#serverpage .server-name .server-icon .server-ip,.loading-data#serverpage .server-name .server-icon .server-modes,.loading-data#serverpage .server-name .server-icon .server-name,.loading-data#serverpage .server-name .server-icon .server-version,.loading-data#serverpage .server-name .server-icon .status,.loading-data#serverpage .server-name .server-icon .vote,.loading-data#serverpage .server-name .server-icon:after,.loading-data#serverpage .server-name .server-icon img,.loading-data#serverpage .serverLandscape .button,.loading-data#serverpage .serverLandscape .external_links,.loading-data#serverpage .serverLandscape .online,.loading-data#serverpage .serverLandscape .place,.loading-data#serverpage .serverLandscape .position,.loading-data#serverpage .serverLandscape .server-ip,.loading-data#serverpage .serverLandscape .server-modes,.loading-data#serverpage .serverLandscape .server-name,.loading-data#serverpage .serverLandscape .server-version,.loading-data#serverpage .serverLandscape .status,.loading-data#serverpage .serverLandscape .vote,.loading-data#serverpage .serverLandscape:after,.loading-data#serverpage .serverLandscape img,.loading-data#serverpage .serverTab .button,.loading-data#serverpage .serverTab .external_links,.loading-data#serverpage .serverTab .online,.loading-data#serverpage .serverTab .place,.loading-data#serverpage .serverTab .position,.loading-data#serverpage .serverTab .server-ip,.loading-data#serverpage .serverTab .server-modes,.loading-data#serverpage .serverTab .server-name,.loading-data#serverpage .serverTab .server-version,.loading-data#serverpage .serverTab .status,.loading-data#serverpage .serverTab .vote,.loading-data#serverpage .serverTab:after,.loading-data#serverpage .serverTab img,.loading-data#serverpage .side-section .section .button,.loading-data#serverpage .side-section .section .external_links,.loading-data#serverpage .side-section .section .online,.loading-data#serverpage .side-section .section .place,.loading-data#serverpage .side-section .section .position,.loading-data#serverpage .side-section .section .server-ip,.loading-data#serverpage .side-section .section .server-modes,.loading-data#serverpage .side-section .section .server-name,.loading-data#serverpage .side-section .section .server-version,.loading-data#serverpage .side-section .section .status,.loading-data#serverpage .side-section .section .vote,.loading-data#serverpage .side-section .section:after,.loading-data#serverpage .side-section .section img,.loading-data .checkFiltro .placeholder .button,.loading-data .checkFiltro .placeholder .external_links,.loading-data .checkFiltro .placeholder .online,.loading-data .checkFiltro .placeholder .place,.loading-data .checkFiltro .placeholder .position,.loading-data .checkFiltro .placeholder .server-ip,.loading-data .checkFiltro .placeholder .server-modes,.loading-data .checkFiltro .placeholder .server-name,.loading-data .checkFiltro .placeholder .server-version,.loading-data .checkFiltro .placeholder .status,.loading-data .checkFiltro .placeholder .vote,.loading-data .checkFiltro .placeholder:after,.loading-data .checkFiltro .placeholder img,.loading-data .loading-box .button,.loading-data .loading-box .external_links,.loading-data .loading-box .online,.loading-data .loading-box .place,.loading-data .loading-box .position,.loading-data .loading-box .server-ip,.loading-data .loading-box .server-modes,.loading-data .loading-box .server-name,.loading-data .loading-box .server-version,.loading-data .loading-box .status,.loading-data .loading-box .vote,.loading-data .loading-box:after,.loading-data .loading-box img,.loading-data .serverBox .player-online .button,.loading-data .serverBox .player-online .external_links,.loading-data .serverBox .player-online .online,.loading-data .serverBox .player-online .place,.loading-data .serverBox .player-online .position,.loading-data .serverBox .player-online .server-ip,.loading-data .serverBox .player-online .server-modes,.loading-data .serverBox .player-online .server-name,.loading-data .serverBox .player-online .server-version,.loading-data .serverBox .player-online .status,.loading-data .serverBox .player-online .vote,.loading-data .serverBox .player-online:after,.loading-data .serverBox .player-online img,.loading-data .serverBox .position .button,.loading-data .serverBox .position .external_links,.loading-data .serverBox .position .online,.loading-data .serverBox .position .place,.loading-data .serverBox .position .position,.loading-data .serverBox .position .server-ip,.loading-data .serverBox .position .server-modes,.loading-data .serverBox .position .server-name,.loading-data .serverBox .position .server-version,.loading-data .serverBox .position .status,.loading-data .serverBox .position .vote,.loading-data .serverBox .position:after,.loading-data .serverBox .position img,.loading-data .serverBox .server-btn .button,.loading-data .serverBox .server-btn .external_links,.loading-data .serverBox .server-btn .online,.loading-data .serverBox .server-btn .place,.loading-data .serverBox .server-btn .position,.loading-data .serverBox .server-btn .server-ip,.loading-data .serverBox .server-btn .server-modes,.loading-data .serverBox .server-btn .server-name,.loading-data .serverBox .server-btn .server-version,.loading-data .serverBox .server-btn .status,.loading-data .serverBox .server-btn .vote,.loading-data .serverBox .server-btn:after,.loading-data .serverBox .server-btn img,.loading-data .serverBox .server-data .button,.loading-data .serverBox .server-data .external_links,.loading-data .serverBox .server-data .online,.loading-data .serverBox .server-data .place,.loading-data .serverBox .server-data .position,.loading-data .serverBox .server-data .server-ip,.loading-data .serverBox .server-data .server-modes,.loading-data .serverBox .server-data .server-name,.loading-data .serverBox .server-data .server-version,.loading-data .serverBox .server-data .status,.loading-data .serverBox .server-data .vote,.loading-data .serverBox .server-data:after,.loading-data .serverBox .server-data img,.loading-data .serverBox .server-edition .button,.loading-data .serverBox .server-edition .external_links,.loading-data .serverBox .server-edition .online,.loading-data .serverBox .server-edition .place,.loading-data .serverBox .server-edition .position,.loading-data .serverBox .server-edition .server-ip,.loading-data .serverBox .server-edition .server-modes,.loading-data .serverBox .server-edition .server-name,.loading-data .serverBox .server-edition .server-version,.loading-data .serverBox .server-edition .status,.loading-data .serverBox .server-edition .vote,.loading-data .serverBox .server-edition:after,.loading-data .serverBox .server-edition img,.loading-data .serverBox .server-icon .button,.loading-data .serverBox .server-icon .external_links,.loading-data .serverBox .server-icon .online,.loading-data .serverBox .server-icon .place,.loading-data .serverBox .server-icon .position,.loading-data .serverBox .server-icon .server-ip,.loading-data .serverBox .server-icon .server-modes,.loading-data .serverBox .server-icon .server-name,.loading-data .serverBox .server-icon .server-version,.loading-data .serverBox .server-icon .status,.loading-data .serverBox .server-icon .vote,.loading-data .serverBox .server-icon:after,.loading-data .serverBox .server-icon img,.loading-data .storico .server .button,.loading-data .storico .server .external_links,.loading-data .storico .server .online,.loading-data .storico .server .place,.loading-data .storico .server .position,.loading-data .storico .server .server-ip,.loading-data .storico .server .server-modes,.loading-data .storico .server .server-name,.loading-data .storico .server .server-version,.loading-data .storico .server .status,.loading-data .storico .server .vote,.loading-data .storico .server:after,.loading-data .storico .server img {
    visibility: hidden
}

.loading-data#serverpage .button.copy .copy:after {
    content: "ciao"
}

.loading-data#serverpage .selectTab {
    visibility: hidden;
    height: 0
}

.loading-data#serverpage #server-tabpanel-descrizione {
    height: 500px
}

.loading-data#serverpage #server-tabpanel-descrizione * {
    visibility: hidden
}

.wrap-caricamento {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none
}

.wrap-caricamento .caricamento {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    background: #fcfcfc;
    background: var(--bg1);
    border-radius: 10px;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.wrap-caricamento .caricamento div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #595c61;
    background: var(--textcolor);
    -webkit-animation-timing-function: cubic-bezier(0,1,1,0);
    animation-timing-function: cubic-bezier(0,1,1,0)
}

.wrap-caricamento .caricamento div:first-child {
    left: 8px;
    -webkit-animation: lds-ellipsis1 .6s infinite;
    animation: lds-ellipsis1 .6s infinite
}

.wrap-caricamento .caricamento div:nth-child(2) {
    left: 8px;
    -webkit-animation: lds-ellipsis2 .6s infinite;
    animation: lds-ellipsis2 .6s infinite
}

.wrap-caricamento .caricamento div:nth-child(3) {
    left: 32px;
    -webkit-animation: lds-ellipsis2 .6s infinite;
    animation: lds-ellipsis2 .6s infinite
}

.wrap-caricamento .caricamento div:nth-child(4) {
    left: 56px;
    -webkit-animation: lds-ellipsis3 .6s infinite;
    animation: lds-ellipsis3 .6s infinite
}

.wrap-caricamento.visible {
    pointer-events: unset;
    opacity: 1
}

.wrap-caricamento.visible .caricamento {
    -webkit-transform: scale(1);
    transform: scale(1)
}

@-webkit-keyframes lds-ellipsis1 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes lds-ellipsis1 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes lds-ellipsis3 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@-webkit-keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        -webkit-transform: translate(24px);
        transform: translate(24px)
    }
}

@keyframes lds-ellipsis2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        -webkit-transform: translate(24px);
        transform: translate(24px)
    }
}

#account-page .admin-view {
    position: relative
}

#account-page .admin-panel {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    bottom: 50px;
    max-width: 400px;
    margin: 30px auto 0;
    padding: 10px;
    background-color: #fcfcfc;
    background-color: var(--bg1);
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

.info-wrapper .error,.info-wrapper .good,.info-wrapper .info,.info-wrapper .warning {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px 0 hsla(0,0%,44.3%,.2);
    box-shadow: 0 4px 15px 0 var(--shadow)
}

.info-wrapper .error:before,.info-wrapper .good:before,.info-wrapper .info:before,.info-wrapper .warning:before {
    margin-right: 15px;
    font: normal normal normal 40px/1 "Material Design Icons"
}

.info-wrapper .error {
    color: #fff;
    background-color: #913e36;
    background-color: var(--alert)
}

.info-wrapper .error:before {
    content: "󰀧"
}

.info-wrapper .warning {
    color: #fff;
    background-color: #eda708;
    background-color: var(--warning)
}

.info-wrapper .warning:before {
    content: "󰀧"
}

.info-wrapper .good {
    color: #fff;
    background-color: #e67008;
    background-color: var(--primary)
}

.info-wrapper .good:before {
    content: "󰄲"
}

.info-wrapper.global {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 20px;
    max-width: 100%;
    z-index: 100000;
    pointer-events: none
}

.info-wrapper.global .error,.info-wrapper.global .good,.info-wrapper.global .info,.info-wrapper.global .warning {
    cursor: pointer;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    margin-bottom: 20px;
    pointer-events: all;
    -webkit-animation: fadeOut .3s ease 5s 1 normal both;
    animation: fadeOut .3s ease 5s 1 normal both
}

.info-wrapper.global .error:hover,.info-wrapper.global .good:hover,.info-wrapper.global .info:hover,.info-wrapper.global .warning:hover {
    -webkit-animation: none;
    animation: none
}

@-webkit-keyframes fadeOut {
    0% {
        visibility: visible;
        opacity: 1
    }

    to {
        display: none;
        visibility: hidden;
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        visibility: visible;
        opacity: 1
    }

    to {
        display: none;
        visibility: hidden;
        opacity: 0
    }
}

.jodit-popup__content {
    background: #fcfcfc!important;
    background: var(--bg1)!important
}

.jodit-popup__content .jodit-toolbar-button__button:hover:not([disabled]),.jodit-popup__content .jodit-ui-button:hover:not([disabled]) {
    background-color: #ededed;
    background-color: var(--bg2)
}

.jodit-popup__content span {
    color: #595c61;
    color: var(--textcolor)
}

.jodit-popup__content svg {
    fill: #595c61;
    fill: var(--textcolor);
    stroke: #595c61;
    stroke: var(--textcolor)
}

html[lang=it].jodit_fullsize-box_true,html[lang=it].jodit_fullsize-box_true>body.jodit_fullsize-box_true {
    position: unset!important;
    height: 100%!important;
    width: 100%!important;
    overflow: unset!important
}

.darkmode:root {
    --bg: #292e38;
    --bg1: #313742;
    --bg2: #3f464f;
    --textcolor: #e0e6f0;
    --textcolorlight: #bdc6db;
    --primary: #eaa30c;
    --lighter: #da9a11;
    --darker: #453513;
    --gradient: linear-gradient(90deg,#c87b24,#ea971a);
    --warning: #eda708;
    --alert: #913e36;
    --alert-dark: #45110c;
    --invert-bg: #f0f0f0;
    --invert-textcolor: #595c61;
    --shadow: rgba(0,0,0,0.2)
}

.darkmode .serverBox .player .player-online .online {
    color: #e99211;
    color: var(--lighter)
}

.darkmode #footer>.bottom .bottom .buttons .btn.changeTema:after {
    content: "RewardADs Dark";
    color: var(--textcolor);
}

.darkmode #footer>div {
    color: var(--textcolor);
}

.countdown {
    text-align: center
}

.countdown .numbers {
    font-size: 100px;
    font-weight: 700;
    text-align: center
}

.countdown .cifra {
    display: inline
}

.countdown .timer {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px
}

@media screen and (max-width: 700px) {
    .countdown .timer {
        grid-column-gap:15px;
        -webkit-column-gap: 15px;
        column-gap: 15px
    }

    .countdown .numbers {
        font-size: 50px
    }
}

@media screen and (max-width: 500px) {
    .countdown .numbers {
        font-size:35px
    }

    .countdown .cifra .numbers {
        font-size: 30px
    }
}

.countdown.account {
    margin-bottom: 50px
}

.countdown.account .timer {
    margin-top: 20px!important;
    grid-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px
}

.countdown.account .numbers {
    font-size: 29px
}

.modificaSever_editorItem__3pL-2 {
    display: flex;
    width: 100%
}

.modificaSever_editorItemDescription__2tlPw {
    margin-top: 10px;
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px;
    height: 2.5em;
    width: calc(70% - 10px);
    margin-right: 10px
}

.modificaSever_editorItemButton__1D9uC {
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
    height: 2.5em;
    width: 30%;
    font-size: medium
}

.modificaSever_searchedEditor__2gHKp {
    margin-top: 10px;
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px;
    height: 2.5em
}

.modificaSever_clickable__3WsFZ:hover {
    background-color: var(--bg2);
    cursor: pointer
}

.modificaSever_selected__17O-k {
    background-color: var(--lighter);
    cursor: pointer
}

.modificaSever_scrollableListContainer__2WjLD {
    height: 15vh;
    width: 100%;
    overflow-x: scroll
}


body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

.server-card {
    margin: 20px auto;
    background-color: var(--bg1);
    color: #333;
    max-width: 1000px;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    transition: background-color 0.3s ease;
    gap: 20px; 
}


  .server-card:hover {
    background-color: var(--bg2);
  }

  .ranking {
    font-size: 20px;
    font-weight: bold;
    color: #e67e22;
    margin-right: 20px;
  }

  .server-logo img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .server-logo.no-icon {
    display: none;
    background-size: contain;
  }

  .server-info {
    flex-grow: 1;
  }

  .server-name {
    display: flex; 
    align-items: center;
    gap: 10px; 
    font-size: 18px;
    font-weight: bold;
    color: #e67e22;
    margin-bottom: 5px;
}


  .server-ip {
    font-size: 14px;
    color: #bdc3c7;
    margin-bottom: 5px;
  }

  .server-status {
    font-size: 14px;
    padding: 3px 8px;
    color: white;
    border-radius: 5px;
    display: inline-block;
    margin-top: 5px;
    margin-right: 8px;
    padding: 1px 4px;
    border-radius: 6px; 
    
  }

  .server-status .online {
    background-color: #27ae60;
  }

  .server-status .offline {
    background-color: #f60d0d;
  }

  .server-details {
    text-align: right;
    font-size: 15px;
    color: #e67e22;
  }

  .server-details .votes {
    font-size: 14px; 
    padding: 3px 6px; 
    border-radius: 6px; 
}



  @media (max-width: 768px) {
    .server-card {
      justify-content: space-between;
      flex-direction: row;
    }

    .server-logo img {
      width: 50px;
      height: 50px;
    }

    .server-info {
      flex-grow: 0;
      text-align: left;
      margin-left: 0px;
    }

    .server-details {
      text-align: left;
      margin-top: 5px;
    }

    .ranking {
      margin-right: 10px;
    }

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

    .server-ip {
     display: none;
    }

    .server-status {
      display: none;
    }

    .votes {
      font-size: 12px;
      padding: 3px 6px;
    }
  }

  .p-staffBar {
    position: sticky;
    top: 0px; 
    z-index: 1000;
    background: linear-gradient(-270deg, #fa970d 0%, #fcb758 100%);
    padding: 20px 15px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}


.p-staffBar .pageContent {
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.p-staffBar-inner {
    display: flex;
    gap: 15px;
    padding: 0 15px;
}

.p-staffBar-link {
    color: rgb(239, 234, 234);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s ease-in-out;
    position: relative;
    top: -10px; 
}

.p-staffBar-link:hover {
    color: #ffffff; 
}



::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: #e88707;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #e88707;
    background: var(--bg2)
}

header {
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1440px) {
    .navbar .nav-items {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .navbar.active .nav-items {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .navbar.active .nav-items a {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
}

@media (max-width: 768px) {
    .menu-toggle .bar {
        width: 20px;
    }
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin-left: 10px;
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background-color: #2c3e50;
    margin: 4px 0;
    transition: all 0.3s ease;
}

.auth-buttons {
    display: flex;
    align-items: center;
}

.auth-buttons .btn {
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.auth-buttons .btn i {
    margin-right: 5px;
}

.auth-buttons .btn.toggle-theme {
    background-color: transparent;
    color: #2c3e50;
    border: 2px solid #2c3e50;
}



.filter-bar {
    max-width: 1000px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: var(--bg1);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.filter-bar input {
    flex: 2;
    padding: 10px;
    border: 1px solid var(--bg1);
    color: var(--textcolor);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--bg2);
    margin-right: 10px;
}

.filter-bar select {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--bg1);
    border-radius: 4px;
    color: var(--textcolor);
    background-color: var(--bg2);
}


.server-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    border: none;
    width: 100%;
    text-align: left;
}

.server-rank {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ff9800; /* Colore arancione tendente all'oro */
    margin-right: 20px;
}


.server-info {
    flex-grow: 1;
}

.server-info h2 {
    font-size: 1.15rem;
}


.adbits-box {
    padding: 4px 8px;
    border: 2px solid #ff9800; /* Colore arancione tendente all'oro */
    border-radius: 4px;
    color: #ff9800; /* Colore arancione tendente all'oro */
    background-color: #f9f9f9;
    font-weight: bold;
    display: inline-block;
    margin-left: 5px;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: flex-start;
    align-items: flex-start;
}

.popup.active {
    display: flex;
}

.popup-content {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 60%;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
}

.popup-content h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    text-align: center;
}

.popup-content ul {
    list-style-type: none;
    padding: 0;
}

.popup-content ul li {
    margin: 10px 0;
}

.popup-content ul li a {
    display: block;
    background-color: #e8e8e8;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;
    color: #333;
    text-align: center;
    transition: background-color 0.3s;
}

.popup-content ul li a:hover {
    background-color: #d3d3d3;
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: row;
    }

    .filter-bar input {
        flex: 2;
        margin-bottom: 0;
    }

    .filter-bar select {
        flex: 1;
    }

    .server-item {
        padding: 15px;
    }

    .server-rank {
        margin-right: 10px;
        font-size: 1.1rem;
    }

    .server-logo {
        margin-bottom: 0;
    }



    .server-adbits {
        margin-left: 10px;
        font-size: 1rem;
    }

    .popup-content {
        width: 100%;
        height: 100%;
    }
}

footer {
    background-color: #f0f0f0; 
    color: #333;
    padding: 20px 0;
    margin-top: 20px;
    z-index: -1;
}

footer.dark {
    background-color: #222; 
    color: #f0f0f0;
    z-index: -1;
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1;
    padding: 10px;
}

.footer-section h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #ff9800; 
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #ff9800; 
}

.footer-section ul li a i {
    margin-right: 5px; 
}


@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-section {
        margin-bottom: 20px;
    }
}