@font-face {
  font-family: Sentic;
  src: url("../fonts/Sentic-Text.otf") format("truetype");
}

@font-face {
  font-family: Sentic-Bold;
  src: url("../fonts/Sentic-Text-Bold.otf") format("truetype");
}

* {
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  font-family: Sentic;
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  overflow: hidden;
  display: none;
  /* justify-content: center; */
  /* align-items: center; */
}

.all-page{
  display: block;
}

.buy-jerry{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-22%, -25%);
  width: 100%;
  height: 100%;
  color: #333333;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.buy-jerry img{
  width: 45%;
  height: 45%;
  position: absolute;
  z-index: 0;
}

.buy-jerry .jerry-item{
  position: absolute;
  top: 45%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 65%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: 0.3s;
}

.buy-jerry .jerry-item .item:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.buy-jerry .jerry-item .item{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 30%;
  height: 30%;
  border-radius: 1vw;
  flex-shrink: 0;
  padding: 0.5vw;
  transition: 0.3s;
}

.buy-jerry .jerry-item .icon{
  position: absolute;
  width: 2%;
  height: 3%;
  left:5%;
  top: 10%;
  z-index: 5;
  border-radius: 1vw;
}

.buy-jerry .jerry-item .type-svg{
  position: absolute;
  width: 2%;
  height: 3%;
  left: 10%;
  top: 10%;
  z-index: 5;
}

.buy-jerry .jerry-item .f-text{
  position: absolute;
  top: 10%;
  left: 14%;
  width: 5%;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  background: linear-gradient(266deg, #b8b6b6 90.11%, rgba(202, 202, 202, 0) 100.68%);
  -webkit-background-clip: text;
  color: transparent;
  text-transform: uppercase;
  z-index: 5;
}

.buy-jerry .jerry-item .f-desc{
  position: absolute;
  top: 19.5%;
  left: 8%;
  width: 15%;
  font-family: Sentic-Bold;
  font-size: 1vh;
  color: rgba(255, 255, 255, 0.18);
  z-index: 5;
  text-align: center;
}

.buy-jerry .jerry-item .f-price{
  position: absolute;
  top: 24%;
  left: 8%;
  width: 15%;
  font-family: Sentic-Bold;
  font-weight: bold;
  font-size: 0.6vw;
  color: #717172;
  z-index: 5;
  text-align: center;
}

.props-img img{
  display: none;
}

.props-img .mylogo{
  display: none;
  width: 23%;
  height: 3.2%;
  position: absolute;
  top: 94%;
  left: 75%;
  z-index: 0;
}

.buy-box{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 65%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.boss-box{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 74.75%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gas-box{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(180deg, rgba(16, 18, 19, 0.90) 0%, rgba(16, 18, 19, 0.90) 100%); */
}

.bg-black{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}

.gas-box .user-img{
  position: absolute;
  top: 3%;
  left: 21%;
  width: 3vw;
  height: 3vw;
  z-index: 5;
}

.gas-box .line-pink{
  position: absolute;
  top: 5%;
  left: 26.5%;
  width: 0.2vw;
  height: 2vw;
  background: #EE5B5B;
  z-index: 5;
  border-radius: 0.5vw;
}

.gas-box .user-name{
  position: absolute;
  top: 4.5%;
  left: 28%;
  font-family: Sentic-Bold;
  font-size: 1vw;
  color: #E0FFFF;
  z-index: 5;
}

.gas-box .veh-name{
  position: absolute;
  top: 9.5%;
  left: 28%;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  color: #6D7276;
  z-index: 5;
}

.gas-box .left-img{
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  position: absolute;
  width: 18.1%;
  height: 100%;
}

.buy-box .left-img{
  display: flex;
  justify-content: start;
  align-items: start;
  position: absolute;
  width: 24.5%;
  height: 100%;
}

.buy-box .item-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
}

.buy-box .hidden{
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  position: absolute;
  width:74%;
  height: 100%;
  left: 25%;
}

.buy-box .item-container .item{
  position: relative;
  margin-left: 1%;
  width: 29%;
  height: 96%;
  border-radius: 1vw;
  border: 0.234vw solid #232627;
  background: linear-gradient(180deg, rgba(16, 18, 19, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%);
  flex-shrink: 0;
  padding: 0.5vw;  
}

.tanker-list-box .map-icon{
  position: absolute;
  top: 78.5%;
  left: 85%;
  border-radius: 0.2vw;
  padding: 0.15vw 0.4vw;
  background: #5a5a5a;
  z-index: 5;
  cursor: pointer;
  transition: 0.3s;
}

.tanker-list-box .map-icon:hover{
  background: #929292;
}

.buy-box .item-container .item .item-bg{
  border-radius: 14.137px 14.137px 0px 0px;
  /* background-color: red; */
  background: linear-gradient(180deg, #232627 0%, rgba(35, 38, 39, 0.00) 100%);
  width: 97%;
  top: 1%;
  left: 1.5%;
  height: 99%;
  position: absolute;
}

.buy-box .item-container .item .stationimg{
  width: 100%;
  height: 70%;
  border-radius: 0.5vw;
  border-radius: 0.5vw ;
  display: flex;
  justify-content:start;
  align-items: start;
  position: relative;
}

.buy-box .item-container .item .station-desc{
  border-radius: 0.5vw;
  display: flex;
  justify-content:start;
  align-items: start;
  position: relative;
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  font-style: normal;
  font-weight: 900;
  line-height: 110%;
}

.buy-box .item-container .item .hr{
  position: relative;
  top: 0.5vw;
  width: 100%;
  height: 0.1vw;
  background-color: rgba(255, 255, 255, 0.03);
}

.buy-box .item-container .item svg{
  position: absolute;
  top: 84%;
  left: 4%;
  width: 1.5vw;
  height: 1.5vw;
}

.buy-box .item-container .item .price-box{
  width: 95%;
  height: 10%;
  border-radius: 0px 0px 0.5vw 0.5vw;
  background: rgba(15, 15, 15, 0.46);
  /* background-color: red; */
  flex-shrink: 0;
  position: absolute;
  top: 89%;
  left: 2.5%;
}

.buy-box .item-container .item .price-box .price-header{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.55vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  left: 2.5%;
  top: 17.5%;
}

.buy-box .item-container .item .price-box .price-text{
  color: white;
  font-family: Sentic-Bold;
  font-size: 1vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.05vw;
  position: absolute;
  left: 2.5%;
  top: 40%;
}

.buy-box .item-container .item .price-box .buy-button{
  position: absolute;
  top: 25%;
  left: 65%;
  padding: 0.4vw 1.7vw;
  border-radius: 0.3vw;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  background: #E0FFFF;
  transition: 0.3s;
  cursor: pointer;
}

.buy-box .item-container .item .price-box .map-button{
  position: absolute;
  top: 25%;
  left: 30%;
  padding: 0.4vw 1.7vw;
  border-radius: 0.3vw;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  background: #E0FFFF;
  transition: 0.3s;
  cursor: pointer;
}

.buy-box .item-container .item .price-box .map-button:hover{
  background: #626464;
  transition: 0.3s;
  color: white;
}


.buy-box .item-container .item .price-box .buy-button:hover{
  background: #626464;
  transition: 0.3s;
  color: white;
}

.buy-box .right-icon{
  position: absolute;
  left: 100.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
  cursor: pointer;
  width: 1vw;
  z-index: 5;
  height: 1vw;
}
.buy-box .right-icon:hover{
  transform: translate(-50%, -50%) scale(1.1);
  transition: 0.3s;
}

.buy-box .left-icon{
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-120%, -50%);
  transition: 0.3s;
  cursor: pointer;
  z-index: 5  ;
  width: 1vw;
  height: 1vw;
}

.buy-box .left-icon:hover{
  transform: scale(1.1) translate(-120%, -50%);
}

.gas-box .gas-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 80%;
  height: 100%;
  left: 19%;
  border-radius: 1vw;
}

.gas-box .gas-container .gas-bg-img{
  position: absolute;
  width: 89%;
  height: 100%;
  border-radius: 1vw;
}

.gas-box .gas-container .item-box{
  display: flex;
  justify-content: center;
  align-items: center;
  top: -5%;
  left: -6%;
  margin-left: 0%;
  position: relative;
  width: 28%;
  height: 40%;
  border-radius: 1vw;
}

.gas-box .gas-container .item-box .type-svg{
  position: absolute;
  width: 10%;
  height: 10%;
  left:35%;
  top: 30%;
  z-index: 5;
  border-radius: 1vw;
  fill: linear-gradient(253deg, #454545 9.22%, rgba(69, 69, 69, 0.00) 93.36%);
  flex-shrink: 0;  
}

.gas-box .gas-container .item-box .type-text{
  font-family: Sentic-Bold;
  font-size: 0.55vw;
  width: 30%;
  letter-spacing: 0.03vw;
  z-index: 5;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 29%;
  left: 45%;
  text-transform: uppercase;
  background: linear-gradient(266deg, #454545 47.11%, rgba(50, 50, 50, 0.00) 100.68%);
  -webkit-background-clip: text;
  color: transparent;
}

/* .gas-box .gas-container .item-box .type-text:hover {
  background: linear-gradient(266deg, #454545 47.11%, #ffffff 100.68%);
  -webkit-background-clip: text;
  color: transparent;
} */

.gas-box .gas-container .item-box .item-desc{
  color: rgba(255, 255, 255, 0.18);
  font-family: Sentic;
  font-size: 0.43vw;
  width: 85%;
  letter-spacing: 0.03vw;
  z-index: 5;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 57%;
  left: 9%;
}

.gas-box .gas-container .item-box .electric-item-bg{
  position: absolute;
  width: 82%;
  height: 39%;
  border-radius: 0.5vw;
  top: 15%;
  left: 9%;
}

.gas-box .gas-container .item-box .item-price{
  color: #323232;
  font-family: Sentic-Bold;
  font-size: 1.2vw;
  width: 85%;
  letter-spacing: -0.1vw;
  z-index: 5;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 68%;
  left: 45%;
}

.gas-box .gas-container .item{
  position: relative;
  border-radius: 1vw;
  flex-shrink: 0; 
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.gas-box .gas-container .item:hover{
  /* transform: scale(1.1);
  transition: 0.3s;
  flex-shrink: 0; */
  /* fill: linear-gradient(180deg, rgba(29, 31, 32, 0.00) 0%, rgba(238, 91, 91, 0.46) 100%); 
  filter: drop-shadow(0px 0px 0.5vw rgba(255, 255, 255, 0.5)); 
  stroke: #E0FFFF;  */
}

.gas-box .select-svg{
  position: absolute;
  width: 1.5vw;
  height: 1.5vw;
  left: 22%;
  top: 93%;
  transform: translate(-50%, -50%);
  z-index: 5;
  fill: linear-gradient(180deg, rgba(29, 31, 32, 0.00) 0%, rgba(238, 91, 91, 0.46) 100%);
  transition: 0.3s;
  cursor: pointer;
}

.gas-box .select-text{
  position: absolute;
  width: 5vw;
  height: 1.5vw;
  left: 27%;
  top: 93%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  color: #E0FFFF;
  transition: 0.3s;
  cursor: pointer;
  text-transform: uppercase;
}

.gas-box .liter-box{
  width: 67%;
  height: 2%;
  border-radius: 20.076px;
  background: #101213;
  flex-shrink: 0;
  position: absolute;
  top: 75%;
  left: 21%;
  z-index: 5;
}

.gas-box .liter-color{
  width: 50%;
  height: 100%;
  border-radius: 20.076px;
  background: #EE5B5B;
  flex-shrink: 0;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 5;
  transition: 0.3s;
}

.gas-box .liter-text{
  flex-shrink: 0;
  color: #e9e6e6;
  font-family: Sentic;
  font-size: 0.6vw;
  z-index: 4;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 79%;
  left: 85%;
}

.gas-box .liter-zero{
  flex-shrink: 0;
  color: #e9e6e6;
  font-family: Sentic;
  font-size: 0.6vw;
  z-index: 4;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 79%;
  left: 21%;
}

.gas-box .total-price{
  color: #FFF;
  z-index: 5;
  font-family: Sentic;
  font-size: 1vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  left: 73%;
  top: 91%;
}

.gas-box .total-text{
  color: rgba(109, 114, 118, 0.18);
  z-index: 5;
  font-family: Sentic;
  font-size: 0.4vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  left: 74.2%;
  top: 95.5%;
}

.gas-box .buy-button{
  position: absolute;
  top: 90.5%;
  left: 78.5%;
  padding: 0.4vw 2.7vw;
  border-radius: 0.3vw;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  color: #727272;
  background: rgba(109, 114, 118, 0.18);
  transition: 0.3s;
  z-index: 5;
  cursor: pointer;
}

.gas-box .buy-button:hover{
  background: #626464;
  transition: 0.3s;
  color: white;
}







.firstRange[type="range"] {
  -webkit-appearance: none;
  /* margin-right: 15px; */
  width: 100%;
  height: 9%;
  background:  #1E1E1E  ;
  border-radius: 0.2vw;
  background-image: linear-gradient(#EE5B5B, #EE5B5B);
  background-size: 70% 100%;
  background-repeat: no-repeat;
}

.firstRange[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 0.7vw;
  width: 0.7vw;
  left: 5%;
  border-radius: 100%;
  background: #353535;
  cursor: ew-resize;
  transition: background .3s ease-in-out;
}

.firstRange[type="range"]::-webkit-slider-thumb:hover {
  background: #6e6e6e;
}

.firstRange[type="range"]::-moz-range-thumb:hover {
  background: #6e6e6e;
}

.firstRange[type="range"]::-ms-thumb:hover {
  background: #6e6e6e;
}

.firstRange[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.firstRange[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.firstRange[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.gas-box .rangebox{
  position: absolute;
  left: 21%;
  top: 75%;
  width: 66.5%;
  height: 20%;
  z-index: 2;
}








:root {
  --managvalue:10;
}

@keyframes growProgressBar {

  0%,
  33% {
    --pgPercentage: 0;
  }

  100% {
    --pgPercentage: var(--managvalue);
  }
}

@property --pgPercentage {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.progressmanagementbar {
  --size: 2.5vw;
  --fg: #616161;
  --bg: #333232;
  --ag: #616161;
  --pgPercentage: var(--managvalue);
  animation: 1s ease 0s 1 normal forwards running growProgressBar;
  width: var(--size);
  left: 84%;
  top: 3%;
  z-index: 1;
  position: absolute;
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 4);
  color: var(--ag);
}

div[role="progressmanagementbar"]::before {
  counter-reset: percentage var(--managvalue);
  content: counter(percentage) ;
}


.boss-box .left-box{
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translate(-150%, -50%);
  width: 27.46%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.5vw;
  border: 0.2vw solid #232627;
  /* background: rgba(0, 0, 0); */
  background: linear-gradient(180deg, #101213 0%, #000 100%);
  /* background: linear-gradient(180deg, rgba(16, 18, 19, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%); */
  flex-shrink: 0;
}


.boss-box .right-box{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(24%, -50%);
  width: 88.35%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.5vw;
  border: 0.2vw solid #232627;
  background: linear-gradient(180deg, #101213 0%, #000 100%);
  /* background: rgba(0, 0, 0); */
  /* background: linear-gradient(180deg, rgba(16, 18, 19, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%); */
  flex-shrink: 0;
}

.boss-main-page{
  display: block;
}

.members-page{
  display: none;
}

.tanker-page{
  display: none;
}

.boss-box .left-box .alt-line{
  position: absolute;
  display: flex;  
  top: 82%;
  left: 48%;
  width: 3%;
  height: 35%;
  border-radius: 1vw 0vw 0vw 1vw;
  background: #232627;
  transform: rotate(90deg);
}

.boss-box .left-box .head-icon{
  position: absolute;
  top: 3%;
  left: 6%;
  width: 2vw;
  height: 2vw;
}

.boss-box .left-box .empty-icon{
  position: absolute;
  top: 4%;
  left:70%;
  width: 1vw;
  height: 1vw;
}

.boss-box .left-box .boss-img{
  position: absolute;
  left: 5%;
  top: 10%;
  width: 90%;
  height: 23%;
}

.boss-box .left-box .alt-box{
  position: absolute;
  top: 36%;
  left: 5%;
  width: 89%;
  height: 29.5%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  background: rgba(29, 31, 32, 0.46);
}
.boss-box .left-box .alt-alt-box{
  position: absolute;
  top: 67%;
  left: 5%;
  width: 89%;
  height: 18%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw 0.5vw 0vw 0vw;
  background: rgba(29, 31, 32, 0.46);
}

.boss-box .left-box .alt-level-box{
  position: absolute;
  top: 85.5%;
  left: 5%;
  width: 89%;
  height: 10%;
  display: flex;
  flex-direction: row;  
  flex-wrap: nowrap;
  justify-content: center;
  border-radius: 0vw 0vw 0.5vw 0.5vw;
  background: rgba(29, 31, 32, 0.46);
  overflow: scroll; 
}


.boss-box .left-box .locked-border{
  background-color: rgba(255, 255, 255, 0.04);
  width: 15%;
  height: 59%;
  border-radius: 50vw;
  position: relative;
  top: 20%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  /* left: 24%; */
  float: left;
  margin-right: 3%;
}

.boss-box .left-box .locked-border img{
  width: 1vw;
  height: 1vw;
}


.boss-box .left-box .money-button{
  position: absolute;
  top: 5%;
  left: 5%;
  border-radius: 0.2vw;
  background: #444;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.2vw 1vw;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  color: #565656;
}

.boss-box .left-box .fuel-icon{
  position: absolute;
  top: 5%;
  left: 87%;
  width: 1.5vw;
  height: 1.5vw;
}

.boss-box .left-box .station-name{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size:1.2vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 17%;
  left: 5%;
}

.boss-box .left-box .station-desc-text{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size:0.6vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  position: absolute;
  top: 30%;
  left: 5%;
  width: 90%; 
}

.boss-box .left-box .station-progress{
  position: absolute;
  top: 54%;
  left: 5%;
  width: 90%;
  height: 4.5%;
  border-radius: 1vw;
  background: #6D7276;
  flex-shrink: 0;
}

.boss-box .left-box .station-progress-color{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 10%;
  height: 100%;
  border-radius: 1vw;
  background: #72C0FF;
  flex-shrink: 0;
}

.boss-box .left-box .withdraw-button{
  position: absolute;
  top: 70%;
  left: 5%;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  padding: 0.6vw 1vw;
  border-radius: 0.4vw;
  background: #fff;
  flex-shrink: 0;
  display: block;
  transition: 0.3s;
  cursor: pointer;
}

.boss-box .left-box .withdraw-button:hover{
  background: #626464;
  transition: 0.3s;
  color: white;
}

.boss-box .left-box .withdraw-input{
  position: absolute;
  top: 70%;
  left: 5%;
  width: 32.3%;
  height: 15%;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  border-radius: 0.4vw;
  background: #FFF;
  flex-shrink: 0;
  outline: none;
  border: none;
  text-align: center;
  display: none;
}

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

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.boss-box .left-box .my-money{
  color: #FFF;
  font-family: Sentic-Bold;
  position: absolute;
  top: 69%;
  left: 69%;
  font-size: 1vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .left-box .my-money-text{
  color: #6D7276;
  font-family: Sentic-Bold;
  position: absolute;
  top: 78%;
  left: 77%;
  font-size: 0.5vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .left-box .profileimg{
  width: 14%;
  height: 30%;
  position: absolute;
  top: 10%;
  left: 5%;
  flex-shrink: 0;
  border-radius: 100%;
}

.boss-box .left-box .boss-name{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.9vw;
  left: 22%;
  top: 13%;
  position: absolute;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .left-box .fuel-name{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  left: 22%;
  top: 30%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .left-box .name-change-input{
  width: 60%;
  height: 20%;
  border-radius: 0.5vw;
  border: 0.1vw solid #2C2E30;
  background: rgba(44, 46, 48, 0.70);
  flex-shrink: 0;
  position: absolute;
  top: 55%;
  left: 5%;
  padding: 0.1vw 2.5vw 0.2vw;
  color: #3C3F42;
  font-family: Sentic-Bold;
  font-style: normal;
  font-weight: 900;
  font-size: 0.7vw;
  outline: none;
  line-height: normal;
}

.boss-box .left-box .edit-icon{
  position: absolute;
  top: 60.5%;
  left: 8%;
  width: 1vw;
  height: 1vw;
  flex-shrink: 0;
}

.boss-box .left-box .refresh-icon{
  position: absolute;
  top: 60.5%;
  left: 84%;
  width: 1vw;
  height: 1vw;
  flex-shrink: 0;
  z-index: 5;
  transition: 0.3s;
  cursor: pointer;
}

.boss-box .left-box .refresh-icon:hover{
  transform: scale(1.1);
  transition: 0.3s;
}





@property --pgPercentage1 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage2 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage3 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage4 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage5 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage6 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage7 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage8 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage9 {syntax: "<number>";inherits: false;initial-value: 0;}
@property --pgPercentage10 {syntax: "<number>";inherits: false;initial-value: 0;}


:root {--managvalue1:0;}
:root {--managvalue2:0;}
:root {--managvalue3:0;}
:root {--managvalue4:0;}
:root {--managvalue5:0;}
:root {--managvalue6:0;}
:root {--managvalue7:0;}
:root {--managvalue8:0;}
:root {--managvalue9:0;}
:root {--managvalue10:0;}
:root {
  --size: 1.5vw;
  --fg: #72C0FF;
  --bg: #333232;
  --ag: white;
}

@keyframes growProgressBar1 {0%,33% {--pgPercentage1: 0;}100% {--pgPercentage1: var(--managvalue1);}}
@keyframes growProgressBar2 {0%,33% {--pgPercentage2: 0;}100% {--pgPercentage2: var(--managvalue2);}}
@keyframes growProgressBar3 {0%,33% {--pgPercentage3: 0;}100% {--pgPercentage3: var(--managvalue3);}}
@keyframes growProgressBar4 {0%,33% {--pgPercentage4: 0;}100% {--pgPercentage4: var(--managvalue4);}}
@keyframes growProgressBar5 {0%,33% {--pgPercentage5: 0;}100% {--pgPercentage5: var(--managvalue5);}}
@keyframes growProgressBar6 {0%,33% {--pgPercentage6: 0;}100% {--pgPercentage6: var(--managvalue6);}}
@keyframes growProgressBar7 {0%,33% {--pgPercentage7: 0;}100% {--pgPercentage7: var(--managvalue7);}}
@keyframes growProgressBar8 {0%,33% {--pgPercentage8: 0;}100% {--pgPercentage8: var(--managvalue8);}}
@keyframes growProgressBar9 {0%,33% {--pgPercentage9: 0;}100% {--pgPercentage9: var(--managvalue9);}}
@keyframes growProgressBar10 {0%,33% {--pgPercentage10: 0;}100% {--pgPercentage10: var(--managvalue10);}}







.progresslevelbar {
  --pgPercentage1: var(--managvalue1);
  animation: 1s ease 0s 1 normal forwards running growProgressBar1;
  width: var(--size);
  left: 48%;
  top: 20%;
  z-index: 1;
  position: relative;
  height: var(--size);
  padding: 0.5vw;
  margin-left: 5.5%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage1) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 2);
  color: var(--ag);
}

div[role="progresslevelbar"]::before {
  counter-reset: percentage var(--managvalue);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: var(--size);
  height: var(--size);
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg1{
  --pgPercentage1: var(--managvalue1);
  animation: 1s ease 0s 1 normal forwards running growProgressBar1;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage1) * 1%), var(--bg) 0);
}

div[role="pg1"]::before {
  counter-reset: percentage var(--managvalue1);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}


.pg2{
  --pgPercentage2: var(--managvalue2);
  animation: 1s ease 0s 1 normal forwards running growProgressBar2;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage2) * 1%), var(--bg) 0);
}

div[role="pg2"]::before {
  counter-reset: percentage var(--managvalue2);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}


.pg3{
  --pgPercentage3: var(--managvalue3);
  animation: 1s ease 0s 1 normal forwards running growProgressBar3;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage3) * 1%), var(--bg) 0);
}

div[role="pg3"]::before {
  counter-reset: percentage var(--managvalue3);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg4{
  --pgPercentage4: var(--managvalue4);
  animation: 1s ease 0s 1 normal forwards running growProgressBar4;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage4) * 1%), var(--bg) 0);
}

div[role="pg4"]::before {
  counter-reset: percentage var(--managvalue4);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}


.pg5{
  --pgPercentage5: var(--managvalue5);
  animation: 1s ease 0s 1 normal forwards running growProgressBar5;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage5) * 1%), var(--bg) 0);
}

div[role="pg5"]::before {
  counter-reset: percentage var(--managvalue5);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}


.pg6{
  --pgPercentage6: var(--managvalue6);
  animation: 1s ease 0s 1 normal forwards running growProgressBar6;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage6) * 1%), var(--bg) 0);
}

div[role="pg6"]::before {
  counter-reset: percentage var(--managvalue6);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg7{
  --pgPercentage7: var(--managvalue7);
  animation: 1s ease 0s 1 normal forwards running growProgressBar7;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage7) * 1%), var(--bg) 0);
}

div[role="pg7"]::before {
  counter-reset: percentage var(--managvalue7);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg8{
  --pgPercentage8: var(--managvalue8);
  animation: 1s ease 0s 1 normal forwards running growProgressBar8;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage8) * 1%), var(--bg) 0);
}

div[role="pg8"]::before {
  counter-reset: percentage var(--managvalue8);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg9{
  --pgPercentage9: var(--managvalue9);
  animation: 1s ease 0s 1 normal forwards running growProgressBar9;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage9) * 1%), var(--bg) 0);
}

div[role="pg9"]::before {
  counter-reset: percentage var(--managvalue9);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}

.pg10{
  --pgPercentage10: var(--managvalue10);
  animation: 1s ease 0s 1 normal forwards running growProgressBar10;
  background: radial-gradient(closest-side, #252525 93%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage10) * 1%), var(--bg) 0);
}

div[role="pg10"]::before {
  counter-reset: percentage var(--managvalue10);
  content: counter(percentage) ;
  background-color: rgba(255, 255, 255, 0.16);
  width: 1.5vw;
  height: 1.5vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50vw;
}



.boss-box .right-box .my-tank-box{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 36%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: row;
}


.boss-box .right-box .stats-box{
  position: absolute;
  top: 40%;
  left: 2%;
  width: 96%;
  height: 58%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: row;
  background: rgba(29, 31, 32, 0.46);
}

.boss-box .right-box .my-tank-box .tank-item{
  position: relative;
  top: 5%;
  left: 2%;
  width: 22.5%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  background: rgba(29, 31, 32, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 2%;
  /* border: 0.1vw solid;
  border-image: linear-gradient(to top, rgb(102, 102, 102), rgba(255, 255, 255, 0)) 1;
  border-image-slice: 1; */
}

.tank-item .alt-hr{
  position: absolute;
  top: 102%;
  border: 0.1vw solid;
  left: 46%;
  border-radius: 0.5vw;
  /* transform: translate(400%, -50%); */
  width: 10%;
  height: 0.2vw;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #1D1F20;
  transition: all 0.2s ease;
}

.boss-box .right-box .my-tank-box .tank-item.clicked {
  border: 0.1vw solid;
  border-image: linear-gradient(to top, rgb(102, 102, 102), rgba(255, 255, 255, 0)) 1;
  border-image-slice: 1;
}

.boss-box .right-box .my-tank-box .tank-item .damla{
  position: absolute;
  width: 0.6vw;
  height: 0.6vw;
  left: 10%;
  top: 10%;
}

.boss-box .right-box .my-tank-box .tank-item .tank-name{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.9vw;
  position: absolute;
  top: 8.5%;
  left: 16.5%;
  text-transform: uppercase;
}

.boss-box .right-box .my-tank-box .tank-item .tank-fuel-icon{
  position: absolute;
  top: 8%;
  left: 80%;
  width: 1.5vw;
  height: 1.5vw;
}

.boss-box .right-box .my-tank-box .tank-item .tank-hr-one{
  position: absolute;
  top: 22%;
  left: 10%;
  width: 80%;
  height: 0.07vw;
  background: #2C2E30;
}

.boss-box .right-box .my-tank-box .tank-item .tank-hr-two{
  position: absolute;
  top: 34%;
  left: 41%;
  transform: translate(-50%, -50%);
  transform: rotate(90deg);
  width: 17%;
  height: 0.07vw;
  background: #2C2E30;
}

.boss-box .right-box .my-tank-box .tank-item .liter-price-input{
  position: absolute;
  top: 29%;
  left: -40%;
  /* width: 80%; */
  height: 1.5vw;
  border-radius: 0.5vw;
  background: none;
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 1.2vw;
  text-align: center;
  border: none;
  outline: none;

}

.boss-box .right-box .my-tank-box .tank-item .liter-price{
  color: white;
  font-family: Sentic-Bold;
  font-size: 1.2vw;
  position: absolute;
  top: 31%;
  left: 11%;
}

.boss-box .right-box .my-tank-box .tank-item .tanker-name-alt{
  width: 1.2vw;
  height: 1.2vw;
  position: absolute;
  top: 30.5%;
  left: 57%;
  flex-shrink: 0;  
}

.boss-box .right-box .my-tank-box .tank-item .tanker-name-alt-text{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  top: 30%;
  left: 67%;
  text-transform: uppercase;
  flex-shrink: 0;  
  width: 1vw;
}

.boss-box .right-box .my-tank-box .tank-item .tanker-prog-bg{
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 1.4vw;
  border-radius: 0.1vw;
  background: #2C2E30;
}

.boss-box .right-box .my-tank-box .tank-item .tanker-prop-color{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 20%;
  height: 100%;
  border-radius: 0.1vw;
  background: linear-gradient(270deg, #EE5B5B 0%, #1D1F20 100%);;
}

.boss-box .right-box .my-tank-box .tank-item .tank-fee{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  position: absolute;
  top: 63%;
  left: 7%;
  width: 43.874%;
  line-height: 1.1;
}

.boss-box .right-box .my-tank-box .tank-item .tank-value{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  position: absolute;
  top: 63%;
  left: 68.4%;
  width: 21.874%;
  line-height: 1.1;
  text-align: right;
}

.boss-box .right-box .my-tank-box .tank-item .users-img-box{
  position: absolute;
  top: 81%;
  left: 8%;
  width: 78%;
  height: 15%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  overflow: hidden;
}

.boss-box .right-box .my-tank-box .tank-item .users-img-box .gas-img{
  width: 1.5vw;
  height: 1.5vw;
  left: 8%;
  border-radius: 50%;
  margin-left: -0.7vw;
  padding: 0.2vw;
  position: relative;
  flex-shrink: 0;
}

.boss-box .right-box .my-tank-box .tank-item .users-img-box .gas-img img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


.boss-box .right-box .my-tank-box .tank-item .tank-edit{
  position: absolute;
  top: 82%;
  left: 79%;
  width: 1.2vw;
  height: 1.2vw;
  flex-shrink: 0;
  background: #2C2E30;
  border-radius: 0.2vw;
  padding: 0.3vw;
}
.boss-box .right-box .my-tank-box .tank-item .select-tank{
  display: none;
  position: absolute;
  top: 82%;
  left: 79%;
  width: 1.2vw;
  height: 1.2vw;
  flex-shrink: 0;
  background: #6D7276;
  border-radius: 0.2vw;
  padding: 0.3vw;
}

.boss-box .right-box .my-tank-box .tank-item .rangebox{
  position: absolute;
  top: 82%;
  left: 10%;
  width: 64%;
  height: 2.2%;
  border-radius: 20.076px;
  background: #101213;
  flex-shrink: 0;
  display: none;
  z-index: 5;
}

.boss-box .right-box .my-tank-box .tank-item .range-text{
  position: absolute;
  top: 88%;
  left: 10%;
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  flex-shrink: 0;
  display: none;
}


.itemrange[type="range"] {
  -webkit-appearance: none;
  /* margin-right: 15px; */
  width: 100%;
  height: 100%;
  background:  #1E1E1E  ;
  border-radius: 5px;
  background-image: linear-gradient(#6D7276, #6D7276);
  background-size: 70% 100%;
  background-repeat: no-repeat;
}

.itemrange[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  left: 5%;
  border-radius: 100%;
  background: #8D949A;
  cursor: ew-resize;
  transition: background .3s ease-in-out;
}

.itemrange[type="range"]::-webkit-slider-thumb:hover {
  background: #2C2E30;
}

.itemrange[type="range"]::-moz-range-thumb:hover {
  background: #2C2E30;
}

.itemrange[type="range"]::-ms-thumb:hover {
  background: #2C2E30;
}

.firstRange[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.itemrange[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.itemrange[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}


.boss-box .right-box .stats-box .stats-icon{
  position: absolute;
  top: 5.5%;
  left: 3.5%;
  width: 0.6vw;
  height: 0.6vw;
}


.boss-box .right-box .stats-box .stats-header{
  position: absolute;
  left: 5%;
  top: 4.5%;
  color: #5B5B5B;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stat-img{
  position: absolute;
  top: 10%;
  left: 75%;
  width: 13vw;
  height: 15vw;
  border-radius: 0.5vw;
}

.boss-box .right-box .stats-box .border-1{
  position: absolute;
  top: 0%;
  width: 2%;
}

.boss-box .right-box .stats-box .stat-bg{
  background: linear-gradient(83deg, #EE5B5B 0%, #EE5B5B 100%);
  backdrop-filter: blur(0.1vw);
  position: absolute;
  top: 73%;
  left: 75%;
  width: 13vw;
  height: 5vw;
  border-radius: 0.5vw;
}

.boss-box .right-box .stats-box .stat-bg .statsvg{
  position: absolute;
  top: -5%;
  left: 40%;
  width: 7vw;
  height: 5vw;
  border-radius: 0.5vw;
}

.boss-box .right-box .stats-box .stat-bg  .bg-header{
  color: #FFF;
  font-family: Sentic;
  font-size: 0.45vw;
  font-style: normal;
  font-weight: lighter;
  line-height: normal;
  position: absolute;
  left: 5%;
  top: 15%;
}

.boss-box .right-box .stats-box .stat-bg  .bg-money{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 1.2vw;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  position: absolute;
  left: 5%;
  top: 28%;
}

.boss-box .right-box .stats-box .stat-bg  .bg-white{
  background-color: #FFF;
  width: 1.2vw;
  height: 1.2vw;
  position: absolute;
  left: 5%;
  top: 63%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 0.2vw;
}

.boss-box .right-box .stats-box .stat-bg  .bg-white svg{
  width: 0.8vw;
  height: 0.8vw;
}

.boss-box .right-box .stats-box .stat-bg  .bg-desc{
  color: #FFF;
  font-family: Sentic;
  font-size: 0.4vw;
  width: 79%;
  font-style: normal;
  font-weight: lighter;
  line-height: normal;
  position: absolute;
  left: 17%;
  top: 65%;
}

.boss-box .right-box .stats-box .stats-list-box{
  position: absolute;
  top: 13%;
  left: 2%;
  width: 68%;
  height: 80%;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-radius: 0.5vw;
  overflow: hidden scroll;
}

::-webkit-scrollbar {
  width: 0.1vw;
  height: 0.1vw;
  background: rgba(255, 255, 255, 0.02); /* make scrollbar transparent */
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.33);
  border-radius: 0.2vw;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list{
  position: relative;
  top: 2%;
  left: 2%;
  width: 96%;
  height: 10%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border-radius: 0.5vw; */
  border-bottom: 0.1vw solid #2C2E30;
  /* background: rgba(202, 204, 206, 0.46); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 2%;
}

.boss-box .right-box .stats-box .stats-hr{
  position: absolute;
  top: 11%;
  left: 3%;
  width: 65.5%;
  height: 0.05vw;
  background: #2C2E30;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .stats-username{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  position: absolute;
  top: -15%;
  left: 1%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .stats-invoice{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  top: 30%;
  left: 1%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .stats-svg{
  position: absolute;
  top: -10%;
  left: 23%;
  width: 1.4vw;
  height: 1.2vw;
  flex-shrink: 0;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .type-header{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  top: -10%;
  left: 80%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .type-alt{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  position: absolute;
  top: 20%;
  right: 20%;
  left: 74%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .type-hr{
  position: absolute;
  top: 2%;
  left: 78.5%;
  width: 0.2%;
  height: 200%;
  background: #55585B;
  transform: rotate(90deg);
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .amount-hr{
  position: absolute;
  top: 50%;
  left: 88.5%;
  width: 0.2%;
  height: 100%;
  background: #55585B;
  transform: rotate(90deg);
}
.boss-box .right-box .stats-box .stats-list-box .stats-list .earned-hr{
  position: absolute;
  top: 50%;
  left: 96.5%;
  width: 0.2%;
  height: 100%;
  background: #55585B;
  transform: rotate(90deg);
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .amount-header{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  top: -10%;
  left: 86%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .amount-alt{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  position: absolute;
  top: 25%;
  left: 87%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .right-box .stats-box .stats-list-box .stats-list .earned-header{
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  position: absolute;
  top: -10%;
  left: 94%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}


.boss-box .right-box .stats-box .stats-list-box .stats-list .earned-alt{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.6vw;
  position: absolute;
  top: 25%;
  left: 95%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page .personel-icon{
  position: absolute;
  top: 3%;
  left: 3%;
  width: 1.5vw;
  height: 1.5vw;
  flex-shrink: 0;
}

.boss-box .members-page .members-icon{
  position: absolute;
  top: 3%;
  left: 3%;
  width: 1.5vw;
  height: 1.5vw;
  flex-shrink: 0;
}

.boss-box .members-page .members-hr{
  position: absolute;
  top: 8.4%;
  left: 2%;
  width: 96%;
  height: 0.05vw;
  background: #151718;
}

.boss-box .members-page .members-alt-header{
  position: absolute;
  top: 3.5%;
  left: 10%;
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 1vw;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page .members-header{
  position: absolute;
  top: 3.5%;
  left: 6%;
  color: #5B5B5B;
  font-family: Sentic-Bold;
  font-size: 1vw;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page .members-search-input{
  position: absolute;
  top: 3%;
  left: 74%;
  width: 15%;
  height: 1.5vw;
  border-radius: 0.5vw;
  border: 0.1vw solid #222324;
  background: rgba(29, 31, 32, 0.46);
  flex-shrink: 0;
  padding: 0.1vw 2.5vw 0.2vw;
  color: #3C3F42;
  font-family: Sentic-Bold;
  font-style: normal;
  font-weight: 900;
  font-size: 0.7vw;
  outline: none;
  line-height: normal;
}

.boss-box .members-page .hr{
  position: absolute;
  top: 10%;
  left: 2%;
  width: 96%;
  height: 0.05vw;
  background: #151718;
}

.boss-box .members-page .members-search{
  position: absolute;
  top: 3.4%;
  left: 74.5%;
  width: 1vw;
  height: 1vw;
  flex-shrink: 0;
  z-index: 5;
  border-radius: 0.2vw;
  padding: 0.3vw;
  color: #3D4043;
}

.boss-box .members-page .members-search-input::placeholder {
  color: #3C3F42;
}

.boss-box .members-page .members-box{
  position: absolute;
  top: 12%;
  left: 2%;
  width: 47.3%;
  height: 85%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5vw;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;
}
.boss-box .members-page .hired-box{
  position: absolute;
  top: 12%;
  left: 51%;
  width: 47.3%;
  height: 85%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5vw;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden scroll;
}

.boss-box .members-page .hired-list{
  position: relative;
  top: 10%;
  left: 1.5%;
  width: 97%;
  margin-top:2%;
  height: 8%;
  background: rgba(29, 31, 32, 0.46);
  border-radius: 0.5vw;
  transition: 0.3s;
}

.boss-box .members-page  .hired-list:hover{
  background: rgba(55, 55, 56, 0.56);
  transition: 0.3s;
  cursor: pointer;
}


.boss-box .members-page  .members-list{
  position: relative;
  top: 10%;
  left: 1.5%;
  width: 97%;
  margin-top:2%;
  height: 8%;
  background: rgba(29, 31, 32, 0.46);
  border-radius: 0.5vw;
  transition: 0.3s;
}

.boss-box .members-page  .members-list:hover{
  background: rgba(55, 55, 56, 0.56);
  transition: 0.3s;
  cursor: pointer;
}

.boss-box .members-page   .member-head{
  position: absolute;
  top: 30%;
  left: 13%;
  color: #6D7276;
  font-family: Sentic;
  font-size: 0.4vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page  .member-name{
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  position: absolute;
  top: 50%;
  left: 13%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page  .authority-head{
  position: absolute;
  top: 30%;
  left: 40%;
  color: #6D7276;
  font-family: Sentic;
  font-size: 0.4vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page .authority-name{
  color: #FFC672;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  position: absolute;
  top: 50%;
  left: 40%;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .members-page .ffsvg{
  position: absolute;
  top: 30%;
  left: 87%;
  width: 1.2vw;
  height: 1.2vw;
  flex-shrink: 0;
}

.boss-box .members-page .arti{
  position: absolute;
  top: 28%;
  left: 92.5%;
  width: 1.6vw;
  height: 1.4vw;
  flex-shrink: 0;
  translate: 0.5s;
}

.boss-box .members-page .arti path{
  fill: #DC7A7A;
  transition: 0.3s;
}

.boss-box .members-page .arti:hover path{
  fill: #EE5B5B;
  transition: 0.3s;
}


.boss-box .members-page .pp{
  position: absolute;
  height: 2.3vw;
  width: 2.5vw;
  left: 1%;
  top: 10%;
  border-radius: 0.5vw;
}

.boss-box .tanker-page .tanker-list-box{
  position: absolute;
  top: 0%;
  left: 1.5%;
  width: 96%;
  height: 86%;
  border-radius: 0.5vw;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden scroll;
}

.boss-box .tanker-page .tanker-list-box .tanker-list{
  position: relative;
  top: 0%;
  left: 0%;
  width: 23%;
  /* margin:1%; */
  margin-top: 3%;
  margin-left: 2%;
  height: 43%;
  /* background: rgba(29, 31, 32, 0.46); */
  border-radius: 0.5vw;
}

/* 316 */

.boss-box .tanker-page .tanker-list-box .tanker-listone{
  /* position: relative; */
  top: 2%;
  left: 0%;
  margin:1%;
  width: 100%;
  height: 89%;
  background: rgba(29, 31, 32, 0.46);
  border-radius: 0.5vw 0.5vw 0vw 0vw;
}

.boss-box .tanker-page .tanker-list-box .tanker-listone .locked{
  top: 5%;
  left: 5%;
  width: 90%;
  height: 50%;
  border-radius: 0.5vw 0.5vw 0vw 0vw;
  flex-shrink: 0;
  z-index: 5;
  background: #0F0F0F;
  opacity: 0.9;
  position: absolute;
}

.boss-box .tanker-page .tanker-list-box .tanker-listone .locked img{
  width: 1.5vw;
  height: 2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.boss-box .tanker-page .tanker-list-box .tanker-listtwo{
  /* position: relative; */
  top: 2%;
  left: 0%;
  margin:1%;
  width: 100%;
  height: 18%;
  background: rgba(29, 31, 32, 0.46);
  border-radius: 0vw 0vw 0.5vw 0.5vw;
}

.boss-box .tanker-page .tanker-list-box .tanker-listtwo .money-head{
  position: absolute;
  top: 95%;
  left: 7%;
  text-transform: uppercase;
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.4vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .tanker-page .tanker-list-box .tanker-listtwo .money-count{
  position: absolute;
  top: 99%;
  left: 7%;
  color: #FFF;
  font-family: Sentic-Bold;
  font-size: 0.8vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.boss-box .tanker-page .tanker-list-box .tanker-listtwo  .tanker-buy-button{
  position: absolute;
  top: 95%;
  left: 63%;
  font-family: Sentic-Bold;
  font-size: 0.7vw;
  padding: 0.3vw 1.4vw;
  border-radius: 0.2vw;
  background: #FFF;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-transform: uppercase;
  transition: all 0.2s ease;
  cursor: pointer;
}

.boss-box .tanker-page .tanker-list-box .tanker-listtwo img{
  width: 0.8vw;
  position: absolute;
  left: 84%;
  top: 97%;
  height: 0.8vw;
  margin-right: 0.3vw;
}

.boss-box .tanker-page .tanker-list-box .tanker-listtwo  .tanker-buy-button:hover{
  background: #EE5B5B;
  color: #FFF;
}

.boss-box .tanker-page .tanker-list-box .tanker-list .tank-img{
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 50%;
  border-radius: 0.5vw 0.5vw 0vw 0vw;
}

.boss-box .tanker-page .tanker-list-box .tanker-list .desc{
  position: absolute;
  color: #6D7276;
  font-family: Sentic-Bold;
  font-size: 0.5vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  top: 60%;
  left: 5%;
  width: 93%;
}

.boss-box .tanker-page .tanker-list-box .tanker-list .hr{
  position: absolute;
  top: 76%;
  left: 5%;
  width: 90%;
  height: 0.1vw;
  background: #2C2E30;
}


.boss-box .tanker-page .tanker-list-box .tanker-list .fuel-icon{
  position: absolute;
  top: 79%;
  left: 5%;
  width: 1.2vw;
  height: 1.2vw;
}

.boss-box .tanker-page .level-box{
  position: absolute;
  top: 89%;
  left: 4%;
  width: 93.5%;
  height: 8%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: row;
  background: rgba(29, 31, 32, 0.46);
}

.boss-box .tanker-page .level-box .level-item{
  position: relative;
  top: 2%;
  left: 2%;
  width: 11%;
  height: 25%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.2vw;
  background: #3E4143;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 1%;
}



.ntopen{
  position: absolute;
  width: 30%;
  height: 23%;
  top: 60%;
  transform: translate(140%, -50%);
  z-index: 5000;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.5vw;
  border: 0.1vw solid #232627;
  background: linear-gradient(180deg, rgba(16, 18, 19, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%);  left: 0%;
}

.ntopen .header{
  position: absolute;
  top: 4%;
  left: 0%;
  width: 100%;
  height: 10%;
  color: #40C35E;
  font-weight: bold;
  font-size: 1.1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.ntopen .desc{
  position: absolute;
  top: 5%;
  left: 7.5%;
  width: 85%;
  height: 60%;
  color: rgba(255, 255, 255, 0.24);
  font-weight: bold;
  font-size: 0.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: center;
}

.ntopen .price{
  position: absolute;
  top: 57%;
  left: 0%;
  width: 100%;
  height: 10%;
  color: #40C35E;
  font-weight: bold;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-family: Sentic-Bold;
}

.ntopen .total-text{
  position: absolute;
  top: 65%;
  left: 0%;
  width: 100%;
  height: 10%;
  color: white;
  font-weight: lighter;
  font-size: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-family: Sentic;
}

.ntopen .linear{
  background: linear-gradient(90deg, #40C25E 0%, rgba(0, 0, 0, 0.00) 100%);
  background-blend-mode: color-dodge;
  position: absolute;
  width: 50%;
  height: 20%;
  top: 55%;
  opacity: 0.2;
}

.ntopen .linear2{
  background: linear-gradient(90deg, #40C25E 0%, rgba(0, 0, 0, 0.00) 100%);
  background-blend-mode: color-dodge;
  position: absolute;
  transform: rotate(180deg);
  width: 50%;
  height: 20%;
  left: 50%;
  top: 55%;
  opacity: 0.2;
}

.ntopen .whitelinear{
  background: linear-gradient(90deg, rgba(217, 217, 217, 0.06) 0%, rgba(0, 0, 0, 0.00) 100%);
  background-blend-mode: color-dodge;
  position: absolute;
  width: 100%;
  height: 20%;
  top: 24%;
  opacity: 0.2;
}

.ntopen .whitelinear2{
  background: linear-gradient(90deg, rgba(217, 217, 217, 0.06) 0%, rgba(0, 0, 0, 0.00) 100%);
  background-blend-mode: color-dodge;
  position: absolute;
  transform: rotate(180deg);
  width: 100%;
  height: 20%;
  top: 24%;
  opacity: 0.2;
}

.ntopen .whitehr{
  position: absolute;
  top: 34%;
  left: -4.3%;
  width: 8.3%;
  height: 0.5%;
  transform: rotate(90deg);
  background: #2C2E30;
}

.ntopen .whitehr2{
  position: absolute;
  top: 34%;
  left: 95.874%;
  width: 8.3%;
  height: 0.5%;
  transform: rotate(90deg);
  background: #2C2E30;
}


.ntopen  .hr{
  position: absolute;
  top: 64.6%;
  left: -4.3%;
  width: 8.3%;
  height: 0.5%;
  transform: rotate(90deg);
  background: #40C25E;
}

.ntopen .close-box{
  position: absolute;
  top:80%;
  left: 2%;
  width: 96%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
}

.ntopen .close-button{
  position: absolute;
  top: 0%;
  left: 39%;
  padding: 0.35vw 1vw; 
  flex-shrink: 0;
  z-index: 5000;
  cursor: pointer;
  color: #0D0D0D;
  font-size: 1.3vw;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.07);
  transition: all 0.2s ease;
}

.ntopen .close-button:hover{
  background: rgba(255, 255, 255, 0.15);
}