/* RESET
http://meyerweb.com/eric/tools/css/reset/ v5.0.1 | 20191019 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } /* HTML5 hidden-attribute fix for newer browsers */ *[hidden] { display: none; } body { line-height: 1; } menu, ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@300;400;500;600;700&display=swap');

/* Vars */
:root {
  --red: #df0000;
  --grey-h: #ebe7e7;
  --white: #ffffff;
  --black: #000000;
  --bg: #f6f6f9;
  --border: #d8d8d8;
}


/* Core */
body { background-color: var(--bg); font-family: 'Noto Sans Display', sans-serif; font-size: 16px; line-height: 24px; }
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.body { width: clamp(320px, 90%, 800px); margin: 0 auto }
.break { display: none }
br { display: none }
/* Header */
header { height: auto; background-color: var(--white); padding: 18px 0}
header img { height: auto; display: block; width: 800px;}


#orderFormDiv { }
.mainHeader { font-size: 28px; line-height: 36px; padding-top: 32px; padding-bottom: 16px; font-weight: 300}
.introText {padding-bottom: 32px; font-size: 16px; line-height: 24px; font-weight: 300}

.colLeft { font-size: 14px; line-height: 20px; padding-bottom: 8px; padding-top: 24px; }
.formSection, .captha, #successDiv { padding: 32px; background: var(--white); margin-bottom: 32px}
.sectionHeader {font-size: 20px; line-height: 36px; padding-bottom: 8px; font-weight: 600}
input[type=text], input[type=file], select,textarea {  font-family: 'Noto Sans Display', sans-serif; font-size: 16px; line-height: 24px; padding: 12px; border:1px solid var(--border); display: block; width: 100%; outline: none; }
input[type=text]:hover, input[type=file]:hover ,select:hover,textarea:hover { background: var(--bg) }
input[type=text]:focus, input[type=file]:focus ,select:focus,textarea:focus { background: var(--bg); border:1px solid var(--black); }
textarea { min-width: 100%; max-width: 100%}
.colRight { position: relative;}
select {-webkit-appearance: none; -moz-appearance: none;}
.colRight:has(select):after { content:''; display:block; width: 5px; height: 5px; border-left:1px solid var(--black); border-bottom: 1px solid var(--black); transform: rotate(-45deg); position: absolute; right: 19px; top: 19px;}
.addressCity, .streetCity { display: flex; gap:24px;}
.addressCity fieldset:nth-child(2) { width: 100% }
.streetCity fieldset:nth-child(1) { width: 100% }
.streetCity fieldset:nth-child(2) div { width: 100%; display: flex; gap:8px; align-items: center;}
#contactFormGroup { display: flex; gap:16px; }
#contactFormGroup input { display: none }
#contactFormGroup input:checked + label:before { background: var(--black)}
#contactFormGroup label { display: flex; gap:8px; align-items: center; }
#contactFormGroup label:before { content: ''; display: block; width: 16px; height: 16px; border-radius: 16px; border:1px solid var(--border); box-shadow: 0 0 0 4px var(--white) inset}
#contactFormGroup label:hover:before { background: var(--border)}

.customerAgreement span { font-size: 14px; line-height: 20px;}
.aggrements label { display: flex; gap:16px;}
.aggrements { display: flex; gap:16px; flex-direction: column;}
.aggrements label a { font-size: 14px; line-height: 20px;}
.aggrements label > .colLeft40 input { display: none}
.aggrements label > .colLeft40 span { box-shadow: 0 0 0 4px var(--white) inset; content: ''; display: block; width: 16px; height: 16px; border-radius: 2px; border:1px solid var(--border); background: var(--white); margin-top: 4px }
.aggrements label:hover .colLeft40 span {background: var(--border)}
.aggrements label .colLeft40 input:checked + span { box-shadow: 0 0 0 4px var(--white) inset;  background: var(--black); }

.captha { margin-top: 24px; display: flex; gap:8px; flex-direction: column; }
.captha > div { display: flex; gap:16px}
#reloadCaptcha { padding: 16px; cursor: pointer; border:1px solid var(--border);  background: var(--white); border-radius: 0}
#reloadCaptcha:hover { background: var(--bg)}

form { margin-bottom: 80px }
#sendButton, #newFormButton { cursor: pointer; display: block; background: var(--white); color: var(--black); border:none;  font-family: 'Noto Sans Display', sans-serif; font-size: 16px; line-height: 24px; padding: 16px; font-weight: 600; width: 100%;}
#sendButton:hover, #newFormButton:hover { background: var(--grey-h)}

.error { font-size: 14px; line-height: 20px; padding-top: 8px; color: var(--red);}
select.error, textarea.error, input[type=text].error { border-color: var(--red)}

.validation { padding: 16px; border: 1px solid var(--red); color: var(--red); background: #FCE6E6; margin: 24px 0}

#successDiv  { margin: 32px 0}
#successDiv p strong {  font-size: 28px; line-height: 36px;  }
#spanQlId { font-weight: 600; display: block; }
#newFormButton {  margin-top: 24px;}

@media (max-width: 800px) {
  .streetCity { flex-direction: column; }
  .streetCity .colRight input { width: 100% !important; }
}

.datepicker_newMonth { display: unset; padding: 0px; width: 50%; -webkit-appearance: auto; -moz-appearance: auto; --bg: #333; }
.datepicker_newYear { display: unset; padding: 0px; width: 50%; -webkit-appearance: auto; -moz-appearance: auto; --bg: #333; }