@import url('root.css');
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, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, intro-caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figintro-caption, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border:0;
  box-sizing:border-box;
  font:inherit;
  margin:0;
  padding:0;
  outline:none;
  vertical-align:baseline;
  -webkit-appearance:none;
  -webkit-text-size-adjust:100%
}

body {
   color:var(--color-text-main);
   font-family:var(--font-family-text-main);
   font-size:var(--font-size-text-main);
}

:active,:hover,:focus {
  outline:0;
  outline-offset:0
}

.inner {
   margin:0 auto;
   max-width:1200px;
   padding:15px 30px;
}

.flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}


@media all and (max-width:1023.98px){

   .flex {
      flex-wrap:wrap
   }

}

input, select, textarea{
  border:1px solid var(--color-border-main);
  border-radius:var(--border-radius-main);
  display:block;
  font-size:inherit;
  margin-bottom:15px;
  padding:15px;
  width:-moz-available;
  width:-webkit-fill-available
}

select{
  background:var(--color-background-grey);
}

.btn {
   background:var(--color-action);
   border:0;
   border-radius:var(--border-radius-main);
   color:var(--color-link-darkback);
   cursor:pointer;
   display:block;
   outline:0;
   padding:var(--padding-btn);
   position:relative;
   text-align:center;
   text-decoration:none;
}

.link {
   cursor:pointer
}


/* Header */
#header {
   background:var(--color-background-main);
   box-shadow:var(--box-shadow-main);
   position: sticky;
   top:0;
   width: 100%;
   z-index: 200;
}

#sum {
   font-size:var(--font-size-header-main);
}

#sum-full {
   font-size:var(--font-size-text-main);
   text-decoration:line-through
}


/* Calculator */

#calculator-inner {
   max-width:1300px
}

#reset {
   padding:15px 0 0;
   text-align:right
}

.calculator-header {
   font-size:var(--font-size-header-additional);
   padding:45px 0 15px
}

.calculator-block {
   box-shadow: var(--box-shadow-main);
   padding:30px 30px 15px;
}

#calculator-inner .calculator-block > div {
   width:-moz-available;
   width:-webkit-fill-available
}

#calculator-inner .calculator-block > div.separator {
   width:100px;
}

.add {
   margin:45px 0 15px;
}


.modal-open{overflow-y:hidden}
.modal-open *{cursor:pointer}
.modal{bottom:0;display:none;left:0;outline:0;overflow:hidden;position:fixed;right:0;top:0;transition:var(--transition-modal);z-index:1050;-moz-transition:var(--transition-modal);-o-transition:var(--transition-modal);-webkit-overflow-scrolling:touch;-webkit-transition:var(--transition-modal)}
.modal.in{display:block}
.modal-open .modal{background-color:var(--color-background-opacity-darkback);backdrop-filter:var(--filter-main);overflow-x:hidden;overflow-y:auto;-webkit-backdrop-filter:var(--filter-main)}
.fade{opacity:0;transition:var(--transition-modal-fade);-o-transition:var(--transition-modal-fade);-webkit-transition:var(--transition-modal-fade)}
.fade.in {opacity:1}
#modal-dialog{margin:calc(var(--margin-block-main) + 4%) auto 0;position:relative;width:60vw}
@media all and (min-width:1301px){#modal-dialog{width:40vw}}
@media all and (max-width:639.98px){#modal-dialog{margin-top:20%;width:94vw}}
#modal-content{background:var(--color-background-main);border-radius:var(--border-radius-main);display:inline-block;padding:calc(var(--padding-block-main) + 3%) calc(var(--padding-block-main) + 5%);text-align:left;vertical-align:middle;width:100%;white-space:normal;z-index:9999}
#modal-content{position:relative}
#modal-close{background:transparent;border:none;float:right;margin:calc(var(--margin-block-main) - 8%) calc(var(--margin-block-main) - 9%) 0 0;outline:none!important}
#modal-close:active,#modal-close span,#modal-close span:active{border:none;font-size:var(--font-size-header-main);transition:all .1s;transform:rotate(360deg);-moz-transition:all .1s;-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transition:all .1s;-o-transform:rotate(360deg);-webkit-transition:all .1s;-webkit-transform:rotate(360deg)}
.modal-body{margin-top:calc(var(--margin-block-main) + 2%);max-width:100%}
.modal-body .row{flex-wrap:wrap}

/*Dev*/
#header {
  background: url('/img/brand/header.png');
  height: 120px;
}

#calculator-material-header {
  padding-top: 10px;
}

#calculator-edition-header {
   padding-top: 10px;
}

#logo {
  margin-left: -50px;
}

#img-logo {
  width: 160px;
}

/* Контейнер для двух колонок с выравниванием по высоте */
#calculator-columns {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;  /* Колонки будут выровнены по верхнему краю */
   /*gap: 20px;*/
   min-height: 100%;  /* Задаем минимальную высоту контейнера */
}

/* Сделаем колонки одинаковой высоты */
#left-column, #right-column {
   width: 48%;  /* Половина ширины для каждой колонки */
   display: flex;
   flex-direction: column;
   justify-content: flex-start;  /* Элементы внутри колонок выравниваются сверху */
}

/* Контейнер с итоговыми расчетами */
#final-calculations {
   margin-top: 30px;  /* Отступ сверху, чтобы не мешать колонкам */
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   background-color: #003752;
   padding-bottom: 40px;
}

#order-btn  {
   position: relative;
}

#sum-background  {
   position: relative;
}

#sum {
   width: 100%;
   text-align: left;
   position: relative;
   color: #003752;
} 

#discount {
   width: 100%;
   text-align: left;
   position: relative;
   color: #85B3C6;
}

#date-delivery  {
   position: relative;
   color: #85B3C6;

#arrow  {
   
}