@font-face {
	font-family: 'Graduate';
	font-style: normal;
	font-weight: 400;
	src: local('Montserrat'),
		local('Montserrat-Black'),
		url(/fonts/Montserrat-Black.eot) format('embedded-opentype'),
		url(/fonts/Montserrat-Black.ttf) format('truetype'),
		url(/fonts/Montserrat-Black.woff) format('woff');
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

select {
  margin: 1rem 0rem 1rem 0rem; 
  padding: 0.5rem 2rem 0.5rem 2rem;
}

a {
  margin: 1rem 1rem;
}

.contacts_rus p
{
	margin: 0px;
	padding: 0px;
}
.contacts_rus p.big
{

}
.header {
            display: grid;
/*            grid-template-columns: 1fr auto 1fr;*/
	    grid-template-columns: 200px 160px auto 200px;
            align-items: center;
            padding: 0px 0px;
}

.samcontacts a
{
	text-decoration: none;
	display: block;
	width: auto;
	text-align: right;
	color: #333;
	margin: 0px;
	font-weight:600;
}

.logo {
            font-weight: bold;
            font-size: 24px;
            color: white;
            background-color: #c00;
            padding: 15px 5px;
            border-radius: 5px;
            display: inline-block;
}

.logo-left {
            justify-self: start;
}

.title {
            font-size: 1.25rem;
            font-weight: bold;
            justify-self: center;
            white-space: nowrap;
}

@media (max-width: 768px) {
	.title {
	    font-size: 1rem;
	}
}



.logo-right {
            justify-self: end;
            margin-right: 1rem;
}
.container {
  display: grid;
  grid-template-columns:[startline]  1fr [middle]  2fr [endline];
  grid-template-rows: auto auto 1fr;
  grid-auto-rows: 2.5fr;
  gap: 10px;
  background-color: #cfcfcf;
  border: 5px solid #a20e20;
} 

.top {
  grid-column: startline / endline;
  grid-template-rows: auto;
}


.side {
  grid-column: startline / middle;
  margin-left: 1rem;
  border: 5px solid #9e9ea3;
  border-radius: 10px;
  background-color: #cfcfcf;
  padding: 20px;
  font-size: 1rem;
}

.left-panel {
            flex: 0 0 350px;
            background-color: #eee;
            padding: 15px;
            border: 1px solid #aaa;
            border-radius: 6px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            /* Выравниваем строки по верхнему краю */
            align-items: start;
}

.form-row {
            display: flex;
            flex-direction: column;
            gap: 5px;
}

.form-row label {
            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
}

.form-row select {
            padding: 8px;
            border: 1px solid #999;
            border-radius: 4px;
            font-size: 14px;
            background-color: white;
            width: 100%;
            font-weight: bold;
}

.side button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  cursor: pointer;
  border: none; 
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  background-color: #b7b7c1;
}
.center {
  grid-column: middle / endline;
  margin-right: 1rem;
  border: 5px solid #9e9ea3;
  border-radius: 10px;
  background-image: url('background.png');
  background-size: cover;
  font-size: 1rem;
  padding: 1rem;
}

.formcontainer {
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: auto;
}

.card {
  margin: 2rem 2rem;
  padding: 2rem 2rem;
  border: 2px solid #ccccd5;
  border-radius: 10px;
  position: relative;
}
  .card_button {
    margin-top: 8px;
    margin-right: 2rem;
    cursor: pointer;
    position: absolute;
    bottom: 1rem;
    right: 2rem;
  }




.model-card {
  padding: 15px;
  background: #a8aaac;
  border-left: 4px solid #a20e20; 
  border-radius: 10px;
}

.model-card button {
  margin-top: 8px;
  margin-right: 2rem;
  padding: 5px 10px;
  cursor: pointer;
  border: none; 
  border-radius: 4px;
  background: #7fafd6;
}

.advanced-options {
            grid-column: span 2;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            align-items: start;
}


.advanced-options2 {
            grid-column: span 2;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            align-items: start;
}

.advanced-options.hidden {
            display: none;
}

.advanced-options2.hidden {
            display: none;
}

.toggle-btn {
    grid-column: span 2;
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    position: relative;
}

.toggle-btn .toggle-text {
    flex: 1;
    text-align: center;
}

.toggle-btn .toggle-icon {
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}

.toggle-btn.active .toggle-icon {
    transform: rotate(180deg);
}

.toggle-btn:hover {
    background-color: #e0e0e0;
}

@media (max-width: 1200px) {
  .left-panel {
    grid-template-columns: 1fr;
  }
  .toggle-btn {
    grid-column: span 1;
  }
  .advanced-options {
    grid-column: span 1;
    display: grid;
    grid-template-columns:  1fr;
    gap: 10px;
    align-items: start;
  }
}

@media (max-width: 768px) {
  .side {
    grid-column: startline / endline;           
  }
  .center {
    grid-column: startline / endline;
  }
	.title {
	    font-size: 1rem;
	}
}