MTZ Client CSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Sharp');

:root {
    --main: #ff4900;
    --box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);
    --grey1: rgb(48,48,48);
    --grey2: rgb(101,101,101)

}

/* font */

@font-face {
    font-family: 'Aldrich';
    src: url('https://fonts.cdnfonts.com/s/15646/Aldrich-Regular.woff') format('woff');
}

* {font-family: 'Aldrich', 'GameFont';
  font-weight: 600 }

.material-icons-outlined {
    font-family: 'Material Icons' !important;
}


/* ad hider  */
#aHider, #topRightAdHolder, #homeStoreAd, #streamContainer
{ display: none!important }


/*  */

#timerInner.topLeftOld, #leaderContainer, .greyInner,  #bottomLeftHealthBar,
.greyInlineInner, .greyInlineInnerMid, .weapItem, .weapItemInner,
.weapStreakInner, .centerLeaderContainerInner
{ background-color: transparent }

.centerLeaderContainer, #ammoHolder, #timerHolder.topLeftOld,
.statIcon, #leaderboardHolder, #chatInputHolder, #bottomLeftTeamName,#bottomLeftPlayerLeft, #bottomLeftPlayerRight
{ background-color: rgba(0,0,0,.4) }

#mainLogo {
    display: none
}

#uiBase:not(.onCompMenu) #instructions {
    top: 100px;
    transform: translate(-50%, 0)
}

#mapInfoHolder {
    bottom: 120px;
}

.verticalSeparatorInline {
    height: 30px;
    transform: unset;
}

#termsInfo {
    background-color: transparent;
}

#menuItemContainer {
    flex-direction: row;
    width: 100%;
    height: 130px;
    top: unset;
}

.menuItem .menuItemTitle {
    margin-top: -15%;
}

#uiBase.onMenu #chatHolder {
    left: 10px;
    bottom: 150px;
}

#tlInfHold {
    left: 15px
}

/* menuclass */

.button, #policeButton {
    border: unset!important;
    border-radius: 0;
    box-shadow: inset 0px -7.5px 0px 0px rgba(0,0,0,0.25);
}

.buttonB, #policeButton {background-color:#414A6D}
.buttonPI {background-color:#fa50ae}
.buttonR {background-color:#ff4747}
.buttonP {background-color:#b447ff}
.buttonO {background-color:#FF6A0B}
.buttonG {background-color:#31caec}

.button:hover, .button:active {border: unset!important}

#uiBase.onMenu #spectButton {
    top: unset;
    bottom: 245px;
    left: unset;
    right: 175px;
    transform: unset;
    align-items: unset
}

#classPreviewCanvas {
    width: 500px !important;
    height: 400px !important;
    margin-right: -125px
}

#customizeButton {
    width: 350px;
    text-shadow: unset !important;
    font-weight: bold
}

.button span {display: none}

#menuClassContainer {
    bottom: 275px;
    right: 50px
}

/* healthbar */

#bottomLeftHealthBar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    column-gap: unset;
    padding: unset;
    grid-area: healthbar;
    height: 30px;
    width: 325px
}

.nHealthBarSeg {
    width: -webkit-fill-available;
    margin-right: -1px;
    border-radius: 0;
    background-color: transparent;
    height: 100%
}

.nHpBSeg {
    border-radius: 0;
    box-shadow: inset 0px -7.5px 0px 0px rgba(0,0,0,0.25);
}

/* bottom left */

#bottomLeftPlayer {
    grid-template-areas:
        "profile healthval . "
        "profile healthbar healthbar" ;
    background-color: transparent;
    grid-template-rows: 52.5px auto;
    gap: 10px
}

#bottomLeftTeamType, #bottomLeftTeamName {
    display: none
}

#bottomLeftPlayerLeft {
    grid-area: profile;
    border-radius: 6px
}

#bottomLeftTeamHolder { display: contents }

#bottomLeftPlayerMid {
    display: contents;
    grid-area: healthbar;
}

#bottomLeftPlayerRight {
    grid-area: healthval;
    grid-template-columns: 20px auto;
    justify-content: flex-end;
    column-gap: 15px;
    direction: rtl;
    max-width: 100px;
    border-radius: 6px
}

#bottomLeftHealth {
    font-size: 30px
}

#bottomLeftChallIcon { width: 28px;height: 28px; }


/*  weap icon */

.weapItem[style*="opacity: 0.5;"] {
    opacity: 1 !important
}

.weapItem[style*="opacity: 0.5;"] *:not(.weapItemInner, .weapItemInner .weapKey) {
    opacity: .5 !important
}

.weapSkin {
    background-color: transparent;
    color: #ffffff;
    left: unset;
    right: 2px;
    font-size: 15px;
    text-align: right;
}

.weapKey {
    font-size: 15px;
    opacity: 1!important;
    left: unset;
    right: -5px;
    background-color: transparent;
    z-index: 100
}

.weapKey::before, .weapKey::after {
    color: white;
    font-size: 15px;
}

.weapKey::before { content:"[" }
.weapKey::after { content:"]" }


.weapStreakHolder { display: none }

.weapIcon {
    width: 140px;
    height: 70px;
}

#ammoHolder {
    font-size: 40px;
}

/* big stats icons */

.topRightCounters {
    display: inline-block;
    max-width: 700px
}

.topRightCounters .greyInner {
    padding: unset;
    margin: unset;
}

.statIcon {
    padding: 7px 14px;
    font-size: 32px;
    vertical-align: bottom !important;
}

.statIcon span {
    font-weight: normal
}

#killsIcon, #deathsIcon, #streakIcon, #kdIcon {
    width: 32.5px;
    height: 32.5px;
    vertical-align: top
}

.statIcon .material-icons {
    font-size: 32.5px !important;
    vertical-align: top
}

/* misc */
#pingText, #ingameFPS, #pingDisplay, #fpsDisplay {
    font-size: 18px
}

#timerIcon, #timerVal.topLeftOld {
    vertical-align: middle
}

/* chat */

#chatInput {
    transition: all .08s;
    box-shadow: var(--box-shadow)
}

#uiBase.onGame #chatInput {
    opacity: 0;
}

#uiBase.onGame #chatInput:focus {
    opacity: 1
}

#chatInputHolder {
    grid-template-columns: 60px auto;
}

#chatHolder .greyInlineInnerMid {
    padding: unset;
    margin: unset;
}

#chatHolder .greyInlineInner:last-child {
    display: none
}

#chatHolder .greyInlineInner:first-child {
    background-color: var(--main);
    box-shadow: var(--box-shadow);
    border-radius: 6px;
    margin: unset
}

#chatInput {
    width: 100%;
    height: 100%;
    background-color: var(--grey1);
    font-size: 20px;
    border: unset
}

#chatInputHolder {
    background-color: transparent
}

#uiBase.onGame #chatInputHolder {
    grid-template-columns: auto;
    height: 55px;
}

#uiBase.onGame .greyInlineInner {
    display: none
}

#chatList::-webkit-scrollbar-thumb,
#chatList::-webkit-scrollbar-track {
    border-radius: 0
}

#chatList::-webkit-scrollbar-thumb {
    background-color: var(--main);
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5);

}

#uiBase.onGame #chatList::-webkit-scrollbar {
    display: none
}

#chatList {
    background-color: transparent;
    direction: ltr;
}

.chatItem {
    font-size: 20px;
    text-shadow: 0px 0px 4px #202020;
    margin: 5px;
}

#uiBase.onMenu .chatItem {
    margin: unset;
    width: 390px;
    padding: 10px
}


/* Menu windows: INPUT */

.switch {
    width: 60px
}

.slider::before {
    width: 22px;
    border-radius: 20px
}

.slider, .sliderM, .sliderSml {
    border-radius: 20px;
    box-shadow: var(--box-shadow);
    background-color: var(--grey2)
}

.sliderM {
    background-color: var(--grey2);
    box-shadow: var(--box-shadow)
}

.sliderM::-webkit-slider-thumb {
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background-color: var(--main)
}

.settingsBtn,
input:checked + .slider,
input:checked + .advancedSlider,
input:checked + .sliderSml, input[type=number],
.openCollection {
    background-color: var(--main) !important;
}

input[type=color] {
    border: unset;
    box-shadow: var(--box-shadow);
}

input[type=number] {
    background-color: var(--main);
    border: unset !important;
}

input[type=number] {
    box-shadow: var(--box-shadow)
}

.inputGrey2, option, .inputGrey2::placeholder {
    background-color: var(--grey2);
    color: white
}


/* debugigng */

/* #instructionHolder,
#fullMenHider > *:not(#spectateUI){
    display: none!important
}

#spectateUI, #inGameUI {
    display: block!important
} */