/* конфиг */
:root {
  --atom: 5px;

  --black: #060A22;
  --grey: #535252;
  --lgrey: #a8a8a8;
  --bgrey: #F8F8F8;
  --blue: #3e66f3;
  --red: #ef3737;
  --green: #00bc8b;
  --yellow: #ef7f1a;
  --orange: #EF7F1A;
  --wrapper: 1200px;

  --font-size: calc(3 * var(--atom));
  --font-family: Roboto,sans-serif;
  --font-head-family: 'BebasNeue',sans-serif;

  --m: var(--atom);
  --m2: calc(3 * var(--m));
  --m3: calc(5 * var(--m));
  --m4: calc(8 * var(--m));
  --m15: calc(2 * var(--m));
}
body { font-size: var(--font-size); font-family: var(--font-family)}
._wrapper {max-width: var(--wrapper); width: 100%;}

/* flex */
._flexfix {flex-shrink: 0 !important; -webkit-flex-shrink: 0 !important;; flex-grow: 0 !important;; -webkit-flex-grow: 0 !important;}
.flex-grow > * {flex: 2 1 auto;}

/* маргины и гапы */
.m0 {margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: var(--m) !important; }
.mb1 { margin-bottom: var(--m) !important; }
.mt2 { margin-top: var(--m2) !important; }
.mb2 { margin-bottom: var(--m2) !important; }
.mt3 { margin-top: var(--m3) !important; }
.mb3 { margin-bottom: var(--m3) !important; }
.mt4 { margin-top: var(--m4) !important; }
.mb4 { margin-bottom: var(--m4) !important; }
.ml1 { margin-left: var(--m) !important; }
.mr1 { margin-right: var(--m) !important; }
.fg1 { gap: calc( var(--m)) !important; }
.ml2 { margin-left: var(--m2) !important; }
.mr2 { margin-right: var(--m2) !important; }
.fg2 { gap: var(--m2) !important; }
.ml3 { margin-left: var(--m3) !important; }
.mr3 { margin-right: var(--m3) !important; }
.ml4 { margin-left: var(--m4) !important; }
.fg4 { gap: var(--m4) !important; }

/* педдинги */
.pd0  { padding: 0 !important; }
.pd1  { padding: var(--m) !important; }
.pdt1  { padding-top: var(--m) !important; }
.pdb1  { padding-bottom: var(--m) !important; }
.pd2  { padding: var(--m2) !important; }
  @media(min-width:767px) { .pd4-lg { padding: var(--m4) !important; } }
.pd3  { padding: var(--m3) !important; }
.pd4  { padding: var(--m4) !important; }
.pdg2 { padding: 0 var(--m2) !important; }
.pdl2 { padding-left: var(--m2) !important; }
.pdr0 { padding-right: 0 !important; }
.pdl0 { padding-left: 0 !important; }
.pdt0 { padding-top: 0 !important; }
.pdv4 { padding-top: var(--m4) !important; padding-bottom: var(--m4) !important;}
.pdl3 { padding-left: var(--m3) !important; }
.pdr3 { padding-right: var(--m3) !important; }
.pdb3 { padding-bottom: var(--m3) !important; }

/* текст форматирование цвета */
.text-grey   { color: var(--grey) !important; fill: var(--grey);}
.text-lgrey  { color: var(--lgrey) !important; fill: var(--lgrey);}
.text-blue   { color: var(--blue) !important; fill: var(--blue); }
.text-red    { color: var(--red) !important; fill: var(--red); }
.text-green  { color: var(--green) !important; fill: var(--green); }
.text-yellow { color: var(--yellow) !important; fill: var(--yellow); }
.text-black  { color: var(--black) !important; fill: var(--black); }
.text-orange { color: var(--orange) !important; fill: var(--orange); }
.text-white  { color: #fff !important; fill: #fff; }

/* фон */
.bg-white { background: #fff; }
.bg-bgrey { background: var(--bgrey); }
.bg-grey { background: var(--grey); }

.bg-lgrey { background: var(--lgrey); }
.bg-green { background: var(--green); }
.bg-red { background: var(--red); }
.bg-blue { background: var(--blue); }
.bg-yellow { background: var(--yellow); }

/* grid */
.d-grid { display: grid;  }
.d-grid.--c3 {grid-template-columns: repeat(3,1fr);}
.d-grid .--sp2 {grid-column: span 2}
.d-grid .--sp3 {grid-column: span 3}

/* текст форматирование начертание */
.text-upper  { text-transform: uppercase !important; }
.text-nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-header { font-family: var(--font-head-family) !important; font-weight: 700 !important; }

/* текст форматирование жирность */
.text-weight-100 { font-weight: 100 !important; }
.text-weight-500 { font-weight: 500 !important; }
.text-weight-600 { font-weight: 600 !important; }
.text-weight-700 { font-weight: 700 !important; }
.text-weight-800 { font-weight: 800 !important; }

/* текст форматирование размер */
.text-size-100 { font-size: 1em !important; }
.text-size-120 { font-size: 1.2em !important; }
.text-size-150 { font-size: 1.5em !important; }
.text-size-140 { font-size: 1.4em !important; }
.text-size-200 { font-size: 2em !important; }
.text-size-75 { font-size: 0.75em !important; }
.text-size-50 { font-size: 0.5em !important; }
.cursor-pointer { cursor: pointer }

/* abstract */
._border--no { border: none !important; }
._h100 { height: 100%; }
._box { box-sizing: border-box; }
._cursor_help { cursor: help; }
._block { display: block !important; }
._hide { display: none !important; }
._dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); background: inherit; border-radius: 50%; margin-right: calc(var(--dot-m) - var(--dot-size)); flex-shrink: 0; }
._border-radius { border-radius: var(--m2); }
._border-radius--small { border-radius: var(--m); }
._line { line-height: 1em; }
._linecrop1 { overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1; line-clamp: 1;-webkit-box-orient: vertical; }
._linecrop2 { overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; line-clamp: 2;-webkit-box-orient: vertical; }
._linecrop3 { overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3; line-clamp: 3;-webkit-box-orient: vertical; }
._relative { position: relative; }
._inline { display: inline-block; }
._shadow--drop { box-shadow: 3px 3px 6px rgb(3 3 3 / 32%); }
._shadow { box-shadow: 0 0px 3px rgb(0 0 0 / 9%), 0 0px 3px rgb(0 0 0 / 9%); }
._shadow-l { box-shadow: 0 0px 15px rgb(0 0 0 / 40%); }
._shadow:hover, ._shadow.active {box-shadow: 0 4px 16px 2px rgb(0 26 52 / 16%);transform: translateY(-2px);transition: var(--transition);}
._shadow--bottom { box-shadow: 0 3px 3px rgb(0 0 0 / 9%), 0 3px 3px rgb(0 0 0 / 9%); }
._dashed { padding-bottom: 1px; border-bottom: 1px dashed currentColor; }
.rotate-90 {-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
.rotate180 {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.rotate90 {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
._imgcircle {border-radius: 50%; overflow: hidden; -o-object-fit: cover; object-fit: cover; flex-shrink: 0;}
._no--after:after {display: none !important;}
._img {width: 100%; height: auto; object-fit: cover; }
._img.--a43 {aspect-ratio: 4/3}
._img-background {background-repeat: no-repeat; background-position: center; background-size: cover;}
._darken:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;background: -webkit-gradient(linear, left bottom, left top, color-stop(-96.37%, #000000), to(rgba(0, 0, 0, 0.2)));background: -o-linear-gradient(bottom, #000000 -96.37%, rgba(0, 0, 0, 0.2) 100%);background: linear-gradient(0deg, #000000 -96.37%, rgba(0, 0, 0, 0.2) 100%); border-radius: var(--m)}
._z1 {z-index: 1}
.pull-right {float:right}
.va-text-top {vertical-align: text-top}
.divider {border-top: 1px dashed var(--lgrey); margin: var(--m3) var(--m)}
.divider-solid {border-top: 1px solid #DADADE; margin: var(--m2) var(--m)}
.vertical-middle {vertical-align: middle;}
.disabled {pointer-events: none; opacity: 0.7;}
.pull-left {float: left;}
.file-img {width: 28px; height: 39px;}
.fix-head tr th {position: sticky; top: 0; z-index: 1;}
.bb {border-bottom: 1px dashed var(--lgrey);}

/* формы */
button { border: none; border-radius: var(--m); padding: var(--m15) var(--m4); }
  button:hover {opacity: 0.8; }
._input-w { position: relative; }
._input-w > * {line-height: 1em;}
  ._input { border: none; border-bottom: 1px solid var(--grey); padding: 0 0 var(--m); background: transparent; outline: none; width: 100%; }
    ._input-w. .--error._input { border-bottom: 1px solid var(--red); }
  ._input::placeholder { color: var(--lgrey); }
._input-w.required label:after {content: " *"; color: var(--red)}
._input-w select, ._input-w select:focus { background-color: transparent; border: none; padding: 1.5px 0 var(--m); border-bottom: 1px solid var(--grey); border-radius: 0; box-shadow: none; }


/* размеры */
.vhm-100 { height: 100vh;}
.vhm-40 { height: 40vh;}
.hmin-100 {min-height: 100%;}
.w-50 {width: 50%;} .w-55 {width: 55%;} .w-90 {width: 90%;} .w-40 {width: 40%;} .w-45 {width: 45%;} .w-48 {width: 48%;} .w-3 {width: 33.333333%;} .w-60 {width: 60%;} .w-70 {width: 70%;}  .w-30 {width: 30%;} .w-23 {width: 23%;}  .w-20 {width: 20%;} .w-80 {width: 80%;} .w-25 {width: 25%;} .w-100 {width: 100%;} .w-10 {width: 10%;} .w-15 {width: 15%;}
.w-auto { width: auto !important; }
.box-50 {width: 50px; height: 50px;}
.box-100 {width: 100px; height: 100px;}
.box-150 {width: 150px; height: 150px;}
.h-100 {height: 100px} .h-200 {height: 200px} .h-300 {height: 300px} .h-400 {height: 400px}

/* картинки */
._avatar {border-radius: 50%;overflow: hidden;width: 50px;height: 50px;-o-object-fit: cover;object-fit: cover;padding: 5px;flex-shrink: 0;}
._svg100 svg { height: 1em; flex-shrink: 0; max-width: none; }
._svg120 svg { height: 1.2em; flex-shrink: 0; max-width: none; }
._svg150 svg { height: 1.5em; flex-shrink: 0; max-width: none; }
._svg200 svg { height: 2em; flex-shrink: 0; max-width: none; }

/* кастомные скроллы */
._scroll {overflow-y: auto;}
._scroll._scroll-x {overflow-y: hidden; overflow-x: auto;}
._scroll::-webkit-scrollbar-button {height: 0;}
._scroll::-webkit-resizer {height: 0;}
._scroll::-webkit-scrollbar-track {background: var(--lgrey);}
._scroll::-webkit-scrollbar-thumb {background-color: var(--blue);}
._scroll::-webkit-scrollbar-thumb:hover {background-color: var(--blue);}
._scroll::-webkit-scrollbar {width: 3px; height: 3px;}
._scroll::-webkit-scrollbar-button:decrement:start,
._scroll::-webkit-scrollbar-button:increment:start,
._scroll::-webkit-scrollbar-button:decrement:end,
._scroll::-webkit-scrollbar-button:increment:end {display: none;}

/* badge */
.badge.badge-success {background: var(--green)}
.badge.badge-danger {background: var(--red)}
.badge.badge-info {background: var(--blue)}
.badge.badge-warning {background: var(--yellow)}