* {
      font-family: 'Inter', sans-serif;
}

.container
{
    width: 10%;
}

button,
button:active,
button:focus  {
  border:none;
}

input[type="range"] {
    background-color: linear-gradient(#431882, #AA58D1);
}

svg {
    color: white;
}

.head-interface {
    color: white;
}
    .logo-icon {
        position: fixed;
        right: 0px;
        top: -5px;
        width: 220px;
        padding-bottom: 50px;
        margin-right: 50px;

    }

      .personal-info {
        display: block;
        position: absolute;
        color: white;
        right: 270px;
        top: 20px;
        font-weight: 600;
    }

        .personal-info-info {
            display: none;
        }

        .online-stats {
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-evenly;
            align-items: flex-start;
        }

        .personal-info-online {
            padding-left: 30px;
        }

        .icon-users {
            background-image: url("template/icons/users.svg");
            background-repeat: no-repeat;
            height: 24px;
            width: 24px;
            position: absolute;
            z-index: 2;
        }
		
    .action-info {
        display: none;
        width: 25px;
        height: 20px;
        background: linear-gradient(135deg, #7B39AD, #9269E5);
        position: absolute;
        color: #ffffff;
        right: 40px;
        top: 5px;
        font-weight: 600;
        text-align: center;
        border-radius: 20%;
    }

    .time-block {
        display: inline-grid;
        color: white;
        position: absolute;   
        bottom: 20px;
        left: 300px;
        font-weight: 600;
        z-index: 1;
    }

    .icon-calendar {
        display: inline-grid;
        background-image: url("template/icons/calendar.svg");
        background-repeat: no-repeat;
        padding-top: 5px;
        right: 85px;
        height: 23px;
        width: 23px;
        position: absolute;
        z-index: 2; 
    }

    .icon-clock {
        display: inline-grid;
        background-image: url("template/icons/clock.svg");
        background-repeat: no-repeat;
        right: 85px;
        height: 23px;
        width: 23px;
        position: absolute;
        z-index: 2;     
    }
		

.hud-box {
	display: none;
}

.bg_interface {
    border-width: 0px;
    border-radius: 20px;
    background-color: #1408204a;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
    position: absolute;
    right: 40px;
    top: 80px;
    width: 270px;
    height: 119px;
    z-index: 1;
}
    .gun-icon {
        max-width: 70px;
        position: absolute;
        padding: 64px;
        background-size: 64px;
        background-repeat: no-repeat;
        right: 5px;
        top: 20px;
        z-index: 3;
    }
    
    .icon-dollar {
        background-image: url("template/icons/dollar-sign.svg");
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
        position: absolute;
        right: 3px;
        color: mediumseagreen;
        z-index: 2;
    }

    .icon-utensils {
        
        background-image: url("template/icons/utensils.svg");
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
        position: absolute;
        right: 282px;
        top: 130px;
        color: rgb(197, 129, 28);
        z-index: 2;
    }

    .icon-heart {
        background-image: url("template/icons/heart.svg");
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
        position: absolute;
        right: 282px;
        top: 150px;
        color: rgb(204, 62, 62);
        z-index: 2;
    }

    .icon-shield {
        background-image: url("template/icons/shield.svg");
        background-repeat: no-repeat;
        height: 24px;
        width: 24px;
        position: absolute;
        right: 282px;
        top: 170px;
        color: rgb(53, 101, 233);
        z-index: 2;
    }

    .money_text {
        font-size: 18px;
        color: white;
        font-weight: bold;
        line-height: 0.944;
        text-align: center;
        position: absolute;
        right: 280px;
        top: 105px;
        z-index: 4;

    }

    .money_count {
        position: fixed;
        padding-left: 5px;
        color: mediumseagreen;
    }

    .ammo_text_current {
        font-size: 16px;
        font-weight: 600;
        color: white;
        font-weight: bold;
        line-height: 0.944;
        text-align: center;
        position: absolute;
        right: 45px;
        top: 100px;
        z-index: 4;

    }

    .ammo_text_max {
        font-size: 14px;
        font-weight: 600;
        color: #afafaf;
        font-weight: bold;
        line-height: 0.944;
        text-align: center;
        position: absolute;
        right: 45px;
        top: 120px;
        z-index: 4;
    }
 
    progress.styled {
        display: block;
        border-radius: 8px;
        width: 140px;
        height: 11px;
        z-index: 6;
        position: absolute;
        right: 139px;
        top: 135px;
    }

        progress.styled::-webkit-progress-bar {
            background-color: rgb(95, 63, 15);
            border-radius: 8px;
        }
        progress.styled::-webkit-progress-value {
            background-color: rgb(197, 129, 28);
            background-image: linear-gradient(rgb(197, 129, 28), rgb(197, 129, 28));
            border-radius: 8px;
        }
        progress.styled::-moz-progress-bar {
            background-color: rgb(197, 129, 28);
            background-image: linear-gradient(rgb(197, 129, 28), rgb(197, 129, 28));
            border-radius: 8px;
        }

    progress.styled1 {
        display: block;
        border-radius: 8px;
        width: 200px;
        height: 11px;
        z-index: 6;
        position: absolute;
        right: 80px;
        top: 155px;

    }

        progress.styled1::-webkit-progress-bar {
            background-color: rgb(75, 26, 26);
            border-radius: 8px;
        }

        progress.styled1::-webkit-progress-value {
            background-color: rgb(204, 62, 62);
            background-image: linear-gradient(rgb(204, 62, 62), rgb(204, 62, 62));
            border-radius: 8px;
        }

        progress.styled1::-moz-progress-bar {
            background-color: rgb(204, 62, 62);
            background-image: linear-gradient(rgb(204, 62, 62), rgb(204, 62, 62));
            border-radius: 8px;
        }

    progress.styled2 {
        display: block;
        border-radius: 8px;
        width: 200px;
        height: 11px;
        z-index: 6;
        position: absolute;
        right: 80px;
        top: 175px;

    }

        progress.styled2::-webkit-progress-bar {
            background-color: rgb(28, 50, 110);
            border-radius: 8px;
        }

        progress.styled2::-webkit-progress-value {
            background-color: rgb(53, 101, 233);
            background-image: linear-gradient(rgb(53, 101, 233), rgb(53, 101, 233));
            border-radius: 8px;
        }

        progress.styled2::-moz-progress-bar {
            background-color: rgb(53, 101, 233);
            background-image: linear-gradient(rgb(53, 101, 233), rgb(53, 101, 233));
            border-radius: 8px;
        }
  
    .wanted-information {
        position: absolute;
        right: 90px;
        top: 220px;
        z-index: 1;
    }

        .wanted-star-icon {
            display: none;
        }

    .reward-information {
        display: none;
        border-width: 0px;
        border-radius: 20px;
        background-color: #1408204a;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
        position: absolute;
        right: 44px;
        top: 270px;
        width: 260px;
        height: 40px;
        z-index: 1;
    }
        .reward-information-coin {
            position: absolute;
            right: 210px;
            top: 10px;
            font-size: 18px;
            font-weight: 600;
            color: white;

        }

        .reward-information-icon {
            position: absolute;
            background-image: url(template/circle.png);
            background-repeat: no-repeat;
            background-size: 35px;
            padding: 20px;
            right: 160px;
            top: 4px;
        }

        .reward-information-text {
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 18px;
            font-weight: 600;
            color: white;

        }

    .tips-info {
        display: none;
        position: absolute;
        top: 340px;
        right: 20px;
        color: white;
        z-index: 1;
    }
        .tips-block {
                display: flex;
                padding-bottom: 10px;
				align-items: center;
				font-weight: 600;
        }

        .tips-info-block {
            background: #1408204a;
            box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
            border-radius: 20px;
            padding: 10px;
            margin-right: 10px;
            font-weight: 600;
        }

        .tips-info-text {
            padding-top: 10px;
            font-weight: 600;
        }

    .vehicle-speedmetr {
        display: none;
        border-width: 0px;
        border-radius: 20px;
        background-color: #1408204a;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
        position: absolute;
        right: 54px;
        bottom: 50px;
        width: 210px;
        height: 150px;
        z-index: 1;

    }

        .vehicle-speedmetr-text {
            position: absolute;
            right: 67px;
            top: 40px;
            font-size: 50px;
            font-style: italic;
            font-weight: 600;
            color: white;
        }

        .vehicle-speedmetr-text-no-update {
            position: absolute;
            right: 90px;
            top: 90px;
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .vehicle-speedmetr-text-fuel {
            position: absolute;
            right: 135px;
            top: 120px;
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .vehicle-speedmetr-text-engine {
            position: absolute;
            right: 100px;
            top: 120px;
            font-size: 18px;
            font-weight: 600;
            color: rgb(214, 75, 32);
        }

        .vehicle-speedmetr-text-key {
            position: absolute;
            right: 70px;
            top: 120px;
            font-size: 18px;
            font-weight: 600;
            color: rgb(17, 160, 53);
        }

        .vehicle-speedmetr-text-jet {
            position: absolute;
            right: 45px;
            top: 120px;
            font-size: 18px;
            font-weight: 600;
            color: rgb(17, 160, 53);
        }

        #circle {
            transition: 0.3s linear;
        }
		
		#fuel {
			position: absolute;
			top: 3px;
			right: 40px;
			width: 3.5vw;
			margin: 0 -2.3vw;
			transform: rotate(138deg);
		}

        .icon-gas-pump {
            background-image: url(template/icons/gas-pump.svg);
            background-repeat: no-repeat;
            height: 24px;
            width: 24px;
            position: absolute;
            right: 10px;
            color: green;
            z-index: 2;
            padding-right: 30px;
        }

        .icon-engine {
            background-image: url("template/icons/engine.svg");
            background-repeat: no-repeat;

            filter: brightness(0) saturate(100%) invert(70%) sepia(43%) saturate(4925%) hue-rotate(319deg) brightness(85%) contrast(87%);
            
            height: 24px;
            width: 24px;
            position: absolute;
            z-index: 2;
        }

        .icon-key {
            filter: brightness(0) saturate(100%) invert(56%) sepia(78%) saturate(352%) hue-rotate(94deg) brightness(92%) contrast(86%);
            height: 24px;
            width: 24px;
            position: absolute;
            z-index: 2;
        }

        .icon-jet-belt {

            filter: brightness(0) saturate(100%) invert(70%) sepia(43%) saturate(4925%) hue-rotate(319deg) brightness(85%) contrast(87%);

            height: 24px;
            width: 24px;
            position: absolute;
            z-index: 2;
        }
		
	.character-selection {
		display: none;
		position: absolute;
		border-radius: 20px;
        background-color: #14082098;
		box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
		padding: 50px;
		bottom: 40vh;
		right: 2vh;
	}
	
		.character-selection-header-text {
			
			color: white;
			font-size: 20px;
			font-weight: bold;
			padding-bottom: 5px;
			text-align: center;
			
		}
		
		.character-selection-text {
			
			color: white;
			text-align: center;
			padding-top: 10px;
			
		}
		
		.character-selection-button-block {
			display: -webkit-box;
			padding-top: 30px;
				
		}
		
		.character-selection-back-button {
			border-radius: 20px;
			background-color: #1408204a;
			padding: 10px;
			margin-right: 10px;
			text-decoration: none;
			color: white;
		}
		
		.character-selection-select-button {
			border-radius: 20px;
			background-color: #1408204a;
			padding: 10px;
			margin-right: 10px;
			text-decoration: none;
			color: white;
		}
		
		.character-selection-next-button {
			border-radius: 20px;
			background-color: #1408204a;	
			padding: 10px;
			text-decoration: none;
			color: white;
		}

    .gas-station {
        display: none;
        position: absolute;
        top: 40%;
        left: 40%;
        margin-right: -50%;
        width: 100%;
        max-width: 312px;
        padding: 36px 32px;
        background-color: #14082098;
        border-radius: 20px;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);

    }

        .gas-station-header {
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }

        .gas-station-text {

            padding-top: 10px;
            text-align: center;
            color: white;

        }

        .gas-station-type-fuel {
            padding-top: 20px;
            text-align: center;
            color: white;

        }

        .gas-station-type-fuel-box {

            display: inline-flex;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            background: #1408204a;
            font-size: 16px;
            font-weight: bold;
            color: white;

        }

        .gas-station-fuel-information {
            display: flex;
            justify-content: center;
            align-items: baseline;
            flex-direction: row;
        }

        .gas-station-text-price {
            text-align: center;
            padding-top: 20px;
            color: white;
        }

        .gas-station-current-price {
            padding-top: 20px;
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            color: white;
        }

        .gas-station-current-liters {
            color: white;
            padding-left: 10px;
        }

        .gas-station-range-text {
            
            color: white;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: .8em;

        }

        .gas-station-input {

            width: 100%;
        }

        .gas-station-buttom {
            padding-top: 30px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .fuel-name {
            padding-left: 30px;
        }

        .icon-petrol-type {
            background-image: url("template/icons/gas-pump.svg");
            background-repeat: no-repeat;
            height: 24px;
            width: 24px;
            position: absolute;
            color: green;
            z-index: 2;
        }

        .icon-diesel-type {
            background-image: url("template/icons/truck.svg");
            background-repeat: no-repeat;
            height: 24px;
            width: 24px;
            position: absolute;
            color: green;
            z-index: 2;
        }

        .icon-electric-type {
            background-image: url("template/icons/plug-circle.svg");
            background-repeat: no-repeat;
            height: 24px;
            width: 24px;
            position: absolute;
            color: green;
            z-index: 2;      
        }

        .gas-station-green-buttom {

            color: white;
            background: limegreen;
            padding: 15px;
            text-align: center;
            margin-right: 5px;
            border-radius: 20px;
        }

        .gas-station-red-buttom {

            color: white;
            background: red;
            padding: 15px;
            text-align: center;
            border-radius: 20px;
        }

    .autosalon-box {
        display: none;
        position: absolute;
        top: 40%;
        right: 1%;
        width: 100%;
        max-width: 312px;
        padding: 36px 32px;
        background-color: #14082098;
        border-radius: 20px;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);

    }

        .autosalon-box-header {
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
        }

        .autosalon-box-text {
            padding-top: 20px;
            color: white;
        }

        .autosalon-box-vehicle-name {
            text-align: center;
            padding-bottom: 20px;
            font-size: 20px;
        }

        .autosalon-box-speed {
            display: flex;
        }

        .autosalon-box-speed-name {
            display: flex;
            font-weight: bold;
        }

        .autosalon-box-speed-info {
            display: flex;
            font-size: 13px;
            padding-left: 80px;
            flex-direction: row-reverse;
        }

        progress.autosalon-box-prograss {
            padding-top: 2px;
            display: block;
            border-radius: 8px;
            width: 83%;
            height: 11px;
            z-index: 6;
            position: absolute;

        }

            progress.autosalon-box-prograss::-webkit-progress-bar {
                background-color: rgb(56, 15, 95);
                border-radius: 8px;
            }
            progress.autosalon-box-prograss::-webkit-progress-value {
                background-color: rgb(138, 28, 197);
                background-image: linear-gradient(rgb(138, 28, 197), rgb(138, 28, 197));
                border-radius: 8px;
            }
            progress.autosalon-box-prograss::-moz-progress-bar {
                background-color: rgb(138, 28, 197);
                background-image: linear-gradient(rgb(138, 28, 197), rgb(138, 28, 197));
                border-radius: 8px;
            }

        .autosalon-box-fuel {
            padding-top: 30px;
            display: inline-block;
        }
        
        .autosalon-box-fuel-title {
            color: white;
            padding-bottom: 5px;
        }

        .autosalon-box-fuel-name {
            display: inline;
            font-size: 16px;
            font-weight: bold;
            padding-left: 35px;
        }

        .autosalon-box-fuel-volume {
            padding-top: 30px;
            padding-left: 20px;
            display: inline-block;
        }
        
        .autosalon-box-fuel-volume-title {
            color: white;
            padding-bottom: 5px;
        }

        .autosalon-box-fuel-volume-name {
            display: inline;
            font-size: 16px;
            font-weight: bold;
            padding-left: 35px;
        }

        .autosalon-box-money-name {
            padding-top: 20px;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
        }

        .autosalon-box-action-button {
            padding-top: 30px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .autosalon-box-button {
            padding-top: 30px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .autosalon-box-green-button {
            color: white;
            background: limegreen;
            padding: 15px;
            text-align: center;
            margin-right: 5px;
            border-radius: 20px;
        }

        .autosalon-box-yellow-button {
            color: white;
            background: orange;
            padding: 15px;
            text-align: center;
            margin-right: 5px;
            border-radius: 20px;
        }

        .autosalon-box-red-button {
            color: white;
            background: red;
            padding: 15px;
            text-align: center;
            margin-right: 5px;
            border-radius: 20px;
        }

    .casino-box {

        display: none;
        position: absolute;
        top: 40%;
        right: 1%;
        width: 100%;
        max-width: 250px;
        padding: 20px 32px;
        background-color: #14082098;
        border-radius: 20px;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
        color: white;

    }
        .casino-box-header {
            font-size: large;
            font-weight: 600;
            text-align: center;
        }

        .casino-box-players-table {
            margin-top: 1.5vh;
            margin-bottom: 1.5vh;
        }

        .casino-box-player-name {
            margin-top: 0.5vh;
        }

        .casino-box-informations {
            margin-top: 0.5vh;
            text-align: justify;
        }

        .casino-box-buttons {

            margin-top: 2vh;
            display: flex;
            justify-content: space-between;
        }
        
        .casino-box-buttons-bet {
            background: linear-gradient(45deg, #FFA500, #DB9D00);
            padding: 12px;
            border-radius: 20px;
            color: white;
            margin-right: 5px;
        }

        .casino-box-buttons-play {
            background: linear-gradient(45deg, green, lightgreen);
            padding: 12px;
            border-radius: 20px;
            color: white;
            margin-right: 5px;
        }

        .casino-box-buttons-exit {
            background: linear-gradient(45deg, red, #FF474C);
            padding: 12px;
            border-radius: 20px;
            color: white;
        }

    .skin-shop-box {
        display: none;
        position: absolute;
        top: 40%;
        right: 1%;
        width: 100%;
        max-width: 250px;
        padding: 20px 32px;
        background-color: #14082098;
        border-radius: 20px;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
        color: white;    
    }

        .skin-shop-icon {

            width: 145px;
            padding-left: 6vh;
        }

        .skin-shop-text {
            font-size: 20px;
            text-align: center;
        }

        .skin-box-button-list {
            display: inline-flex;
            padding-top: 2vh;
        }

        .skin-box-buy-button-cyrcle {
            color: white;
            background-color: rgb(119, 27, 181);
            
            padding: 7px;
            border-radius: 10px;
            font-size: initial;
            margin: 5px 10px;
        }

        .skin-box-buy-button-green {
            color: white;
            background-color: seagreen;
            padding: 7px;
            border-radius: 10px;
            font-size: initial;
            margin: 5px 10px;
        }

        .skin-box-buy-button-red {
            color: white;
            background-color: #FF474C;
            padding: 7px;
            border-radius: 10px;
            font-size: initial;
            margin: 5px 10px;
            
        }

    .accessories-box {
        display: none;
        position: absolute;
        top: 40%;
        right: 1%;
        width: 100%;
        max-width: 250px;
        padding: 20px 32px;
        background-color: #14082098;
        border-radius: 20px;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.4);
        color: white;    
    }

        .accessories-header {
            font-size: 24px;
            text-align: center;
        }

        .accessories-text {
            padding-top: 3vh;
        }

        .accessories-button-list {
            display: inline-flex;
            padding-top: 2vh;  
        }

        .accessories-button-list-two {
            display: inline-flex;
            padding-top: 2vh;  
        }

        .accessories-button { 
            margin: 10px;
            padding: 5px 10px 5px 10px;
            color: white;
            background-color: orange;
            font-size: initial;
            border-radius: 5px;
        }
            .accessories-button-cyrcle {
                border-radius: 100%;
            }

            .accessories-button-green {
                background-color: seagreen;
                padding: 10px;
                margin-left: 30px;
            }

            .accessories-button-red {
                background-color: #FF474C
            }

            .accessories-button-purple {
                background-color: rgb(119, 27, 181);
            }