@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

@import "https://assets.nopixel.net/web/fonts/gilroy/stylesheet.css";

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');



body { margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; color: #FFFA; font-family: gilroy; height: auto;}



::-webkit-scrollbar-track { ---webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #f5f5f571; }

::-webkit-scrollbar { width: 0px; height: 0px; background-color: #f5f5f571; }

::-webkit-scrollbar-thumb { background-color: rgb(253, 0, 0); }

::-webkit-scrollbar-thumb:hover { background-color: #f5f5f571; }



* { box-sizing: border-box; }



/*

    background: linear-gradient(to top, #15191fa6 0%, #0b0d10a1 100%);

    background: radial-gradient(ellipse farthest-corner at center, rgba(255, 255, 255, 0.1) 0%, hsla(0, 0%, 100%, 0) 100%);

    border: 1px #6cffc400 solid;

    color: #29f1b7;

    filter: drop-shadow(0px 0px 5px #29f1b8c7);

    text-shadow: 0px 0px 5px #29f1b8c7;

*/



.flex-center {

    display: flex;

    justify-content: center;

    align-items: center;

}



.bottom-hud-holder {

    position: absolute;

    bottom: 1.2vh;

    left: 0;

    width: 100%;

    height: 4vh;

    flex-direction: column;

}



.main-part {

    height: 5vh;

    text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;

}



.left-dkkd {

    gap: 0.2vw;

    height: 100%;

    transform: skew(-35deg);

    margin-right: 1vw;

}



.one-info {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-width: 1vw;

    height: 100%;

    color: #27b6ee;

    font-weight: 500;

    font-size: 0.9vw;

    padding-top: 1vh;

    border: 1px solid;

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

}



.one-info:has(span) {

    width: 3.5vw;

}



.one-info span {

    transform: skew(35deg);

    font-weight: 800;

}





.one-info.death::before, .one-info.kill::before, .one-info.KD::before {

    position: absolute;

    top: 0.5vh;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: skew(35deg);

    font-family: Gilroy;

    color: white;

    font-weight: 800;

    font-size: 0.6vw;

}



.one-info.death::before { content: "DEATHS";color: #bb221a; }

.one-info.kill::before { content: "KILLS";color: #a78225; }

.one-info.KD::before { content: "K/D";color: #cfcfcf; }



.one-info.death {

    color: #bb221a;

}



.one-info.kill {

    color: #a78225;

}



.one-info.KD {

    color: #cfcfcf;

}



.middle-hp-armor {

    display: flex;

    align-items: center;

    flex-direction: column;

    width: 18vw;

    height: 100%;

    margin-left: 0.5vw;

    row-gap: 0.5vh;

}



.hp-bar {

    display: flex;

    width: 100%;

    height: 3vh;

}



.armor-bar {

    display: flex;

    width: 90%;

    height: 3vh;

}



.hp-bar-icon, .armor-bar-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

    font-size: 1.15vw;

    margin-right: 0.5vw;

    color: rgba(4,170,4,1);

    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.514);

}



.armor-bar-icon {

    color: #0e7bbbda;

}



.hp-bar-holder, .armor-bar-holder {

    height: 100%;

    width: 100%;

    background: #0b0d1038;

    padding: 0.4vw;

}



.hp-bar-bar, .armor-bar-bar {

    background-color: #3333333d;

    width: 100%;

    height: 100%;

}



.armor-bar-bar {

    display: flex;

    background-color: unset;

    gap: 2px;

    transform: skew(-35deg);

}



.hp-bar-bar-inner, .armor-bar-bar-inner {

    position: relative;

    width: 85%;

    height: 100%;

    background: linear-gradient(57deg, rgba(3, 128, 3, 0.9) 10%, rgba(4, 170, 4, 0.9) 85%);

    overflow: hidden;

    transition: all 0.5s;

}



.segment {

    flex: 1; /* Each segment takes equal space */

    background-color: #3333333d; /* Default background */

    position: relative;

    overflow: hidden;

  }

  

  .segment::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background: linear-gradient(57deg, #27b6ee 10%, #27b6ee 85%);

    transform: scaleX(var(--fill-scale, 0)); /* Default scale is 0 */

    transform-origin: left;

    transition: transform 0.3s ease;

  }





.right-wpn {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

    width: 12vw;

    color: #29f1b8da;

    font-weight: 500;

    font-size: 0.85vw;

    transform: skew(35deg);

    margin-left: 1.5vw;



}



.right-wpn-bg {

    position: absolute;

    left: 0;

    top: 0;

    display: flex;

    height: 100%;

    width: 100%;

    z-index: -1;

    justify-content: space-between;

}



.right-wpn .bg {

    border: 1px solid;

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

    height: 100%;

    min-width: 1vw;

    position: relative;

}



.wpn-info, .ammo-info {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: skew(-35deg);    

    width: 50%;

    height: 100%;

}



.wpn-info {

    margin-right: 1vw;

    margin-left: 0.5vw;

}



.ammo-info {

    justify-content: flex-start !important;

}



.wpn-info-name {

    position: absolute;

    bottom: 0.5vh;

    right: 0vw;

    font-size: 0.5vw;

    color: #ffffffcb;

    font-weight: 600;

    font-family: Gilroy;

    z-index: -99;

}



.wpn-info-icon, .ammo-info-icon {

    height: 100%;

    width: 10%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 0.7vw;

}



.wpn-info-icon img, .ammo-info-icon img {

    height: 60%;

    width: auto;

}



.ammo-info-icon img {

    height: 40%;

    width: auto;

}



.wpn-info-icon img {

    height: 80%;

    width: auto;

    margin-top: -15px;

    rotate: -8deg;

    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.137));

}



.ammo-info-amount, .ammo-info-has {

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffffcb;

    font-weight: 800;

    font-family: Gilroy;

}



.middle-hotbar {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    column-gap: 0.5vw;

    top: -6.5vh;

    margin-left: 1vw;

    width: 18vw;

    height: 5vh;

}



.one-slot {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    width: 20%;

    height: 100%;

    background: #0b0d10b7;

    color: white;

    font-weight: 500;

    font-size: 0.85vw;

    border: 1px solid;

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

    font-family: Gilroy;

}



.one-slot-icon {

    height: 100%;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0.25vw;

}



.one-slot-icon img {

    height: auto;

    width: 80%;

}



.one-slot-amount {

    position: absolute;

    bottom: 0.25vh;

    right: 0.25vw;

    font-weight: 600;

    font-size: 0.5vw;

    color: white;

}



.one-slot-slot-no {

    position: absolute;

    top: 0vh;

    left: 0vw;

    font-size: 0.45vw;

    color: #27b6ee;

    background-color: #0b0d1093;

    padding: 0.2vw;

    font-weight: 600;

}



.top-holder {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    top: 3vh;

    right: 0vw;

    width: 17vw;

    height: fit-content;

}



.basic-info {

    display: flex;

    align-items: center;

    justify-content: center;

    column-gap: 1vw;

    width: 20vw;

    background: linear-gradient(to left, #0b0d108c, #0b0d10ad, transparent);

    padding: 0.3vw;

    font-weight: 500;

    font-family: Gilroy;

}



.basic-info .player_id {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 20%;

}



.basic-info .clock {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 20%;

}



.basic-info .ping {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 20%;

}



.basic-info .logo {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 20%;

}



.basic-info .logo img {

    height: 3vh;

    width: auto;

}



.basic-info div span {

    margin-left: 0.5vw;

}



.money-info, .job-info, .zombie-hud {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20vw;

    background: linear-gradient(to left, #0b0d108c, #0b0d10ad, transparent);

    padding: 0.5vw;

    margin-top: 0.4vh;

    column-gap: 1vw;

    font-size: 0.85vw;

}



.money-info {

    width: 15vw;

    right: 0;

}



.money-info-cash, .money-info-bank {

    display: flex;

    align-items: center;

    justify-content: center;

    column-gap: 0.5vw;

    font-size: 0.65vw;

    width: 50%;

    max-width: 50%;

    font-weight: 600;

}



.money-info-amount {

    min-width: 70%;

}





.job-info-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-left: 0.8vw;

}



.job-info-name {

    width: 80%;

    max-width: 80%;

}



.job-info-label {

    font-size: 0.6vw;

    width: 20%;

    max-width: 20%;

    margin-right: auto;

}



.hp-bar-bar-inner::after, .segment::after, .bg::after, .one-info::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    background-image: url(data:image/png;base64,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);

}



.bg::after,.one-info::after {

    opacity: 0.8;

}



.veh-hud {

    position: absolute;

    bottom: 0.5vw;

    right: 1vw;

    height: auto;

    filter: drop-shadow(0px 0px 5px #0007);

}



.veh-hud svg path {

    will-change: auto;

    stroke-width: 0.5vw;

    stroke-miterlimit: round;

    color: #0b0d1079

}



#speedometer {

    stroke-dasharray: 100;

    stroke-dashoffset: 100;

}



.veh-hud svg .bg {

    stroke: #0068d67c

}



.veh-hud svg .meter {

    stroke:  #007bff

}



.speedometer-details {

    display: flex;

    justify-content: center;

    align-items: center;

    position: absolute;

    bottom: 5vh;

    width: 100%;

    color: #0b0d1079;

    text-shadow: rgb(101, 123, 154) 1px 0px 0px, rgb(101, 123, 154) 0.540302px 0.841471px 0px, rgb(101, 123, 154) -0.416147px 0.909297px 0px, rgb(101, 123, 154) -0.989992px 0.14112px 0px, rgb(101, 123, 154) -0.653644px -0.756802px 0px, rgb(101, 123, 154) 0.283662px -0.958924px 0px, rgb(101, 123, 154) 0.96017px -0.279415px 0px;

}



.speedometer-details .kmh .kmh-number {

    display: flex;

    justify-content: center;

    font-size: 1.5vw;

    font-weight: 800;

    color: #d1d1d1c5;

    font-family: Gilroy;

}



.speedometer-details .kmh .kmh-title {

    display: flex;

    justify-content: center;

    font-size: 0.5vw;

    color: #a1a1a1c5;

    font-family: Gilroy;

}



.speedometer-details .engine-hp {

    position: absolute;

    bottom: -2.5vh;

    display: flex;

    width: 40%;

    height: 0.45vh;

    background-color: rgba(3, 128, 3, 0.329);

}



.speedometer-details .engine-hp .engine-hp-inner {

    display: flex;

    width: 85%;

    height: 100%;

    background: linear-gradient(57deg, rgba(3, 128, 3, 0.9) 10%, rgba(4, 170, 4, 0.9) 85%);

    transition: all 0.5s;

}



.speedometer-details .engine-hp i {

    position: absolute;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 15%;

    height: 100%;

    color: #0b0d1086;

    left: 50%;

    text-shadow: none;

}



.kmh-number .leading-zero {

    color: #0b0d1079; /* Customize the color */

    opacity: 0.5; /* Optional: Make the zero semi-transparent */

}



.paycheck-stuff {

    width: 10vw;

}



.paycheck-section-1 {

    display: flex;

    width: 100%;

}



.paycheck-holder-timer {

    width: 60%;

    display: flex;

    justify-content: center;

    font-size: 0.95vw;

    margin-right: 0.5vw;

}



.paycheck-holder-rest {

    width: 40%;

    display: flex;

    flex-direction: column;

    /* padding-top: 0.4vh; */

    align-items: center;

    font-size: 0.95vw;

}



.paycheck-payment-bonus {

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 0.6vw;

    width: 100%;

    font-weight: 600;

}



.paycheck-payment-bonus span {

    padding-right: 0.25vw;

}



.kurcina {

    opacity: 0.5;

}



.tick_notif_2 {

    position: absolute;

    width: 15vw;

    min-height: 6vh;

    background: linear-gradient(to right, #0b0d10ad, #0b0d108c,  transparent);

    border-radius: 5%;

    left: 1.4vw;

    bottom: 6vh;

    padding: 1vh;



    display: flex;

    flex-direction: column;

    position: absolute;

    color: white;

    font-size: 0.65vw;

    animation: 2s ease 0s infinite beat;

    transition: all 1s;

}



.tick_notif_2_title {

    font-size: 0.9vw;

    font-weight: 600;

    color: #27b6ee;

    text-shadow: 0px 0px 8px #27b6ee;

    margin-bottom: 0.6vh;

}



@keyframes beat {

    0%, 50%, 100% { transform: scale(1, 1); }

    30%, 80% { transform: scale(0.99, 0.999); }

}

  

@keyframes pulse {

    0%, 50%, 100% {  background: #fee; }

    30%, 80% { background: #fff; }

}



.activity-reward {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 15vw;

    height: 3.5vh;

    background: linear-gradient(to left, #0b0d108c, #0b0d10ad, transparent);

    z-index: 99999999;

    padding: 0.1vw;

    font-family: Gilroy;

    margin-top: 0.5vh;

}



.activity-reward-img {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 10%;

    height: 100%;

}



.activity-reward-img img {

    height: 70%;

    width: auto;

}



.activity-reward-text {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 80%;

    text-align: center;

}



.activity-reward-amount {

    color: #27b6ee;

    margin-right: 0.3vw;

    font-weight: 600;

}

.activity-reward-amount1 {
    color: #27b6ee;
}




.activity-reward-time {

    color: #27b6ee;

    margin-left: 0.3vw;

    font-weight: 600;

}



.settings-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100vw;

    height: 100vh;

}



.settings-inner {

    width: 30vw;

    height: auto;

    border: 1px solid;

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

    padding: 1vw;

    transform: skew(-35deg);

}



.settings-title {

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.5vw;

    font-weight: 600;

    color: #27b6ee;

    margin-bottom: 4vh;

    font-family: Quantico;

    transform: skew(35deg);

}



.settings-option {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 1vw;

    color: white;

    margin-bottom: 1vh;

    font-weight: 600;

    transform: skew(35deg);

}



.settings-option-title {

    display: flex;

    justify-content: center;

    align-items: center;

}



.settings-option-toggle {

    display: flex;

    justify-content: center;

    align-items: center;

}



.announce{

    position: absolute;

    width: 40vw;

    min-height: 5vh;

    height: fit-content;

    margin: 2vh auto 0 auto;

    display: flex;

    border-radius: 0.4vw;

    top: -30vh;

    left: 50%;

    transform: translateX(-50%) skew(-35deg);

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border: 1px solid;

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

    overflow: hidden;

    font-family: Gilroy;

}

.announce-img{

    --mask: linear-gradient(45deg,#0000 0.75vw,#000 0);	

    -webkit-mask: var(--mask);

    mask: var(--mask);

    height: 4vw;

    position: relative;

    left:-3vw;

    transform: skew(35deg);

}



.glow{

    filter: drop-shadow(0px 0px 8px #27b6ee);

}

.announce-img img{

    position: relative;

    left: 0;

    height: 100%;

    transform: skew(35deg);

}



.announce-img2{

    height: 4vw;

    position: relative;

    right:-3vw;

}

.ann-img{

    -webkit-mask-image: linear-gradient(to left, transparent 10%, black 100%);

    min-height: 5vh;

    height: auto;

    max-height: 12vh;

    width: auto;

    transform: skew(35deg) translatex(-32%);

}



.glow2{

    filter: drop-shadow(0px 0px 8px white);

}

.announce-img2 img{

    height: 100%;

}

.announce-loading{

    position: absolute;

    background-color: #293df166;

    bottom: 0.3vh;

    height: 2px;

    width: 90%;

    margin-left:5% ;

}

.announce-loading-inner{

    position: absolute;

    height: 100%;

    width: 0%;

    background-color: #27b6ee;

    box-shadow:  0px 0px 8px #27b6ee;

    left: 0;

}

.announce-sadrzaj{

    width: 100%;

    text-align: center;

    position: absolute;

    color: white;

    height: 100%;

    text-overflow: ellipsis;

    top: 0;

    left: 0;

    padding: 0.3vh;

    box-sizing: border-box;

    display: flex;

    justify-content: flex-start;

    gap: 0.3vh;

    align-items: center;

    flex-direction: column;

    transform: skew(35deg);

}

.announce-naslov{

    color: #27b6ee;

    text-shadow:  0px 0px 8px #27b6ee;

    font-weight: 800;

    font-size: 1.3vh;

    font-family: Quantico;

}

.sender{

    text-align: center;

    color: rgba(255, 255, 255, 0.5);

    font-size: 1.2vh;

    text-shadow:  0px 0px 8px rgba(63, 50, 50, 0.5);

    font-weight: 400;

}

.tekst-announce{

    font-weight: 600;

    font-size: 1.7vh;

    text-shadow:  0px 0px 4px white;

}

.notif-holder{

    display: flex;

    flex-direction: column-reverse;

    position: absolute;

    left: 10px;

    top: 3vh;

    font-family: Gilroy;

}

.notifikacija{

    display: flex;

    position: relative;

    color: white;

    margin-bottom: 10px;

    left: 0px;

    border: 1px solid;

    background: linear-gradient(196deg, #0b0d108c, #52617748);

    border-image: linear-gradient(181deg,#ffffff66,#ffffff03) 1;

    padding: 0.3vw;

    box-sizing: border-box;

    border-radius: 0.2vw;

    flex-direction: row;

    gap: 0.4vw;

    align-items: center;

    justify-content: flex-start;

    width: fit-content;

    transform: skew(-35deg);

}

.notifikacija::before{

    content: '';

    background: linear-gradient(196deg, #0b0d1069, #52617763);

    height: 100%;

    width: 100%;

    border-radius: 0.2vw;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -99;

}

.notif-logo{

    height: 75%;

    width: auto;

}

.sadrzaj-notif{

    height: auto;

    width: fit-content;

    color: white;

    transform: skew(35deg);

}

.header-notif{

    padding: 0.4rem 0 0 0.4rem;

    font-weight: 800;

    font-size: 1rem;

    color:rgb(255, 255, 255);

}

.tekst-notif{

    line-height: 1rem;

    padding: 0rem 1rem 1rem 0.4rem;

    font-size: 0.9rem;

    align-self: center;

    vertical-align: middle;

    justify-items: center;

    display: flex;

    text-align: left;

    max-width: 400px;

    min-width: 200px;

    float: left;

}

.loading{

    height: 2vw;

    aspect-ratio: 1;

    width: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    transform: skew(35deg);

    margin-left: 0.5vw;

}

.circle-loader{

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    box-sizing: border-box;

}





  .checkbox-wrapper-8 .tgl {

    display: none;

  }

  .checkbox-wrapper-8 .tgl,

  .checkbox-wrapper-8 .tgl:after,

  .checkbox-wrapper-8 .tgl:before,

  .checkbox-wrapper-8 .tgl *,

  .checkbox-wrapper-8 .tgl *:after,

  .checkbox-wrapper-8 .tgl *:before,

  .checkbox-wrapper-8 .tgl + .tgl-btn {

    box-sizing: border-box;

  }

  .checkbox-wrapper-8 .tgl::-moz-selection,

  .checkbox-wrapper-8 .tgl:after::-moz-selection,

  .checkbox-wrapper-8 .tgl:before::-moz-selection,

  .checkbox-wrapper-8 .tgl *::-moz-selection,

  .checkbox-wrapper-8 .tgl *:after::-moz-selection,

  .checkbox-wrapper-8 .tgl *:before::-moz-selection,

  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,

  .checkbox-wrapper-8 .tgl::selection,

  .checkbox-wrapper-8 .tgl:after::selection,

  .checkbox-wrapper-8 .tgl:before::selection,

  .checkbox-wrapper-8 .tgl *::selection,

  .checkbox-wrapper-8 .tgl *:after::selection,

  .checkbox-wrapper-8 .tgl *:before::selection,

  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {

    background: none;

  }

  .checkbox-wrapper-8 .tgl + .tgl-btn {

    outline: 0;

    display: block;

    width: 4em;

    height: 2em;

    position: relative;

    cursor: pointer;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

  }

  .checkbox-wrapper-8 .tgl + .tgl-btn:after,

  .checkbox-wrapper-8 .tgl + .tgl-btn:before {

    position: relative;

    display: block;

    content: "";

    width: 50%;

    height: 100%;

  }

  .checkbox-wrapper-8 .tgl + .tgl-btn:after {

    left: 0;

  }

  .checkbox-wrapper-8 .tgl + .tgl-btn:before {

    display: none;

  }

  .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {

    left: 50%;

  }



  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn {

    overflow: hidden;

    transform: skew(-35deg);

    -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

    transition: all 0.2s ease;

    font-family: sans-serif;

    background: #0b0d108c;

  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {

    transform: skew(35deg);

    display: inline-block;

    transition: all 0.2s ease;

    width: 100%;

    text-align: center;

    position: absolute;

    line-height: 2em;

    font-weight: bold;

    color: #27b6ee;

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {

    left: 100%;

    content: attr(data-tg-on);

  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {

    left: 0;

    content: attr(data-tg-off);

  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {

    background: #0b0d104d;

  }

  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {

    left: -10%;

  }

  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {

    background: #27b6ee;

  }

  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {

    left: -100%;

    color: #fff;

  }

  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {

    left: 0;

    color: #fff;

  }

  .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {

    left: 10%;

  }



.wpn-info-quality {

    position: absolute;

    top: 1.2vh;

    left: 0vw;

    font-size: 0.5vw;

    color: #ffffffcb;

    font-weight: 600;

    font-family: Gilroy;

    z-index: -99;

    width: 4.5vw;

    height: 0.25vh;

    background-color: #00000073;

}



.wpn-info-quality-inner {

    width: 80%;

    height: 100%;

    background-color: green;

}


.killfeed-container {
    position: absolute;
    top: 105%;
    right: -10px;
    width: 470px;
    display: flex;
    text-align: left;
    flex-direction: column;
    font-family: Gilroy;
    font-weight: bold;
}

.kill-item {
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #27b6ee; 
}

.kill-item .name {
    font-size: 16px;
    color: #27b6ee;
    white-space: nowrap;
}

.name1, .name2 {
    padding: 6px 17px;
    display: flex;
    justify-content: flex-start;   
    align-items: flex-start;      
    text-align: left;              
    background: linear-gradient(to right, #0b0d108c, #0b0d10ad, transparent);
    width: 190px;
}

.weapon-icon {
    width: 60px;
    height: auto;
    margin: 0 10px;
    filter: brightness(1.2);
}