.button{
	background-color: var(--primary);
	font-size: 12px;
	color: #FFF;
	padding: 10px;
	margin: 5px;
	border-radius: 10px;
	transition: .3s;
	cursor: pointer;
	display: inline-block;
    border: none;
}
.button:hover{
	background: rgba(var(--primary-rgb), 0.8);
}
.entry{
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgb(50, 50, 50);
	font-size: 15px;
	color: #DDD;
	padding: 10px;
	margin: 5px;
	outline: none;
	border-radius: 10px;
	transition: .3s;
}
.entry::placeholder {
	opacity: 0.5;
	color: #DDD;
}
.entry:hover{
    background-color: rgb(70, 70, 70);
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.radio{
	display: inline-block;
	margin: 5px;
}
.radio label{
	cursor: pointer;
}
.radio input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgb(50, 50, 50);
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	vertical-align: text-top;
	position: relative;
}
.radio input::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: rgba(50, 50, 50, 0.5);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
.radio input:checked::before {
	background-color: rgb(255, 100, 0);
}
.checkbox{
	display: inline-block;
	margin: 5px;
}
.checkbox label{
	cursor: pointer;
}
.checkbox input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgb(50, 50, 50);
	border-radius: 7px;
	outline: none;
	cursor: pointer;
	vertical-align: text-top;
	position: relative;
}
.checkbox input::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: rgba(50, 50, 50, 0.5);
	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
.checkbox input:checked::before {
	background-color: rgb(255, 100, 0);

}
.selectbox {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgb(50, 50, 50);
	font-size: 15px;
	color: #DDD;
	padding: 10px;
	margin: 3px;
	outline: none;
	border-radius: 10px;
	transition: all .3s ease;

	min-width: 50px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DDD'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	padding-right: 30px;
}

select:hover {
    background-color: rgb(70, 70, 70);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.selectbox:focus {
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.selectbox option {
	background-color: rgb(50, 50, 50);
	color: #DDD;
}

.selectbox::-ms-expand {
	display: none;
}

.selectbox:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Стили для элемента progress */
progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgb(50, 50, 50);
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0;
}

/* Стиль для WebKit браузеров (Chrome, Safari, Edge) */
progress::-webkit-progress-bar {
    background-color: rgb(50, 50, 50);
}

progress::-webkit-progress-value {
    background-color: var(--primary);
    transition: all 0.3s ease;
}

/* Стиль для Firefox */
progress::-moz-progress-bar {
    background-color: var(--primary);
    transition: all 0.3s ease;
}

/* Ховер эффект */
progress:hover {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgb(70, 70, 70);
}

progress:hover::-webkit-progress-bar {
    background-color: rgb(70, 70, 70);
}

/* Анимация заполнения */
@keyframes progressAnimation {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

progress::-webkit-progress-value {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    animation: progressAnimation 1s linear infinite;
}

progress::-moz-progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    animation: progressAnimation 1s linear infinite;
}