#body-admin {
    position: absolute;
    width: 80vh;
    height: 55vh;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: linear-gradient(60deg, var(--background));
    border-radius: 2vh;
    overflow: hidden;
    opacity: 0;
    user-select: none;
    transition: all .2s ease;
}

#admin-sidebar {
    width: 22vh;
    height: 100%;
    margin: 0;
    float: left;

    background: #FFFFFF09;
}
#admin-sidebar img {
    width: auto;
    height: 4vh;
    margin: 10% 0 0 10%;
    float: left;

    object-fit: contain;
}
#admin-sidebar h1 {
    width: auto;
    height: 4vh;
    margin: 9% 0 0 5%;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 2.5vh;
    font-weight: bold;
    line-height: 2.1vh;
    color: var(--main);
}
#admin-sidebar h1 span {
    font-size: 2.85vh;
    font-weight: normal;
    color: #FFF;
}
#sidebar-group {
    width: 80%;
    height: auto;
    margin: 1.75vh 0 0 0;
    padding: 0 10%;
    float: left;

    font-size: 1.5vh;
    line-height: 2.5vh;
    color: var(--main);
}
#sidebar-group span {
    margin-left: 5%;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 2.5vh;
    color: #FFFFFF90;
}

.sidebar-switch {
    margin: .5vh 0 1.25vh 10% !important;
}

.sidebar-option {
    width: 80%;
    height: 3.5vh;
    margin: .75vh 10% 0 10%;
    float: left;

    background: linear-gradient(to right, #FFFFFF09, #FFFFFF02);
    color: #FFFFFF90;
    border-radius: 1vh;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
    font-weight: normal;
    line-height: 3.5vh;
}
.sidebar-option i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0 5% 0 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    transition: all 187ms ease;

    font-size: 1.5vh;
    text-align: center;
    line-height: 3.5vh;
    filter: drop-shadow(0 0 1vh var(--glow));
}
.sidebar-option span {
    width: 2vh;
    height: 2vh;
    margin: .75vh .75vh .75vh 0;
    float: right;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 50%;
    overflow: hidden;

    font-family: 'Calibri', sans-serif;
    font-size: 1.25vh;
    font-weight: normal;
    text-align: center;
    line-height: 2vh;
    filter: drop-shadow(0 0 .25vh var(--main));
}
.sidebar-option:not([disabled]):hover {
    color: var(--main);
    cursor: pointer;
    filter: drop-shadow(0 0 1vh var(--glow));
}
.sidebar-option-active {
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
    background: #FFFFFF09;
    transition: all 187ms ease;
}
.sidebar-option[disabled] {
    opacity: 0.6;
}
.sidebar-option[disabled] i {
    color: #FFFFFF60;
}

/* ****** ********* ****** */
/* ****** CONTAINER ****** */
/* ****** ********* ****** */

.admin-container {
    width: 58vh;
    height: 98%;
    margin: 0;
    padding: 0 0 2% 0;
    float: left;

    overflow: hidden;
}

/* ****** LOADING ****** */
#admin-loading {
    display: none;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.loading-ripple {
    display: inline-block;
    position: relative;
    width: 8vh;
    height: 8vh;
}
.loading-ripple div {
    position: absolute;
    border: .4vh solid #FFFFFF60;
    opacity: 1;
    border-radius: 50%;
    animation: loading-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes loading-ripple {
    0% {
      top: 3.6vh;
      left: 3.6vh;
      width: 0;
      height: 0;
      opacity: 0;
    } 4.9% {
      top: 3.6vh;
      left: 3.6vh;
      width: 0;
      height: 0;
      opacity: 0;
    } 5% {
      top: 3.6vh;
      left: 3.6vh;
      width: 0;
      height: 0;
      opacity: 1;
    } 100% {
      top: 0px;
      left: 0px;
      width: 7.2vh;
      height: 7.2vh;
      opacity: 0;
    }
}
  
/* ****** OVERVIEW ****** */
#admin-overview {
    display: block;
    overflow-y: auto;
}

.overview-box {
    width: calc(96% - 2vh);
    height: auto;
    margin: 2% 0 0 2%;
    padding: .5vh 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
.overview-box[size=half] {
    width: calc(47% - 2vh);
}
.overview-box[size=large] {
    width: calc(96% - 2vh);
}
.overview-box p {
    width: 100%;
    margin: 0;
}
.overview-box p span {
    margin-left: .5vh;
    font-size: 1.25vh;
    color: #FFFFFF60;
}
.overview-box p i, .overview-box-p i {
    margin-left: .5vh;
    font-size: 1.25vh;
    color: #FFFFFF40;
    transition: all 187ms ease;
}
.overview-box p i[left] {
    margin: .25vh .5vh 0 0;
}
.overview-box p i[right] {
    margin: .25vh .25vh 0 0;
    float: right;
}
.overview-box p i:hover {
    color: var(--main);
    cursor: pointer;
}
.overview-box-switch {
    margin: 1% 0 !important;
}

#overview-chart {
    width: 96%;
    height: 20vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    border-radius: 1vh;
}

.overview-stats {
    width: calc((92% - 6vh) / 3);
    height: auto;
    margin: 2% 0 0 2%;
    padding: .5vh 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
.overview-stats span {
    width: 100%;
    margin: -.2vh 0 0 0;
    float: left;

    font-size: 3vh;
    font-weight: bold;
    color: var(--main);
}

.teleport-coords {
    width: 30%;
    height: 3vh;
    margin: 1% 2% 1% 0;
    float: left;

    background: #FFFFFF09;
    border-radius: .75vh;
}
.teleport-coords span {
    width: 3vh;
    height: 3vh;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    line-height: 3vh;
    filter: drop-shadow(0 0 1vh var(--glow));
}
.teleport-coords input {
    width: calc(100% - 5vh);
    height: 3vh;
    margin: 0;
    padding: 0 1vh;

    background: none;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
}
#teleport-button {
    width: calc(100% - 66% - 6vh);
    height: 3vh;
    margin: 1% 0;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
}
#teleport-button[disabled] {
    color: #FFF6;
    cursor: not-allowed;
}
#teleport-button:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
}
.teleport-button-icon {
    width: 3vh;
    height: 3vh;
    margin: 1% 0 1% 1%;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    font-size: 1.45vh;
    text-align: center;
    line-height: 3vh;
}
.teleport-button-icon[disabled] {
    color: #FFF6 !important;
    cursor: not-allowed !important;
}
.teleport-button-icon:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}

.actions-button {
    width: calc((100% - 3%) / 4);
    height: 3vh;
    margin: 1% 1% 1% 0;
    padding: 0 2vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
}
.actions-button:last-child {
    margin-right: 0;
}
.actions-button:not([disabled]):hover {
    background: var(--main);
    color: #FFFFFF;
}

.overview-player-switch {
    margin: 2% 0 1% 0 !important;
}

.player-action-switch {
    margin: 1vh !important;
}

#announce-input {
    width: calc(100% - 2vh);
    height: 5.15vh;
    margin: 1% 0;
    padding: .25vh 1vh;
    float: left;

    background: #FFFFFF06;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;
    resize: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
}
#announce-button {
    width: 100%;
    height: 3vh;
    margin: 2% 0;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;

    font-size: 1.5vh;
}
#announce-button:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
}

#dimension-input {
    width: calc(100% - 5.5vh);
    height: 3vh;
    margin: 1% 0 2% 0;
    padding: 0 1vh;
    float: left;

    background: #FFFFFF06;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;
    resize: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
}
#dimension-button {
    width: 3vh;
    height: 3vh;
    margin: 1% 0 2% .5vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    font-size: 1.5vh;
    text-align: center;
    line-height: 3vh;
}
#dimension-button[disabled] {
    color: #FFF6;
    cursor: not-allowed;
}
#dimension-button:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}

#ped-input {
    width: calc(75% - 2vh);
    height: 3vh;
    margin: 1% 0;
    padding: 0 1vh;
    float: left;

    background: #FFFFFF06;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
}
#ped-button {
    width: calc(100% - 77% - 3vh);
    height: 3vh;
    margin: 1% 0 1% 1%;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
}
#ped-button:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
}
#ped-reset {
    width: 3vh;
    height: 3vh;
    margin: 1% 0 1% 1%;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    font-size: 1.45vh;
    text-align: center;
    line-height: 3vh;
}
#ped-reset:hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}

#environment-time-slider {
    width: 6vh;
    height: 6vh;
    margin: 3% 0 0 0;
    float: left;
}
#environment-time-slider .rs-range-color, .rs-path-color  {
    background-color: var(--main);
}
#environment-time-slider .rs-handle  {
    background-color: #FFF;
    padding: 0px;
    border: 4px solid #FFF;
}
#environment-time-slider .rs-border  {
    border-color: transparent;
    background: linear-gradient(60deg, var(--background));
}

.overview-environment-items {
    width: 100%;
    max-height: 7.25vh;
    float: left;

    overflow-x: hidden;
    overflow-y: auto;
}
.environment-items-time {
    width: calc(94% - 6.5vh);
    margin-left: 6%;
}

.environment-time-input {
    width: 49%;
    height: 3vh;
    margin: 3% 0 1% 0;
    float: left;

    background: #FFFFFF09;
    border-radius: .75vh;
}
.environment-time-input:first-child {
    margin-right: 2%;
}
.environment-time-input span {
    width: 3vh;
    height: 3vh;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    line-height: 3vh;
    filter: drop-shadow(0 0 1vh var(--glow));
}
.environment-time-input input {
    width: calc(100% - 5vh);
    height: 3vh;
    margin: 0;
    padding: 0 1vh;

    background: none;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
}
#environment-time-button {
    width: calc(94% - 6.5vh);
    height: 3vh;
    margin: 2% 0 2% 6%;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
#environment-time-button[active=true]:hover {
    background: var(--main);
    color: #FFF;
}

#environment-weather-icon {
    min-width: 5vh;
    max-width: 6vh;
    height: 6vh;
    margin: 0;
    float: left;

    background: #f0f0;
    display: flex;
    align-items: center;
    font-size: 5vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#environment-weather-title {
    width: calc(100% - 8vh);
    margin: .75vh 0 0 1.5vh;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 2.75vh;
    font-weight: bold;
    line-height: 2.75vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
}
#environment-weather-subtitle {
    width: calc(100% - 8vh);
    margin: 0 0 0 1.5vh;
    float: left;
    
    background: #f0f0;
    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
    line-height: 2vh;
    color: #FFFFFF90;;
}

.weather-box {
    position: relative;
    width: calc(33.3% - 1vh);
    height: 32.5vh;
    margin: 1vh 0 0 1vh;
    float: left;
}
.weather-box-title {
    width: 100%;
    height: 2vh;
    margin: 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    color: #FFFFFF90;
}
.weather-box-items {
    position: relative;
    width: calc(100% - .5vh);
    height: calc(100% - 2vh);
    margin: 0;
    padding-right: .5vh;
    float: left;

    overflow-x: hidden;
    overflow-y: auto;
}
.weather-box-item {
    position: relative;
    width: 100%;
    height: auto;
    margin: .5vh 0 0 0;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: .75vh;
    overflow: hidden;
    transition: all 187ms ease;
}
.weather-box-item:first-child {
    margin-top: 0;
}

.weather-types-item {
    height: 4vh;
    color: #FFF9;
}
.weather-types-item:not([disabled]):hover {
    background: #FFFFFF12;
    color: #FFF;
    cursor: pointer;
}
.weather-types-item:not([disabled]):hover i {
    opacity: .5;
}
.weather-types-item i {
    position: absolute;
    margin: 0;
    transform: translateX(-25%);
    float: left;
    z-index: 9;

    font-size: 4.5vh;
    line-height: 4vh;
    color: var(--main);
    opacity: .25;
    transition: all 187ms ease;
}
.weather-types-item span {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 99;

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
}

#weather-zones {
    width: calc(66.6% - 2.5vh);
    margin-left: 1.5vh;
}
#weather-zones-title span {
    margin-right: 1vh;
    transition: all 187ms ease;
}
#weather-zones-title span:hover, #weather-zones-title span[active] {
    color: var(--main);
    cursor: pointer;
}
.weather-zones-item {
    width: calc(100% - 1vh);
    height: 4vh;
    padding: .75vh .5vh;

    transition: height 222ms ease;
}
.weather-zones-item[active] {
    background: var(--soft2, #755eaa20);
}
.weather-zones-item .zone-item-icon {
    max-width: 5vh;
    height: 4vh;
    margin: 0;
    float: left;

    font-size: 4vh;
    color: var(--main);
    filter: drop-shadow(0 0 1.5vh var(--glow));
}
.weather-zones-item h2 {
    width: calc(100% - 6vh);
    margin: 0 0 0 1vh;
    float: left;

        
    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    line-height: 2.25vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
}
.weather-zones-item h3 {
    width: calc(100% - 6vh);
    margin: 0 0 0 1vh;
    float: left;
    
    font-family: 'Calibri', sans-serif;
    font-size: 1.25vh;
    font-weight: normal;
    text-transform: capitalize;
    line-height: 1.25vh;
    color: #FFFFFF90;
}
.weather-zones-item h3 button {
    height: 2vh;
    margin-left: .5vh;

    background: none;
    color: #FFF9;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.25vh;
}
.weather-zones-item h3 button i {
    margin-right: .35vh;
    color: var(--glow);
    transition: all 187ms ease;
}
.weather-zones-item h3 button:hover {
    color: #FFF;
    cursor: pointer;
}
.weather-zones-item h3 button:hover i {
    margin-right: .55vh;
    color: var(--main);
}
.weather-zones-item-index {
    position: absolute;
    width: 2vh;
    height: 2vh;
    top: .75vh;
    right: .75vh;

    background: #FFFFFF09;
    color: #FFF9;
    border-radius: .5vh;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Calibri', sans-serif;
    font-size: 1.35vh;
}
.weather-zones-item[active] .weather-zones-item-index {
    background: var(--main);
    color: #FFF;
}

.weather-zones-item-actions {
    width: 100%;
    height: 2.25vh;
    margin: .5vh 0 0 0;
    float: left;

    display: flex;
    flex-direction: row;
    opacity: 1;
    animation-name: fadeWeatherActions;
    animation-duration: .2s;
    animation-iteration-count: 1;
}
@keyframes fadeWeatherActions {
    from { opacity: 0; }
    to { opacity: 1; }
}

.weather-zones-item-actions .item-actions-box {
    min-width: 2.25vh;
    height: 100%;
    margin: 0 .25vh;
    float: left;

    background: none;
    color: #FFF;
    border-radius: .5vh;
    overflow: hidden;
}
.weather-zones-item-actions .item-actions-box button {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 .75vh;

    background: #FFFFFF09;
    color: var(--main);
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.3vh;
}
.weather-zones-item-actions .item-actions-box button:hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}
.weather-zones-item-actions .item-actions-box input {
    width: 4vh;
    height: 100%;
    margin: 0;
    padding: 0 .5vh;
    float: left;

    background: #FFFFFF04;
    color: #FFF;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.3vh;
}
.weather-zones-item-actions .item-actions-box i {
    width: 2.25vh;
    height: 100%;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;

    font-size: 1.3vh;
}
.weather-zones-item-actions .item-actions-box i[disabled] {
    color: #FFF6;
    cursor: not-allowed;
}
.weather-zones-item-actions .item-actions-box i:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}


/* ****** PLAYERS ****** */
#admin-players {
    height: 100%;
    padding: 0;
    display: none;
}

#players-search {
    width: calc(96% - 4vh);
    height: 3.5vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
}
#players-search i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0;
    float: left;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.5vh;
}
#players-search input {
    width: calc(100% - 3.5vh);
    height: 3.5vh;
    margin: 0;
    padding: 0;
    float: left;

    background: none;
    color: #FFF;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
}
#players-search-sort {
    width: 3.5vh;
    height: 3.5vh;
    margin: 2% 0 0 .5vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;
    font-size: 1.75vh;
}
#players-search-sort[active="true"] {
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
}
#players-search-sort:hover {
    background: #FFFFFF12;
    cursor: pointer;
}

#players-items {
    width: 97.5%;
    height: calc(95.8% - 3.5vh);
    margin: 2% 0 0 2%;
    float: left;

    overflow-x: hidden;
    overflow-y: auto;
}
.players-item {
    width: calc(96.5% / 3);
    height: 8.5vh;
    margin: 0 1% 1% 0;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
}
.players-item-name {
    width: calc(100% - 1.5vh);
    height: 1.75vh;
    margin: .75vh;
    padding: 0;

    color: var(--main);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: bold;
}
.players-item-name span {
    height: 1.75vh;
    min-width: 1.25vh;
    margin: 0 .375vh 0 0;
    padding: 0 .25vh;
    float: left;

    background: var(--main);
    border-radius: .5vh;
    color: #fffb;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5vh;
    font-weight: normal;
}

.players-item-data {
    width: 100%;
    height: 2vh;
    margin: -.5vh 0 0 0;
    float: left;

    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
.players-item-data i {
    margin: 0 0 0 .9vh;

    font-size: 1.2vh;
    color: var(--main);
    opacity: 0.75;
}
.players-item-data i span {
    margin-left: .5vh;
    font-family: 'Calibri', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    color: #FFFFFF90;
}

.player-item-buttons {
    width: 100%;
    height: auto;
    margin: .5vh 0 0 0;
    float: left;
}
.player-item-buttons i {
    width: 2.5vh;
    height: 2.5vh;
    margin: 0 0 0 .75vh;
    float: left;

    background: #FFFFFF06;
    color: var(--main);
    border-radius: .5vh;
    transition: all 187ms ease;

    font-size: 1.25vh;
    text-align: center;
    line-height: 2.5vh;
}
.player-item-buttons i[disabled] {
    color: #FFF6;
    cursor: not-allowed;
}
.player-item-buttons i:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}

#players-window {
    position: absolute;
    width: calc(40vh - 4%);
    height: calc(30vh - 4%);
    margin: 0 0 0 31vh;
    top: 50%;
    padding: 2%;
    transform: translateY(-50%);
    z-index: 999;

    background: linear-gradient(60deg, var(--background2));
    color: #FFF;
    border-radius: 1.5vh;
    box-shadow: 0 0 6vh 0 #000;
    display: none;
}
#players-window-title {
    width: 100%;
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 3vh;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 3vh;
    color: var(--main);
    white-space: nowrap;
    overflow: hidden;
}
#players-window-title span {
    margin-left: .5%;
    font-weight: normal;
    color: #FFFFFF60;
}
#player-window-items {
    width: 100%;
    height: calc(98% - 3vh);
    margin: 2% 0 0 0;
    padding-right: 1%;

    border-radius: 1vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.players-window-action {
    width: 100%;
    height: auto;
    margin: 1% 0 0 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    color: var(--main);
}
.players-window-action span {
    width: 100%;
    margin-bottom: -1%;
    float: left;
    color: #FFFFFF90;
}
.players-window-action button {
    width: auto;
    height: 3.5vh;
    margin: 2% 2% 0 0;
    padding: 0 4%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;
    
    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    font-weight: normal;
}
.players-window-action button:not([disabled=true]):not([active=false]):hover {
    background: var(--main);
    color: #FFF;
}
.players-window-action[type=warning] {
    margin-top: 2%;
}
.players-window-action[type=warning] button {
    color: #ae4242;
}
.players-window-action[type=warning] button:hover {
    background: #ae4242;
    color: #FFF;
}
.players-window-action button[active=true] {
    background: var(--main);
    color: #FFF;
}
.player-action-tag {
    width: 100%;
    height: auto;
    margin: 2% 0 0 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
    filter: drop-shadow(0 0 2vh var(--glow));
    color: var(--main);
}
.player-action-tag span {
    font-weight: lighter;
    color: #FFFFFF60;
}
.player-action-input {
    width: 96%;
    height: 3.5vh;
    margin: 0;
    padding: 0 2%;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
}
.player-action-input-time {
    width: calc((98% / 2) - 4%);
    height: 3.5vh;
    margin: 0;
    padding: 0 2%;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
}
.player-action-input-time:nth-child(even) {
    margin-right: 2%;
}
.player-action-textarea {
    width: 96%;
    height: 6vh;
    margin: 0;
    padding: 1% 2%;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
    border: none;
    outline: none;
    resize: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
    font-weight: normal;
}
.player-action-textarea[type="message"] {
    height: 15vh;
}
.player-action-switch-box {
    width: 100%;
    height: 4.5vh;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
    border: none;
    outline: none;
    resize: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 4.5vh;
}
.player-action-button {
    width: 100%;
    height: 4vh;
    margin: 5% 0 0 0;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: 1vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    font-weight: normal;
    filter: drop-shadow(0 0 2vh var(--glow));
}
.player-action-button:hover {
    background: var(--main);
    color: #FFF;
}

#payers-window-inventory-search {
    width: 100%;
    height: 3vh;
    margin: 0 0 1.5vh 0;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF60;
    border-radius: .75vh;
}
#payers-window-inventory-search i {
    width: 3vh;
    height: 3vh;
    margin: 0;
    float: left;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;

    font-size: 1.4vh;
}
#payers-window-inventory-search input {
    width: calc(100% - 3vh);
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;

    background: none;
    color: #FFFFFF90;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
#payers-window-inventory-search:focus-within i {
    color: var(--main);
}

.players-window-inventory {
    position: relative;
    width: 100%;
    height: 4vh;
    margin: 0 0 2% 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: bold;
    line-height: 4vh;
}
.players-window-inventory span {
    margin-left: 1%;
    font-weight: normal;
    color: #FFFFFF90;
}
.window-inventory-icon {
    position: relative;
    width: 4vh;
    height: 4vh;
    margin: 0 2% 0 0;
    float: left;

    background: #FFFFFF06;
    border-radius: .75vh;

    font-size: 1.75vh;
    text-align: center;
    line-height: 4vh;
    filter: drop-shadow(0 0 1vh var(--glow));
}
.window-inventory-label {
    max-width: calc(100% - 18vh);
    margin: 0;
    float: left;
    overflow: hidden;
    white-space: nowrap;
}
.window-inventory-label span {
    margin-left: 1%;
}
.window-inventory-input {
    width: calc(96% - 12vh);
    height: 4vh;
    margin: 0;
    padding: 0 2% 0 0;
    float: left;

    background: none;
    color: var(--main);
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    font-weight: normal;
}
.players-window-inventory label {
    position: absolute;
    width: calc(96% - 12vh);
    height: 4vh;
    margin: 0 0 0 calc(4vh + 2%);
    left: 0;
    padding: 0 2% 0 0;
    float: left;
    z-index: -1;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    font-weight: normal;
    line-height: 4vh;
    color: #FFF6;
}
.window-inventory-button {
    width: 8vh;
    height: 4vh;
    margin: 0;
    float: left;

    background: #FFFFFF06;
    color: #FFFFFF90;
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    font-weight: normal;
}
.window-inventory-button:hover {
    background: #FFFFFF12;
    color: var(--main);
}
.window-inventory-actions {
    width: auto; /*calc(12vh + 3%)*/
    height: 4vh;
    margin: 0;
    float: right;
}
.window-inventory-actions input {
    width: 4vh;
    height: 4vh;
    margin: 0 1vh 0 0;
    padding: 0;
    float: left;

    background: #FFFFFF06;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    text-align: center;
}
.window-inventory-actions input:focus {
    background: #FFFFFF09;
}
.window-inventory-actions i {
    width: 4vh;
    height: 4vh;
    margin: 0 0 0 0;
    float: right;

    background: #FFFFFF06;
    color: #FFFFFF90;
    border-radius: .75vh;
    transition: all 187ms ease;

    font-size: 1.75vh;
    text-align: center;
    line-height: 4vh;
}
.window-inventory-actions i:nth-child(2) {
    border-radius: 0 .75vh .75vh 0;
}
.window-inventory-actions i:nth-child(3) {
    border-radius: .75vh 0 0 .75vh;
}
.window-inventory-actions i:hover {
    background: #FFFFFF12;
    color: var(--main);
}
.window-inventory-spacer {
    width: 100%;
    min-height: .5vh;
    margin: .5vh 0 0 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
    color: #FFF6;
}

.players-window-data {
    width: 100%;
    height: auto;
    margin: 1% 0 0 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    color: var(--main);
}
.players-window-data[size="1/3"] {
    width: calc(98% / 3);
}
.players-window-data[size="2/3"] {
    width: calc(98% / 3 * 2);
    margin-right: 2%;
}
.players-window-data span {
    width: 96%;
    height: 3vh;
    margin: .5% 0 0 0;
    padding: 0 2%;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: .75vh;
    overflow: hidden;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
    line-height: 3vh;
}
.players-window-data span i {
    width: 2vh;
    height: 3vh;
    margin: 0;
    float: right;

    font-size: 1.5vh;
    text-align: center;
    line-height: 3vh;
    color: #FFFFFF60 !important;
    transition: all 187ms ease;
    opacity: 0;
}
.players-window-data span:hover {
    color: #FFFFFF;
    cursor: pointer;
}
.players-window-data span:hover i {
    opacity: 1;
}

.player-window-warn {
    width: 100%;
    height: 4vh;
    margin: 0 0 2% 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: bold;
    line-height: 4vh;
}
.player-window-warn-id {
    min-width: 3vh;
    height: 4vh;
    margin: 0 1vh 0 0;
    padding: 0 .5vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: .75vh;

    font-weight: normal;
    text-align: center;
}
.player-window-warn-arrow {
    width: 4vh;
    height: 4vh;
    margin: 0;
    float: right;

    font-size: 1.75vh;
    text-align: center;
    line-height: 4vh;
    color: #FFFFFF90;
    transform: rotate(360deg);
    transition: all 187ms ease;
}
.player-window-warn-arrow:hover {
    color: var(--main);
}

.warn-item-data {
    width: 100%;
    height: auto;
    margin: 0;
    float: left;

    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 187ms ease;
}
.warn-data-item-reason {
    width: calc(100% - 2vh);
    height: auto;
    margin: 1vh;
    float: left;

    color: var(--main);
    overflow-x: hidden;
    overflow-y: auto;

    font-family: 'Calibri', sans-serif;
    font-size: 1.6vh;
    font-weight: bold;
    line-height: 1.6vh;
}
.warn-data-item-reason span {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    float: left;

    font-size: 1.4vh;
    font-weight: normal;
    text-align: left;
    line-height: normal;
    line-break: anywhere;
    color: #FFF;
}
.warn-data-item-admin {
    width: calc(100% - 2vh);
    height: auto;
    margin: 0 1vh 1vh 1vh;
    padding: 0;
    float: left;

    color: var(--main);
    overflow: hidden;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: bold;
    text-align: left;
    line-height: 1.6vh;
}
.warn-data-item-admin span {
    margin: 0 0 0 1vh;

    font-weight: normal;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
.warn-data-item-admin span:hover {
    color: #FFF;
}
.warn-data-item-button {
    width: calc(100% - 2vh);
    height: 2.75vh;
    margin: 0 1vh 1vh 1vh;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius:.75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
}
.warn-data-item-button:hover {
    background: var(--main);
    color: #FFF;
}

/* ***** VEHICLE ***** */
#admin-vehicle {
    height: 98%;
    padding: 0 0 2% 0;
    display: none;

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

.vehicle-box {
    width: calc(96% - 2vh);
    height: auto;
    margin: 2% 0 0 2%;
    padding: .5vh 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
.vehicle-box[size=half] {
    width: calc(47% - 2vh);
}
.vehicle-box[size=large] {
    width: calc(96% - 2vh);
    height: auto;
}
.vehicle-box p {
    width: 100%;
    margin: 0 0 .25vh 0;
}

.vehicle-box-input {
    width: calc(95% - 3.5vh);
    height: 3.5vh;
    margin: 1% 0;
    padding: 0 1.5%;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 2vh;
    font-weight: normal;
}
.vehicle-box-input[size="XS"] {
    width: calc(83% - 35vh);
    padding: 0 1.5%;
}
.vehicle-box-input[size="L"] {
    width: 95%;
    padding: 0 2.5%;
}
.vehicle-box-input[text="center"] {
    text-align: center;
}

#vehicle-spawn-input {
    width: calc(94% - 7vh);
}

.vehicle-box-button {
    width: 3.5vh;
    height: 3.5vh;
    margin: 1% 0 1% 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;
    overflow: hidden;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    filter: drop-shadow(0 0 2vh var(--glow));
}
.vehicle-box-button:not([disabled]):hover {
    background: var(--main);
    color: #FFF;
}
.vehicle-box-button[size="L"] {
    width: 100%;
    height: 3vh;
    margin: 1.5% 0;
    float: left;

    font-size: 1.6vh;
    line-height: 3vh;
}
.vehicle-box-button[disabled] {
    color: #FFFFFF90 !important;
    filter: none !important;
    opacity: 0.6;
}
.vehicle-box-button[animated=true]:hover i {
    margin-right: -.5vh;
}
.vehicle-box-button[animated=true] i {
    width: 3vh;
    height: 3vh;
    margin: 0 -3vh 0 0;
    float: right;

    font-size: 1.3vh;
    text-align: center;
    line-height: 3vh;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
.vehicle-box-button[animated=true] i:hover {
    color: #FFF;
}

#vehicle-spawn-history {
    width: 100%;
    height: auto;
    margin: 1% 0 0 0;
}
#vehicle-spawn-history p {
    width: 100%;
    margin: 0 0 .25vh 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    color: #FFFFFF90;
}
#vehicle-spawn-history span {
    width: auto;
    height: 2.75vh;
    margin: 0 1% 1% 0;
    padding: 0 1.25vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    line-height: 2.75vh;
    filter: drop-shadow(0 0 2vh var(--glow));
}
#vehicle-spawn-history span:hover {
    background: var(--main);
    color: #FFF;
}

#vehicle-box-fav {
    height: 21vh;

    overflow: auto;
}

.vehicle-color-item {
    width: 3.5vh;
    height: 3.5vh;
    margin: 1% 1.25% 0 0;
    float: left;

    background: #FFFFFF20;
    border-radius: 1vh;
    opacity: .6;
    transition: all 99ms ease;
}
.vehicle-color-item:last-of-type {
    margin-right: 2%;
}
.vehicle-color-item[disabled] {
    filter: saturate(25%);
}
.vehicle-color-item:not([disabled]):hover {
    opacity: 1;
    cursor: pointer;
}

#vehicle-box-stats {
    position: relative;
    height: auto;
}
.vehicle-stats-tyre {
    width: 1.5vh;
    height: 3vh;
    margin: 0;

    background: #FFF;
    color: #000;
    border-radius: .35vh;
}
.vehicle-stats-tyre[num="1"] {
    margin: 4.1vh 0 0 7vh;
    background: #f00;
}
.vehicle-stats-tyre[num="2"] {
    margin: -3vh 0 0 17vh;
}
.vehicle-stats-tyre[num="3"] {
    margin: 5vh 0 0 7vh;
}
.vehicle-stats-tyre[num="4"] {
    margin: -3vh 0 4vh 17vh;
}
#vehicle-stats-body {
    position: absolute;
    width: 7vh;
    height: 14vh;
    margin: -17vh 0 0 8.96vh;

    background: none;
    color: var(--main);
    border-radius: 1vh;
    border: solid .3vh #FFFFFF90;
}
#vehicle-stats-body i {
    width: 7vh !important;
    float: left;

    font-size: 1.5vh;
    text-align: center;
}
#vehicle-stats-body i span {
    margin-left: .5vh;
    font-family: 'Calibri', sans-serif;
    font-size: 1.4vh;
    font-weight: normal;
    color: #FFF;
}
#vehicle-stats-body i:first-of-type {
    margin-top: 75%;
}

#vehicle-fuel-value {
    margin-left: 1%;
    font-family: 'Calibri', sans-serif;
    font-size: 1.1vh;
    color: var(--glow);
}
#vehicle-fuel-slider {
    width: 100%;
    height: 1.5vh;
    margin: .5vh 0 1vh 0;
    background: #FFFFFF12;
    border-radius: 1.5vh;
    outline: none;
    overflow: hidden;
    -webkit-appearance: none;
}
#vehicle-fuel-slider::-webkit-slider-thumb {
    width: 1.5vh;
    height: 1.5vh;
    background: var(--main);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: -100.75vh 0 0 100vh var(--soft);
    -webkit-appearance: none;
    appearance: none;
}
  
/* ***** CHAT ***** */
#admin-chat {
    height: 100%;
    padding: 0;
    display: none;
    overflow: hidden;
}

#chat-header {
    width: calc(96% - 3vh);
    height: 4.5vh;
    margin: 2% 2% 0 2%;
    padding: 0 1.5vh;

    background: #FFFFFF09;
    border-radius: 1vh;
}
#chat-header-icon {
    width: auto;
    height: 100%;
    margin: .5% 0 0 0;
    float: left;

    display: flex;
    align-items: center;

    font-size: 2.25vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#chat-header-name {
    height: 100%;
    margin: 0 0 0 2%;
    float: left;

    color: var(--main);
    display: flex;
    align-items: center;

    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: bold;
}
#chat-header-name span {
    font-weight: normal;
    color: #FFFFFF90;
}
#chat-header-bell {
    width: 3vh;
    height: 100%;
    margin: 0 -.5vh 0 0;
    float: right;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;

    font-size: 1.75vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#chat-header-bell[active=true] {
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#chat-header-bell[active=false] {
    color: #FFFFFF60;
    filter: none;
}

#chat-box {
    width: 100%;
    height: calc(93.5% - 8.5vh);
    margin: 0;
    padding: .5vh 0 0 0;

    overflow-x: hidden;
    overflow-y: auto;
}
.chat-message-left {
    width: 100%;
    height: auto;
    margin: 0;
    float: left;
    transition: all 187ms ease;
}
.chat-message-left:hover {
    background: #FFFFFF06;
}
.chat-message-left div {
    max-width: 50%;
    height: auto;
    margin: .5vh 0 .5vh 2%;
    padding: .75vh;
    float: left;

    background: #FFFFFF12;
    color: #FFF;
    border-radius: 1vh 1vh 1vh 0;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
}
.chat-message-left div p {
    width: 100%;
    margin: 0 0 .25vh 0;

    font-size: 1.5vh;
    color: var(--main);
}
.chat-message-left div p span {
    margin-left: .5vh;
    margin-right: 2vh;

    color: #FFFFFF90;
}
.chat-message-right {
    width: 100%;
    height: auto;
    margin: 0;
    float: left;
    transition: all 187ms ease;
}
.chat-message-right:hover {
    background: #FFFFFF06;
}
.chat-message-right div {
    max-width: 50%;
    height: auto;
    margin: .5vh 2% .5vh 0;
    padding: .75vh .75vh .75vh 1vh;
    float: right;

    background: var(--main);
    color: #FFF;
    border-radius: 1vh 1vh 0 1vh;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
}

#chat-actions {
    width: 96%;
    height: 3.5vh;
    margin: 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
}

#chat-pings {
    width: 100%;
    height: 9vh;
    margin: 0 0 1% 0;
    padding: 0;

    background: none;
    color: var(--main);
    border-radius: 1vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}
#chat-pings div {
    width: 96%;
    height: 3vh;
    margin: 0;
    padding: 0 2%;
    float: left;

    background: #FFFFFF00;
    color: #FFF;
    border-radius: 1vh;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    text-align: left;
    line-height: 3vh;
}
#chat-pings div span {
    margin-left: 1%;
    font-weight: normal;
    color: #FFFFFF90;
}
#chat-pings div:hover {
    background: #FFFFFF06;
}

#chat-actions input {
    width: calc(98% - 3.5vh);
    height: 3.5vh;
    margin: 0;
    padding: 0 0 0 2%;
    float: left;

    background: none;
    color: var(--main);
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
}
#chat-actions i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0;
    float: left;

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

    font-size: 1.5vh;
    filter: drop-shadow(0 0 .75vh #FFFFFF00);
    color: #FFFFFF90;
}
#chat-actions i:hover {
    color: var(--main);
    filter: drop-shadow(0 0 .75vh var(--glow));
}

/* ****** REPORTS ****** */
#admin-reports {
    height: 100%;
    padding: 0;
    display: none;
}

#reports-header {
    width: 96%;
    height: 3.5vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    overflow: hidden;
}

#reports-header h2 {
    width: calc(100% - 2vh);
    height: 3.5vh;
    margin: 0;
    padding: 0 1vh;
    float: left;
    
    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: bold;
    line-height: 3.5vh;
    transition: all 222ms ease;
}
#reports-header h2 span {
    margin-right: 1vh;
    color: #FFFFFF60;
    font-weight: normal;
}

#reports-header input {
    width: calc(100% - 8vh);
    height: 100%;
    margin: 0;
    padding: 0 1vh;
    float: left;

    background: none;
    color: #FFF;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
}
#reports-header i {
    width: 6vh;
    height: 100%;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;

    font-size: 1.7vh;
    filter: drop-shadow(0 0 1.5vh var(--glow));
}
#reports-header i:hover {
    background: var(--main);
    color: #FFFFFF;
    cursor: pointer;
}

#reports-list {
    width: 96%;
    height: calc(94% - 3.5vh);
    margin: 2%;
    float: left;

    border-radius: 1vh;
    overflow: auto;
    transition: all 187ms ease;
}

.report-item {
    width: calc(100% - 2vh);
    height: 6vh;
    margin: 0 0 1vh 0;
    padding: 1vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
}
.report-item h2 {
    width: calc(100% - 7vh);
    height: 3vh;
    margin: 0;
    float: left;
    
    font-family: 'Calibri', sans-serif;
    font-size: 2.75vh;
    font-weight: bold;
    line-height: 3vh;
}
.report-item h2 span {
    margin-right: 1vh;
    color: #FFFFFF60;
    font-weight: normal;
}
.report-item-props {
    width: calc(100% - 7vh);
    height: 3vh;
    margin: 0;
    float: left;

    overflow: hidden;
}
.report-item-props span {
    width: auto;
    height: 2vh;
    margin: .5vh .75vh .5vh 0;
    padding: 0 .5vh;
    float: left;

    background: var(--soft2);
    color: #FFFFFF90;
    border-radius: .5vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.45vh;
    font-weight: normal;
    line-height: 1.92vh;
}
.report-item-props span i {
    margin-right: .5vh;
    font-size: 1.25vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
}
.report-item-button {
    width: 6vh;
    height: 6vh;
    margin: -3vh 0 0 0;
    float: right;

    background: #FFFFFF09;
    border-radius: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;

    font-size: 2.5vh;
    filter: drop-shadow(0 0 2vh var(--glow));
}
.report-item-button:hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}

#reports-detail {
    width: 96%;
    height: calc(94% - 3.5vh);
    margin: 0% 2% 2% 2%;
    float: left;

    border-radius: 1vh;
    overflow: auto;
    transition: all 187ms ease;
}

#report-detail-screenshot {
    width: 30vh;
    height: 16.9vh;
    aspect-ratio: 16/9;
    margin: 0;
    float: left;

    background: #FFFFFF09;
    border-radius: 1vh;
    object-fit: cover;
    object-position: center;
}
#report-detail-screenshot:hover {
    cursor: pointer;
}
#report-detail-props {
    width: calc(100% - 31vh);
    height: 17vh;
    margin: 0 0 0 1vh;
    float: left;

    border-radius: .75vh;
    overflow-x: visible !important;
    overflow-y: auto !important;
}
#report-detail-props span {
    width: 100%;
    height: 3vh;
    margin: 0 0 .5vh 0;
    float: left;
}
#report-detail-props span:last-of-type {
    margin: 0;
}
#report-detail-props span i {
    width: 3vh;
    height: 3vh;
    margin: 0 1vh 0 0;
    float: left;

    background: var(--soft2);
    color: var(--main);
    border-radius: .75vh;
    overflow: hidden;

    font-size: 1.55vh;
    text-align: center;
    line-height: 3vh;
    filter: drop-shadow(0 0 1vh var(--glow));
}
#report-detail-props span b {
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 3vh;
    color: #FFF;
}

#report-detail-chat {
    width: 28vh;
    height: calc(100% - 24vh);
    margin: 1vh 0 0 0;
    padding: 1vh;
    float: left;

    background: #FFFFFF09;
    border-radius: 1vh;
    overflow-x: hidden;
    overflow-y: auto;
}
#report-detail-chat div {
    width: 100%;
    height: auto;
    float: left;
}
#report-detail-chat div span {
    max-width: 60%;
    height: auto;
    margin: 0 0 .5vh 0;
    padding: .5vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF;
    border-radius: .75vh .75vh .75vh 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
}
#report-detail-chat div span a {
    color: #FFFFFF90;
    font-style: italic;
    text-decoration: none;
}
#report-detail-chat div span a:hover {
    text-decoration: underline;
    cursor: pointer;
}
#report-detail-chat div span[self="true"] {
    float: right;
    background: var(--main);
    border-radius: .75vh .75vh 0 .75vh;
    text-align: right;
}
#report-detail-chat div:last-of-type span {
    margin: 0;
}

#report-chat-input {
    width: 26vh;
    height: 3vh;
    margin: .5vh 0 0 0;
    padding: 0 0 0 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFF;
    border-radius: .75vh 0 0 .75vh;
    border: none;
    outline: none;
    transition: all 187ms all;

    font-family: 'Calibri', sans-serif;
    font-size: 1.55vh;
    font-weight: normal;
}
#report-chat-send {
    width: 3vh;
    height: 3vh;
    margin: .5vh 0 0 0;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 0 .75vh .75vh 0;
    border: none;
    outline: none;
    transition: all 187ms all;

    font-size: 1.5vh;
    text-align: center;
    line-height: 3vh;
}
#report-chat-send:not([active="false"]):hover {
    color: var(--main);
    cursor: pointer;
}

#report-detail-actions {
    width: calc(100% - 31vh);
    height: calc(100% - 18.5vh);
    margin: -26vh 0 0 1vh;
    float: left;
}
#report-detail-actions button {
    width: 100%;
    height: 3vh;
    margin: 0 0 .75vh 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .75vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
    font-weight: normal;
    filter: drop-shadow(0 0 1.5vh var(--main));
}
#report-detail-actions button[active="true"] {
    background: var(--soft2);
}
#report-detail-actions button[active="disabled"] {
    background: #FFFFFF06;
    color: #FFFFFF60;
}
#report-detail-actions button:last-of-type {
    margin: 0;
}
#report-detail-actions button:not([active="disabled"]):hover {
    background: var(--main);
    color: #FFF;
}
#report-detail-actions button[active="disabled"]:hover {
    cursor: default;
}

/* ****** FRAKTION ****** */
#admin-fraks {
    height: 100%;
    padding: 0;
    display: none;
}

#fraks-search {
    width: 96%;
    height: 3.5vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    overflow: hidden;
}
#fraks-search i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0;
    float: left;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.5vh;
}
#fraks-search input {
    width: calc(100% - 3.5vh);
    height: 3.5vh;
    margin: 0;
    padding: 0;
    float: left;

    background: none;
    color: #FFF;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
}

#fraks-items {
    width: 96%;
    height: calc(92% - 8.5vh);
    margin: 2% 2% 0 2%;
    float: left;

    border-radius: 1vh;
    overflow: auto;
}
.frak-item {
    width: calc(100% - 2vh);
    height: 6vh;
    margin: 1% 0;
    padding: 1vh;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    overflow: auto;
    transition: all 187ms ease;
}
.frak-item::-webkit-scrollbar {
    width: 0;
}
.frak-item-left {
    width: calc(100% - 3vh);
    float: left;
}
.frak-item h1 {
    width: 100%;
    height: 3vh;
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 2.75vh;
    font-weight: bold;
}
.frak-item h1 b {
    width: .4vh;
    height: .4vh;
    margin: 1.4vh .5vh 0 0;
    float: left;

    background: #ff8000;
    border-radius: 50%;
    transition: all 99ms ease;
}
.frak-item h1 span {
    margin-left: 1%;
    font-size: 1.75vh;
    font-weight: normal;
    color: #FFFFFF90;
}
.frak-item-data {
    width: auto;
    height: 2vh;
    margin: 1% 1.5vh 0 0;
    float: left;

    font-size: 1.5vh;
    line-height: 2vh;
}
.frak-item-data span {
    margin-left: .5vh;
    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 2vh;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
.frak-item-data[onclick] span:hover {
    color: #FFF;
}
.frak-item-actions {
    width: 2vh;
    height: 6vh;
    margin: 0 0 0 1vh;
    float: left;

    background: #FFFFFF06;
    border-radius: .5vh;
    overflow: hidden;
}
.frak-item-actions i {
    width: 2vh;
    height: 2vh;
    margin: 0;

    font-size: 1.1vh;
    text-align: center;
    line-height: 2vh;
    color: var(--main);
    transition: all 187ms ease;
}
.frak-item-actions i:hover {
    background: var(--main);
    color: #FFF;
}

/* ****** WEATHER ****** */
#admin-weather {
    height: 100%;
    padding: 0;
    display: none;
}

/* ****** BANS ****** */
#admin-bans {
    height: 100%;
    padding: 0;
    display: none;
}

#bans-search {
    width: 96%;
    height: 3.5vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    overflow: hidden;
}
#bans-search i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0;
    float: left;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.5vh;
}
#bans-search input {
    width: calc(100% - 10.5vh);
    height: 3.5vh;
    margin: 0;
    padding: 0;
    float: left;

    background: none;
    color: #FFF;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
}
#bans-create {
    width: 7vh !important;
    height: 3.5vh;
    margin: 0;
    float: left;

    background: #FFFFFF06;
    color: var(--main);
    border-radius: 0;
    transition: all 187ms ease;

    font-size: 1.87vh;
    text-align: center;
    line-height: 3.5vh;
}
#bans-create[disabled] {
    color: #FFFFFF60;
}
#bans-create:not([disabled]):hover {
    background: var(--main);
    color: #FFFFFF90;
    cursor: pointer;
}
.bans-stats {
    width: calc((94% - 6vh) / 3);
    height: 5vh;
    margin: 1% 0 0 1%;
    padding: .5vh 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
.bans-stats span {
    width: 100%;
    margin: -1% 0 0 0;
    float: left;

    font-size: 3vh;
    font-weight: bold;
    color: var(--main);
}

#bans-items {
    width: 100%;
    height: calc(92% - 8.5vh);
    margin: 2% 0 0 0;
    float: left;

    overflow-x: hidden;
    overflow-y: auto;
}
.bans-item {
    width: 96%;
    height: 6vh;
    margin: 1% 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    overflow: hidden;
    transition: all 187ms ease;
}
.bans-item-icon {
    width: 6vh;
    height: 6vh;
    margin: 0;
    float: left;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75vh;
    filter: drop-shadow(0 0 2vh var(--main));
}
.bans-item-name {
    width: calc(100% - 12vh);
    height: auto;
    margin: .5vh 0 0 0;
    float: left;

    color: #FFF;
    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: bold;
}
.bans-item-name span {
    margin-left: 2%;
    font-size: 1.5vh;
    font-weight: normal;
    color: #FFFFFF90;
}
.bans-item-identifier {
    width: calc(100% - 12vh);
    height: 2vh;
    margin: 0;
    float: left;
}
.bans-item-identifier i {
    width: auto;
    height: 2vh;
    margin: 0 1% 0 0;
    float: left;

    font-size: 1.2vh;
    line-height: 2vh;
    color: var(--glow);
    filter: drop-shadow(0 0 1vh var(--glow));
}
.bans-item-identifier span {
    width: auto;
    height: 2vh;
    margin: 0 3% 0 0;
    float: left;
    
    font-family: 'Calibri', sans-serif;
    font-size: 1.4vh;
    font-weight: normal;
    line-height: 2vh;
    color: #FFFFFF60;
    transition: all 187ms ease;
}
.bans-item-identifier span:hover {
    color: #FFFFFF90;
}
.bans-item-button {
    width: 4vh;
    height: 4vh;
    margin: -2.25vh 1vh 1vh 1vh;
    float: right;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    transition: all 187ms ease;
}
.bans-item-button:hover {
    background: #FFFFFF12;
}
.bans-item-button i {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    font-size: 2vh;
    line-height: 4vh;
    filter: drop-shadow(0 0 1.5vh var(--glow));
    transform: rotate(360deg);
    transition: all 187ms ease;
}

.bans-item-data {
    width: 100%;
    height: 16.5vh;
    margin: 0;
    float: left;

    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 187ms ease;
}
.ban-data-item {
    width: calc(100% - 3vh);
    max-height: 5vh;
    margin: 0 0 1vh 1vh;
    padding: .5vh;
    float: left;

    background: #FFFFFF06;
    border-radius: .75vh;
    color: var(--main);
    overflow-x: hidden;
    overflow-y: auto;

    font-family: 'Calibri', sans-serif;
    font-size: 1.6vh;
    font-weight: bold;
    line-height: 1.6vh;
}
.ban-data-item span {
    width: 100%;
    height: auto;
    margin: -.25vh 0 0 0;
    padding: 0;
    float: left;

    font-size: 1.4vh;
    font-weight: normal;
    line-height: normal;
    line-break: anywhere;
    color: #FFF;
}
.ban-data-item[size="1/4"] {
    width: calc((100% - 5vh) / 4);
}
.ban-data-item[size="1/2"] {
    width: calc((100% - 5vh) / 2);
    height: 5vh !important;
}
.ban-data-item[size="3/4"] {
    width: calc(((100% - 5vh) / 4) * 3);
}
.ban-data-item[hover="true"] span {
    transition: all 187ms ease;
    color: #FFFFFF90;
}
.ban-data-item[hover="true"] span:hover {
    color: #FFF;
}
.ban-data-action {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0 -.5vh 1vh 1vh;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-size: 1.6vh;
    text-align: center;
    line-height: 3.5vh;
    filter: drop-shadow(0 0 2vh var(--glow));
}
.ban-data-action:hover {
    background: var(--main);
    color: #FFF;
    cursor: pointer;
}
.ban-data-input {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0 -.5vh 1vh 1vh;
    padding: 0;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    text-align: center;
    line-height: 3.5vh;
}
.ban-data-button {
    width: calc(100% - 14.5vh);
    height: 3.5vh;
    margin: 0 1vh 1vh 1.5vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    filter: drop-shadow(0 0 2vh var(--glow));
}
.ban-data-button:hover {
    background: var(--main);
    color: #FFF;
}

/* ****** DEVELOPER ****** */
#admin-developer {
    height: 100%;
    padding: 0;
    display: none;
}

#developer-resources {
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
}
#resources-search {
    width: 96%;
    height: 3.5vh;
    margin: 2% 0 0 2%;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    border: none;
    outline: none;
}
#resources-search i {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0;
    float: left;

    font-size: 1.75vh;
    text-align: center;
    line-height: 3.5vh;
}
#resources-search input {
    width: calc(100% - 3.5vh);
    height: 3.5vh;
    margin: 0;
    padding: 0;
    float: left;

    background: none;
    color: #FFF;
    border: none;
    outline: none;

    font-family: 'Calibri', sans-serif;
    font-size: 1.87vh;
}
#resources-search span {
    position: absolute;
    width: auto;
    height: 3.5vh;
    margin: 0;
    right: 3%;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.3vh;
    text-align: center;
    line-height: 3.5vh;
    color: #FFFFFF60;
}
.resources-stats {
    width: calc((94% - 6vh) / 3);
    height: 5vh;
    margin: 1% 0 0 1%;
    padding: .5vh 1vh;
    float: left;

    background: #FFFFFF09;
    color: #FFFFFF90;
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
}
.resources-stats span {
    width: 100%;
    margin: -1% 0 0 0;
    float: left;

    font-size: 3vh;
    font-weight: bold;
    color: var(--main);
}
#resources-items {
    width: 96%;
    height: calc(92% - 8.5vh);
    margin: 2% 2% 0 2%;
    float: left;

    border-radius: 1vh;
    overflow: auto;
}
.resource-item {
    width: calc(100% - 2vh);
    height: 6vh;
    margin: 1% 0;
    padding: 1vh;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;
    overflow: auto;
    transition: all 187ms ease;
}
.resource-item::-webkit-scrollbar {
    width: 0;
}
.resource-item-left {
    width: calc(100% - 9vh);
    float: left;
}
.resource-item-right {
    width: 9vh;
    height: 6vh;
    float: left;
}
.resource-item h1 {
    width: calc(100% - 10vh);
    height: 3vh;
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 2.75vh;
    font-weight: bold;
}
.resource-item h1 b {
    width: .4vh;
    height: .4vh;
    margin: 1.4vh .5vh 0 0;
    float: left;

    background: #ff8000;
    border-radius: 50%;
    transition: all 99ms ease;
}
.resource-item h1 span {
    margin-left: 1%;
    font-size: 1.75vh;
    font-weight: normal;
    color: #FFFFFF90;
}
.resource-item-data {
    width: auto;
    height: 2vh;
    margin: 1% 2% 0 0;
    float: left;

    font-size: 1.5vh;
    line-height: 2vh;
}
.resource-item-data span {
    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 2vh;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
.resource-item-data[onclick] span:hover {
    color: #FFF;
}
.resource-item-actions {
    width: 2vh;
    height: 6vh;
    margin: 0 0 0 1vh;
    float: left;

    background: #FFFFFF06;
    border-radius: .5vh;
    overflow: hidden;
}
.resource-item-actions i {
    width: 2vh;
    height: 2vh;
    margin: 0;

    font-size: 1.1vh;
    text-align: center;
    line-height: 2vh;
    color: var(--main);
    transition: all 187ms ease;
}
.resource-item-actions i:hover {
    background: var(--main);
    color: #FFF;
}
.resource-item-config {
    width: 6vh;
    height: 6vh;
    margin: 0;
    float: left;

    background: #FFFFFF06;
    color: var(--main);
    border-radius: .75vh;
    transition: all 187ms ease;

    
    font-size: 1.75vh;
    text-align: center;
    line-height: 6vh;
}
.resource-item-config:hover {
    background: var(--main);
    color: #FFF;
}

#developer-code {
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
    display: none;
}
#developer-code-info {
    width: calc(96% - 2vh);
    height: 4vh;
    margin: 2%;
    padding: 0 1vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: 1vh;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 4vh;
}
#code-info-back {
    width: auto;
    height: 4vh;
    margin: 0 1% 0 0;
    float: left;

    font-size: 1.5vh;
    text-align: center;
    line-height: 4vh;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
#code-info-back:hover {
    color: var(--main);
}
.code-info-action {
    width: 3vh;
    height: 4vh;
    margin: 0;
    float: right;

    font-size: 1.5;
    text-align: center;
    line-height: 4vh;
    color: #FFFFFF90;
    transition: all 187ms ease;
}
.code-info-action:hover {
    color: var(--main);
}
#developer-code-text {
    width: 96%;
    height: calc(94% - 6vh);
    margin: 0 2%;
    padding: 1vh 0;

    border-radius: 1vh;
    border: none;
    outline: none;
}

/* ****** ***** ****** */
/* ****** IMAGE ****** */
/* ****** ***** ****** */
#admin-image {
    position: absolute;
    width: 140vh;
    height: 80vh;
    margin: 0;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%) scale(0);

    background: var(--soft);
    border-radius: 2vh;
    overflow: hidden;
    display: block;
    box-shadow: 0 0 9vh 2vh #000;
    transition: all 187ms ease;
}
#admin-image img {
    width: 100%;
    height: 100%;
    margin: 0;

    object-fit: cover;
    object-position: center;
}
#admin-image i {
    position: absolute;
    top: 1vh;
    right: 1vh;

    font-size: 3vh;
    color: var(--glow);
    transition: all 187ms ease;
}
#admin-image i:hover {
    color: var(--main);
    cursor: pointer;
}

/* ****** ****** ****** */
/* ****** WARNED ****** */
/* ****** ****** ****** */
#admin-warned {
    position: fixed;
    width: 100vw;
    height: 100vh;
    margin: 0;
    top: 0;
    left: 0;

    background: var(--soft);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 187ms ease;
}

#warned-box {
    width: 30vh;
    height: 30vh;
    padding: 1vh;

    background: linear-gradient(60deg, var(--background2));
    color: #FFF;
    border-radius: 2vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 187ms ease;
}
#warned-box i {
    width: 100%;
    margin: .25vh 0 .75vh 0;

    font-size: 5vh;
    text-align: center;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#warned-box h1 {
    width: 100%;
    margin: 0;

    font-family: 'Calibri', sans-serif;
    font-size: 4vh;
    font-weight: bolder;
    text-align: center;
    line-height: 4vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#warned-box h3 {
    width: 100%;
    height: 40%;
    margin: 1vh 0 0 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    text-align: center;
    color: var(--main);
}
#warned-box h3 span {
    color: #FFF;
}
#warned-box h4 {
    width: 100%;
    margin: 2vh 0 0 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF90;
}

#warned-timeline {
    width: 100%;
    height: .75vh;
    margin: .5vh 0 0 0;

    background: #FFFFFF09;
    border-radius: .5vh;
    overflow: hidden;
}
#warned-timeline span {
    width: 50%;
    height: 100%;
    margin: 0;
    float: left;

    background: var(--main);
    transition: all 9s linear;
}

/* ****** ******** ****** */
/* ****** SPECTATE ****** */
/* ****** ******** ****** */
#admin-spectate {
    position: absolute;
    width: 23vh;
    height: 20vh;
    top: 50%;
    left: -26vh;
    padding: .5vh 1vh;
    transform: translateY(-50%);

    background: linear-gradient(60deg, var(--background2));
    color: #FFF;
    border-radius: 1vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 187ms ease;
}

#spectate-name {
    width: 100%;
    margin: 0 0 3% 0;

    font-family: 'Calibri', sans-serif;
    font-size: 3vh;
    font-weight: bold;
    line-height: 3vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#spectate-name span {
    margin-left: 2%;
    font-weight: normal;
    color: #FFFFFF60;
    filter: none;
}

.spectate-data {
    width: 100%;
    margin: 0 0 1% 0;
    float: left;

    font-size: 1.5vh;
    line-height: 2vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--glow));
}
.spectate-data span {
    margin-left: 2%;
    
    font-family: 'Calibri', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    color: #FFF;
    filter: none;
}
.spectate-data span span {
    margin-left: 1%;
    color: #FFFFFF90;
}

#spectate-job {
    margin-top: 3%;
}
#spectate-group {
    margin-top: 3%;
}
#spectate-coords {
    margin-top: 3%;
}

/* ****** ****** ****** */
/* ****** NOCLIP ****** */
/* ****** ****** ****** */
#admin-noclip {
    position: absolute;
    width: 16vh;
    height: 6vh;
    top: -9vh;
    left: 50%;
    padding: .5vh;
    transform: translateX(-50%);

    background: linear-gradient(60deg, var(--background2));
    color: #FFF;
    border-radius: 1vh;
    overflow: hidden;
    transition: all 187ms ease;
}
#admin-noclip h4 {
    width: 100%;
    height: 2vh;
    margin: 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
    font-weight: normal;
    line-height: 2vh;
    color: #FFFFFF90;
}
#admin-noclip i {
    width: 4vh;
    height: 4vh;
    margin: 0;
    float: left;
    
    font-size: 2.75vh;
    text-align: center;
    line-height: 4vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}
#admin-noclip h2 {
    width: auto;
    height: 4vh;
    margin: 0 0 0 2%;
    float: left;
    
    font-family: 'Calibri', sans-serif;
    font-size: 2.75vh;
    font-weight: bold;
    line-height: 4vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}

/* ****** ****** ****** */
/* ****** COORDS ****** */
/* ****** ****** ****** */
#admin-coords {
    position: absolute;
    width: 23vh;
    height: 15vh;
    top: 50%;
    left: -26vh;
    padding: .5vh 1vh;
    transform: translateY(-50%);

    background: linear-gradient(60deg, var(--background2));
    color: #FFF;
    border-radius: 1vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 187ms ease;
}

#admin-coords h1 {
    width: 100%;
    margin: 0 0 3% 0;

    font-family: 'Calibri', sans-serif;
    font-size: 3vh;
    font-weight: bold;
    line-height: 3vh;
    color: var(--main);
    filter: drop-shadow(0 0 2vh var(--glow));
}

#admin-coords h3 {
    width: 100%;
    height: auto;
    margin: .5vh 0;

    font-family: 'Calibri', sans-serif;
    font-size: 1.75vh;
}
#admin-coords h3 b {
    width: 2.25vh;
    height: 2.25vh;
    float: left;

    background: #FFFFFF09;
    color: var(--main);
    border-radius: .5vh;

    font-weight: bold;
    text-align: center;
    line-height: 2.25vh;
    filter: drop-shadow(0 0 1.5vh var(--glow));
}
#admin-coords h3 span {
    margin-left: 1vh;
    font-weight: normal;
    color: #FFFFFF90;
    filter: none;
}

/* ****** ********* ****** */
/* ****** JUMPSCARE ****** */
/* ****** ********* ****** */
#admin-jumpscare {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;

    display: none;
}
#admin-jumpscare img {
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;

    object-fit: cover;
    object-position: center;
}

/* ****** ********* ****** */
/* ****** REDESIGN ****** */
/* ****** ********* ****** */

/* ****** SWITCH ****** */
.switch-box {
    width: 100%;
    height: 2.25vh;
    margin: 1% 0;
    float: left;
}
.switch {
    position: relative;
    width: 3.75vh;
    height: 2.25vh;
    margin: 0;
    float: left;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.switch input[disabled] ~ .switch-slider:before { 
    background: #FFFFFF60;
    transition: .2s;
}
.switch-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    float: left;

    background: #FFFFFF10;
    border-radius: .5vh;
    transition: .4s;
    cursor: pointer;
}
.switch-slider:before {
    position: absolute;
    content: "";
    height: 1.5vh;
    width: 1.5vh;
    left: .375vh;
    bottom: .375vh;
    background: var(--main);
    border-radius: .25vh;
    transition: .4s;
}
.switch-text {
    width: auto;
    height: 2.25vh;
    margin: 0 0 0 1vh;
    float: left;

    font-family: 'Calibri', sans-serif;
    line-height: 2.25vh;
    color: #FFFFFF90;
    transition: all .2s ease;
}
  
input:checked + .switch-slider {
    background: var(--main);
}
input:checked + .switch-slider:before {
    background: #FFFFFF;
}
input:checked ~ .switch-text {
    color: var(--main);
}
input:checked + .switch-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(1.45vh);
}
  
/* ****** BUTTON HOVER ****** */
button {
    border: none;
    outline: none;
    transition: all 187ms ease;

    font-family: 'Calibri', sans-serif;
}
button[disabled], button[active=false] {
    color: #FFFFFF60 !important;
    cursor: not-allowed !important;
}
button:not([disabled]):hover, button:not([active='false']):hover {
    cursor: pointer;
}

/* ****** INPUT ARROWS ****** */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ****** SCROLLBAR ****** */
::-webkit-scrollbar {
    width: .6vh;
    height: .6vh;
}
::-webkit-scrollbar-track {
    border-radius: .6vh;
}
::-webkit-scrollbar-thumb {
    background: var(--glow); 
    border-radius: .6vh;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--main); 
}

/* ****** TRANSITION ****** */
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
 }

/* ****** ROUND SLIDER ****** */
 .circle-slider {
	--rng-focus: #064374;
	--rng-lower: #6495ED;
	--rng-upper: #CFD8DC;
	--rng-percent: 0%;
	--rng-percent-upper: 80%;
	
	--rng-bdrs: .375rem;
	--rng-bgi: linear-gradient(to right, var(--rng-lower) var(--rng-percent), var(--rng-upper) var(--rng-percent));
	--rng-h: 0.75rem;
	--rng-m: 2rem 0;
	--rng-w: 100%;
	
	--rng-label-c: #333;
	--rng-label-fz: 0.75rem;
	--rng-label-off: 0.25rem;
				
	--rng-thumb-bdrs: 50%;
	--rng-thumb-bxsh: none;
	--rng-thumb-bxsh--focus: inset 0 0 0 0.25rem var(--rng-focus);
	--rng-thumb-bgc: #0960A5;
	--rng-thumb-h: 2rem;
	--rng-thumb-w: 2rem;
	--rng-thumb-z: 1;

	background-image: var(--rng-bgi);
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	font-family: inherit;
	height: var(--rng-h);
	margin: var(--rng-m);
	outline: none;
	position: relative;
	width: var(--rng-w);
}

.circle-slider::-moz-range-thumb {
	background-color: var(--rng-thumb-bgc);
	border-radius: var(--rng-thumb-bdrs);
	box-shadow: var(--rng-thumb-bxsh);
	color: #000;
	cursor: ew-resize;
  height: var(--rng-thumb-h);  
	margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
	position: relative;
	width: var(--rng-thumb-w);
	z-index: var(--rng-thumb-z);
}
.circle-slider::-webkit-slider-thumb {
	background-color: var(--rng-thumb-bgc);
	border-radius: var(--rng-thumb-bdrs);
	box-shadow: var(--rng-thumb-bxsh);
	cursor: ew-resize;
  height: var(--rng-thumb-h);  
	margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
	position: relative;
	width: var(--rng-thumb-w);
	z-index: var(--rng-thumb-z);
}
.circle-slider:focus::-webkit-slider-thumb {
	box-shadow: var(--rng-thumb-bxsh--focus);
}

.circle-slider::-moz-range-track {
	background: transparent;
	background-size: 100%;
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	height: var(--rng-h);
}
.circle-slider::-webkit-slider-runnable-track {
	background: transparent;
	background-size: 100%;
	border-radius: var(--rng-bdrs);
	box-sizing: border-box;
	height: var(--rng-h);
}
.circle-slider,
.circle-slider::-webkit-slider-runnable-track,
.circle-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
}

.circle-slider::after,
.circle-slider::before {
	color: var(--rng-label-c);
	font-size: var(--rng-label-fz);
	line-height: 1;
	position: absolute;
	top: calc(var(--rng-h) + var(--rng-label-off));
	z-index: -1;
}
.circle-slider[data-range*="labels"]::after {
	content: attr(max);
	right: 0;
}
.circle-slider[data-range*="labels"]::before {
	content: attr(min);
}
.circle-slider--labels-above .circle-slider::after,
.circle-slider--labels-above .circle-slider::before {
	top: -1rem; /* TODO */
}

.circle-slider__output {
	--rng-output-bgc: #444;
	--rng-output-c: #EEE;
	--rng-output-p: 0.25rem 0 0 0;
	--rng-output-t: 0.25rem;
	--rng-output-w: 2rem;

	background-color: var(--rng-output-bgc);
	color: var(--rng-output-c);
	display: inline-block;
	font-family: sans-serif;
	font-size: 0.675rem;
	left: calc(1% * var(--rng-unit) - ((var(--rng-thumb-w) / 100) * var(--rng-unit)));
	padding: var(--rng-output-p);
	position: relative;
	text-align: center;
	top: var(--rng-output-t);
	width: var(--rng-output-w);
}
.circle-slider__output::after {
	border-left: calc(var(--rng-output-w) / 2) solid transparent;
  border-right: calc(var(--rng-output-w) / 2) solid transparent;
	border-top: calc(var(--rng-output-w) / 3) solid var(--rng-output-bgc);
	content: "";
	height: 0; 
	left: 0;
	position: absolute;
	top: 100%;
	width: 0;
}

.circle-slider__wrapper .circle-slider {
	bottom: 1rem;
	left: 0;
	margin: 0;
	position: absolute;
}
.circle-slider__wrapper .circle-slider__output {
	position: absolute;
	top: 0;
}
.circle-slider__wrapper {
	--rng-ticks-fill: #B0B0B0;
	flex: 1;
	height: 4rem; /* TODO */
	margin-bottom: 1rem;
	position: relative;
}

.circle-slider__multi [data-range*="lower"] {
	--rng-bgi: linear-gradient(to right, var(--rng-upper) var(--rng-percent), var(--rng-lower) var(--rng-percent), var(--rng-lower) var(--rng-percent-upper), var(--rng-upper) var(--rng-percent-upper));
}
.circle-slider__multi [data-range*="upper"] {
	background: none;
}

.circle-slider--circular {
	--circle-bgc: #FFF;
	--circle-size: 200px;
	--track-bgc: hsl(219, 20%, 85%);
	--track-fill: cornflowerblue;
	--thumb-size: 30px;

	--gradient-start: 0deg;
	--gradient-end: 0deg;

	background-image: conic-gradient(var(--track-bgc) 0, var(--track-bgc) var(--gradient-start), var(--track-fill) var(--gradient-start), var(--track-fill) var(--gradient-end), var(--track-bgc) var(--gradient-end), var(--track-bgc));
	border-radius: 50%;
	display: inline-block;
	height: var(--circle-size);
	margin: 0.25rem;
	position: relative;
  touch-action: none;
	width: var(--circle-size);
}
.circle-slider--circular::before {
	align-items: center;
	background-color: var(--circle-bgc);
	border-radius: 50%;
	content: attr(data-value);
	display: flex;
	font-family: ui-sans-serif, ui-system, sans-serif;
	font-size: 2rem;
	height: calc(var(--circle-size) - (var(--thumb-size) * 2));
	justify-content: center;
	left: var(--thumb-size);
	position: absolute;
	top: var(--thumb-size);
	width: calc(var(--circle-size) - (var(--thumb-size) * 2));
}
.circle-slider--circular::after {
	background-color: var(--track-fill);
	border-radius: 50%;
	content: "";
	height: var(--thumb-size);
	position: absolute;
	left: calc(50% - (var(--thumb-size) / 2));
	width: var(--thumb-size);
}
.circle-slider--circular-output {
	background: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	height: var(--thumb-size);
	margin-top: calc(var(--thumb-size) / -2);
	transform: rotate(var(--angle));
	transform-origin: center left;
	width: 50%;
	z-index: 1;
}
.circle-slider--circular-output::before {
	background-color: var(--thumb-bgc, #FFF);
	border: var(--thumb-bdw, 2px) solid var(--track-fill);
	border-radius: 50%;
	box-shadow: var(--thumb-bxsh, none);
	box-sizing: border-box;
	content: "";
	cursor: grab;
	display: inline-block;
	height: var(--thumb-size);
	position: absolute;
	right: 0;
	width: var(--thumb-size);
}
.circle-slider--circular-output:focus {
	--thumb-bxsh: inset 0 0 0 2px #FFF, inset 0 0 0 10px var(--track-fill);
	outline: none;
}

.circle-slider--ticks {
	fill: var(--rng-ticks-fill);
	bottom: 0;
	height: 1rem; /* TODO */
	left: 0;
	position: absolute;
	width: calc(100% - var(--rng-thumb-w));
	margin-left: calc(var(--rng-thumb-w) / 2);
}
.circle-slider--ticks rect:first-of-type {
	transform: translateX(1px);
}
.circle-slider--ticks rect:last-of-type {
	transform: translateX(-1px);
}
.circle-slider--ticks-above .circle-slider--ticks {
	bottom: auto;
	top: 1.25rem;
}
.circle-slider--ticks-full .circle-slider--ticks {
	--rng-ticks-fill: #ffccd5; /* TODO! */
	height: 2.5rem;
}

/* Modifiers */
.circle-slider--grey {
	--rng-focus: #A0A0A0;
	--rng-lower: #B0B0B0;
	--rng-upper: #DEDEDE;
	--rng-h: 8px;
	--rng-thumb-bgc: #FFF;
	--rng-thumb-bxsh: 1px 2px 4px 1px rgba(0, 0, 0, .25);
}
.circle-slider--pink {
	--rng-focus: #E6002A;
	--rng-lower: #FF91A6;
	--rng-upper: #FFE0E5;
	--rng-h: 4px;
	--rng-thumb-bdrs: 0.25rem;
	--rng-thumb-bgc: #FF2F56;
	--rng-thumb-h: 2rem;
	--rng-thumb-w: 1rem;
	--rng-ticks-fill: #ffccd5;
}
.circle-slider--hue {
	--rng-value: 0;
	--rng-bgi: linear-gradient(to right, red, #ff8000, #ff0, #80ff00, lime, #00ff80, cyan, #007fff, blue, #7f00ff, #f0f, #ff0080, red);
	--rng-thumb-bgc: hsl(var(--rng-value), 100%, 50%);
	--rng-thumb-bxsh--focus: inset 0 0 0 0.125rem rgba(255, 255, 255, 0.8), 0 0 0 0.125rem hsl(var(--rng-value), 100%, 25%);
  --rng-thumb-bxsh: inset 0 0 0 0.125rem hsl(var(--rng-value), 100%, 30%);
}
.circle-slider--icons {
	--ico-audio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path d="M27.814 28.814c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 2.739-2.739 4.247-6.38 4.247-10.253s-1.508-7.514-4.247-10.253c-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0c3.305 3.305 5.126 7.7 5.126 12.374s-1.82 9.069-5.126 12.374c-0.293 0.293-0.677 0.439-1.061 0.439zM22.485 25.985c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 4.094-4.094 4.094-10.755 0-14.849-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0c2.55 2.55 3.954 5.94 3.954 9.546s-1.404 6.996-3.954 9.546c-0.293 0.293-0.677 0.439-1.061 0.439v0zM17.157 23.157c-0.384 0-0.768-0.146-1.061-0.439-0.586-0.586-0.586-1.535 0-2.121 2.534-2.534 2.534-6.658 0-9.192-0.586-0.586-0.586-1.536 0-2.121s1.535-0.586 2.121 0c3.704 3.704 3.704 9.731 0 13.435-0.293 0.293-0.677 0.439-1.061 0.439z"></path><path d="M13 30c-0.26 0-0.516-0.102-0.707-0.293l-7.707-7.707h-3.586c-0.552 0-1-0.448-1-1v-10c0-0.552 0.448-1 1-1h3.586l7.707-7.707c0.286-0.286 0.716-0.372 1.090-0.217s0.617 0.519 0.617 0.924v26c0 0.404-0.244 0.769-0.617 0.924-0.124 0.051-0.254 0.076-0.383 0.076z"></path></svg>');
	--ico-mute: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path d="M13 30c-0.26 0-0.516-0.102-0.707-0.293l-7.707-7.707h-3.586c-0.552 0-1-0.448-1-1v-10c0-0.552 0.448-1 1-1h3.586l7.707-7.707c0.286-0.286 0.716-0.372 1.090-0.217s0.617 0.519 0.617 0.924v26c0 0.404-0.244 0.769-0.617 0.924-0.124 0.051-0.254 0.076-0.383 0.076z"></path></svg>');
	align-items: center;
	display: flex;
	width: 100%;
}
[data-icon] {
	--icon-bgc: #B0B0B0;
	--icon-w: 2rem;
	background-color: var(--icon-bgc);
	height: var(--icon-w);
	margin-top: 0.5rem;
	mask: no-repeat center/var(--icon-w) var(--icon);
	-webkit-mask: no-repeat center/var(--icon-w) var(--icon);
	width: var(--icon-w);
}
[data-icon="audio"] { --icon: var(--ico-audio); margin-left: 1rem }
[data-icon="mute"] { --icon: var(--ico-mute); }