@font-face { font-family: 'Inter'; src: url(/fonts/InterVariable.ttf); font-display: block; }

:root {
    --black: #1A1423;
    --grey: #7E818C;
    --orange: #F78E14;
	--peach: #FFEACE;
	--green: #3E804F;
	--green-dsk: #00643C;
}

* {
	font-family: 'Inter';
}

body{
    margin:0;
}
canvas{
    background:#fff;
    border:1px solid #aaa;
    /*touch-action: none; */
}
.BIM div{
    font-size:12px;
}
/*
button{
    padding:6px 12px;
    font-size:16px;
    cursor:pointer;
    margin-right:5px;
    background-color: #2f3136;
    border-radius: 5px;
    color: white;
} */
#box {
  background: transparent;
  transition: background-color 2s ease;
  background-color: #f58d10;
  color: white;
}

#box.bg-active {
  background: yellow;
}

/* */

.box-shadow {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 93svh;
  width: 90%;
  max-width:400px;
  background: white;
  border: 2px solid black;
  border-radius: 12px;
  padding:16px;
  justify-content: center;
}

.dialog {
	width: 90%;
	max-width:400px;
	background: white;
	border: 2px solid black;
	border-radius: 12px;
	padding:16px;
	justify-content: center;
}	

.roofB {
	width:150px;
	height: 44px;		
}

.popupButton {
	width:150px;
	height: 44px;		
}

button {
	all: unset; /* Сбрасывает все свойства на начальные */
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	text-align: center;
	cursor:pointer;
}

.button-radius {
	 border-radius: 12px;
}

.button-border {
	border:2px solid #221f26;
}

.button-height {
	height:48px;
}

.margin-right {
	margin-right: 16px;
}

.black {
	background-color: #1A1423;
	color: white;
}

.white {
	background-color: white;
}

#hamburger a {
	color: var(--black);
	text-decoration:none;
}

#hamburger li {
	padding:15px;
	list-style: none;
	font-size: 16px;
	font-weight: 500;
	/*height: 48px;*/
}

#hamburger ul {
	margin: 0;
	padding-left: 20px; /* Оставьте немного места для самих точек */
	list-style-position: inside; /* Точка будет СНУТРИ блока, а не снаружи */
}

#hamburger a {
	padding: 15px;
}

#history a { color: var(--orange); }

.zoom {
	height: 32px;
	width: 32px;
	display:block;
	position: absolute;
	left:3px;
	/*padding: 5px;         
	margin: -5px;   */
} 

.mode-switch.active {
	background-color: #F78E14;
}

/* mobile */
.width {
	width:58px;
}

.support-form::placeholder {
	/*color:var(--black);*/
	text-decoration:underline;
	text-decoration-color:#FF0000;
}

.support-form {
	border: 1px solid var(--black);
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	padding:8px;
	color: var(--black);
}

.align {
	justify-content:space-between;
}
.grow {
	flex-grow: 5;
}
.paddings {
	padding-left:10px;
	padding-right:10px;
}
.canvas {
	width:100vw; overflow: auto;
}

/* PC */
@media (min-width: 501px) { 
	.align {
		justify-content:center;
	}
	.grow {
		flex-grow: 0;
		margin-left: 5px;
		margin-right: 5px;
	}
	.padding {
		padding-left:13px;
		padding-right:13px;
	}
	.canvas {
		margin:0 auto;
		width:auto;
		height:auto;
	}
	.zoom {
		display: none;
	} 
}

.material {
	flex-shrink: 0;
	width: 80px;
	height: 30px;
	border: 2px solid black;
	border-radius: 4px;
	background-position: center;
	margin-right:7px;
}

.old_b { 
	border:2px solid black;
	Background-color:white;
	border-radius: 4px;
	padding:7px;
}

.material_list {
	font-size: 12px;
}

.magick {
    position: relative;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            90deg,
            #ff0080,
            #7928ca,
            #00d4ff,
            #00ff88,
            #ff0080
        ) border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0% 0;
    animation: border-flow 3s linear infinite;	
}

@keyframes border-flow {
    from {
        background-position: 0 0, 0% 0;
    }
    to {
        background-position: 0 0, 300% 0;
    }
}