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

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,0.1);
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(125,125,125,0.3);
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #323232;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-bottom: 10px;
}
  
.slider:hover {
    opacity: 1;
}
  
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background-color: #ffc107;
    cursor: pointer;
}
  
.slider::-moz-range-thumb {
    width: 23px;
    height: 24px;
    border: 0;
      border-radius: 50%;
    background-image: url('https://img.icons8.com/material-outlined/344/average-2.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.form-control {
    background-color: #0e0e0e !important;
}

.bg-color {
    background-color: #0e0e0e;
}

.bg-nav {
    background-color: #161616 !important;
}

.btn-primary {
    background-color: #242424 !important;
    border: 1px solid #363636 !important;
}

.btn-primary:hover {
    background-color: #292929 !important;
}

.btn-primary:active {
    background-color: #323232 !important;
}

.active-side {
    background-color: #323232 !important;
    border: 1px solid #484848 !important;
}

.weapon-img {
    position: relative;
    width: 70%;
}

.weapon_card {
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
}

.weapon-skin-title {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sideBtnImg {
    filter: invert();
}

.sideBtnI {

}

.card-common {
    border-color: rgb(129,140,154) !important;
    color: rgb(129,140,154);
    background: linear-gradient(135deg, rgba(129,140,154,0.03), rgba(22,22,22,0.6), rgba(129,140,154, 0.15));
}


.card-uncommon {
    border-color: rgb(94,152,217) !important;
    color: rgb(94,152,217);
    background: linear-gradient(135deg, rgba(94,152,217,0.03), rgba(22,22,22,0.6), rgba(94,152,217, 0.15));
}

.card-rare {
    border-color: rgb(75,105,205) !important;
    color: rgb(75,105,205);
    background: linear-gradient(135deg, rgba(75,105,205,0.05), rgba(22,22,22,0.6), rgba(75,105,205, 0.23));
}

.card-mythical {
    border-color: rgb(136,71,255)!important;
    color: rgb(136,71,255);
    background: linear-gradient(135deg, rgba(136,71,255,0.05), rgba(22,22,22,0.6), rgba(136,71,255, 0.2));
}

.card-legendary {
    border-color: rgb(211,44,230) !important;
    color: rgb(211,44,230);
    background: linear-gradient(135deg, rgba(211,44,230,0.05), rgba(22,22,22,0.6), rgba(211,44,230, 0.3));
}

.card-ancient {
    border-color: rgb(235,75,75) !important;
    color: rgb(235,75,75);
    background: linear-gradient(135deg, rgba(235,75,75,0.02), rgba(22,22,22,0.6), rgba(235,75,75, 0.15));
}

.card-gold {
    border-color: rgb(202, 171, 5) !important;
    color: rgb(202,171,5);
    background: linear-gradient(135deg, rgba(202,171,5,0.02), rgba(22,22,22,0.6), rgba(202,171,5, 0.15));
}

.card-contraband {
    border-color: rgb(228,174,57) !important;
    color: rgb(228,174,57);
    background: linear-gradient(135deg, rgba(228,174,57,0.02), rgba(22,22,22,0.6), rgba(228,174,57, 0.15));
}

.weapon-card {
    position: relative;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1), .3s;
}

.weapon-card:hover {
    backdrop-filter: contrast(120%);
}

.active-card {
    margin: -2px;
    border: 2px solid rgba(228,174,57);
}

.active-card > .settings {
    visibility: visible;
    opacity: 1;
}

.profile-bg {
    color: #fff;
    background: #242424;
    border: 1px solid #363636;
}

li {
    list-style-type: none;
}

.parent-weapon-card {
    position: relative;
}

.settings {
    height: 48px;
    width: 48px;
    position: absolute;
    right: 0;
    margin: 8px;
    visibility: hidden;
    opacity: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    border: none;
}

.revert {
    height: 48px;
    width: 48px;
    position: absolute;
    right: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    border: none;
    background-color: transparent;
}

.loading-card {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    backdrop-filter: blur(15px);
}

.settings:hover {
    background-color: rgb(179, 179, 179) !important;
}

.bg-opacity {
    background-color: rgba(0,0,0,0.3);
}

.text-roboto {
    font-family: 'Roboto Condensed', sans-serif;
}