:root {
    --brand-grey: #898D8D;
    --brand-normal-grey: #A3A6A6;
    --brand-light-grey: #f5f5f5;
    --brand-dark-grey: #707373;
    --brand-green: #628842;
    --brand-orange: #D77400;
    --brand-light-orange: #fef3c7;
    --brand-black: #333333;
    --brand-required: #dc3545;
    --black: #000000;
    --white: #ffffff;
}

.site {
    font-family: 'Roboto', sans-serif;
}

.display-none {
    display: none;
}

.main-section {
    padding: 30px 72px;
}
main {
    min-height: calc(100vh - 196px - 413px);
}
.background-grey {
    background-color: var(--brand-light-grey);
}
.background-black {
    background-color: var(--brand-black);
}
.background-green {
    background-color: var(--brand-green);
}
.background-white {
    background-color: var(--white);
}
.background-light-orange {
    background-color: var(--brand-light-orange);
}
.main-section-0 {
    padding: 30px 72px;
}

.page-404 {
    padding: 0 300px;
    border: 1px solid transparent;
    min-height: calc(100vh - 394px - 184px);
    color: #000000;
}

/** ТЕКСТЫ **/
.text-10 {
	font-size: 62%;
}
.text-11 {
	font-size: 69%;
}
.text-12 {
	font-size: 75%;
}
.text-13 {
	font-size: 80%;
}
.text-14 {
	font-size: 88%;
}
.text-16 {
	font-size: 100%;
}
.text-18 {
	font-size: 112%;
}
.text-20 {
	font-size: 125%;
}
.text-22 {
    font-size: 138%;
}
.text-25 {
	font-size: 156%;
}
.text-30 {
	font-size: 187%;
}
.text-32 {
	font-size: 200%;
}
.text-36 {
	font-size: 225%;
}
.text-40 {
	font-size: 250%;
}
.text-48 {
	font-size: 300%;
}

.bold {
	font-weight: bold;
}
.opacity {
   color: var(--brand-normal-grey);
}
.text-decoration-none {
    text-decoration: none;
}

h3, h2, h1 {
	margin: 0;
}

.color-black {
    color: var(--black);
}
.color-white {
    color: var(--white) !important;
}
.color-green {
    color: var(--brand-green);
}
.color-grey {
    color: var(--brand-grey) !important;
}
.color-required {
    color: var(--brand-required) !important;
}
.color-orange {
    color: var(--brand-orange);
}

/** ОБВОДКА **/
.article {
	padding: 20px;
	background-color: #ffffff;
	border: 0.5px solid var(--brand-light-grey);
	border-radius: 6px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}
.article-light {
    padding: 20px;
	background-color: #ffffff;
	border: 0.5px solid var(--brand-light-grey);
	border-radius: 2px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
    display: flex;
    flex-direction: column;
}

/** TODO: ниже посмотреть, что надо в новом проекте, что нет **/
ul{
    list-style: square;
    margin: 1em 0;
}
li {
    margin: 6px 0;
}
li::marker{
    color: #1377C3;
}
a, a:hover, a:visited{
    text-decoration: none;
    color: black;
}
.a-blue-colored{
    color: #1377C3 !important;
}
.button-link{
    width: 100%;
    background: url('../assets/images/arrow-up-right.svg') no-repeat right;
    background-size: 32px;
    background-position-y: 5px;
    padding: 8px 45px 10px 0;
    text-align: left;
}
.border-bottom{
    border-bottom:solid 1px;
    border-color: #e3e3e3;
}
.download-file{
    padding: 6px 6px 6px 2em;
    background: url('../assets/images/download.svg') no-repeat left;
    background-size: 24px;
}
.button-file{
    width: 100%;
    padding: 6px 6px 6px 3em;
    background: url('../assets/images/document-blue.svg') no-repeat left;
    background-size: 28px;
}

/** ОТСТУПЫ **/
.margin-t-md {
	margin-top: 20px;
}
.margin-r-md {
	margin-right: 20px;
}
.margin-r-xs {
	margin-right: 8px;
}
.margin-b-l {
    margin-bottom: 40px;
}
.margin-b-md {
	margin-bottom: 20px;
}
.margin-b-xs {
	margin-bottom: 8px;
}

.padding-12 {
    padding: 12px;
}
.padding-20 {
	padding: 20px;
}
.padding-30 {
    padding: 30px;
}
.padding-48 {
    padding: 48px;
}
.padding-72 {
    padding: 72px;
}
.padding-x-20 {
    padding-left: 10px;
    padding-right: 10px;
}
.padding-x-48 {
    padding-left: 48px;
    padding-right: 48px;
}
.padding-x-72 {
    padding-left: 72px;
    padding-right: 72px;
}

.gap-20 {
	gap: 20px;
}
.gap-32 {
    gap: 32px;
}

/** РАСПОЛОЖЕНИЕ ЭЛЕМЕНТОВ **/
.in-line,
.in-line-404 {
    display: flex;
  	align-items: center;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
.column {
	display: flex;
    flex-direction: column;
}
.space-between {
	display: flex;
	justify-content: space-between;
}
.space-between-column {
    display: flex;
	justify-content: space-between;
}
.grid {
    display: grid;
}
.grid-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.sp-grid-2-column {
    display: grid;
    grid-template-columns: 3fr 1fr;
}
.grid-2fr-1fr {
    grid-template-columns: 2fr 1fr;
}
.grid-280px-1fr {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-1fr-6fr {
    grid-template-columns: 1fr 6fr;
}

.text-align-center {
    text-align: center;
}
.item-center {
    align-items: center;
}
.item-start {
    align-items: flex-start;
}
.item-end {
    align-items: flex-end;
}
.justify-content-flex-end {
    display: flex;
    justify-content: flex-end;
}

/** Выпадающий список **/
.dropdown-container {
    position: relative;
    display: inline-block;
    z-index: 1000;
}
.dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
}
.dropdown-menu {
    position: absolute;
  	right: 0;
  	top: 100%;
  	z-index: 99999 !important;
  	width: max-content;
  	max-width: calc(100vw - 64px);
	background-color: #ffffff;
  	border: 1px solid #e0e0e0;
  	border-radius: 4px;
  	box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  	display: none;
  	padding: 20px;
}
/** Родительские */
.dropdown-menu a {
    text-decoration: none;
    color: #000000;
}
.dropdown-menu .menu-item {
	margin-bottom: 10px;
}
.dropdown-menu a:hover {
    background-color: #f5f5f5;
}
/** Дочерние */
.dropdown-menu-list a {
    text-decoration: none !important;
    color: #000000 !important;
    display: block;
    padding: 10px 0;
}
.accordion-parent.is-closed .sub-menu {
    display: none !important;
}
.accordion-parent.is-open .sub-menu {
    display: block !important;
}
.dropdown-container.is-active .dropdown-menu {
    display: block;
}

/** ИНОЕ **/
.image-full-space {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.mobile-element,
.mini-ipad-element,
.ipad-element {
	display: none;
}

/** Кнопки **/
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px; 
    margin: 0;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 100%;
    line-height: 1 !important;
    box-sizing: border-box !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
}
.btn:disabled {
    background-color: #f5f5f5 !important;
    border-color: #d9d9d9 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
.submit {
	background-color: var(--brand-green);
	color: #ffffff;
    border: 0;
}
.cancel {
    background-color: #ffffff;
    border: 1px solid var(--brand-grey) !important;
}
.orange-btn {
    background-color: var(--brand-orange);
    color: #ffffff;
    border: 0;
}
.background-none {
    background: none;
    border: none;
    padding: 0;
}

/** Кнопка Наверх **/
.button-scroll-up {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translateY(0);

    position: fixed;
    bottom: 25px;
    right: 25px;

    opacity: 0;
    visibility: hidden;
    display: block;

    z-index: 999;
    border: none;
    outline: none;
    cursor: pointer;

    background: var(--brand-normal-grey) url('../assets/images/arrow-white-up.svg') no-repeat center;
    background-size: contain;

    transition: opacity 0.5s, transform 0.5s, visibility 0.5s ease ;
    transition-behavior: allow-discrete;
}
.button-scroll-up.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(20px);
}
.button-scroll-up:active{
    scale: 0.95;
}

/** border **/
.black-border-15 {
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.border-bottom-grey {
    border-bottom: 1px solid #ccd0d4;
}
.border-left-green {
    border-left: 3px solid var(--brand-green);
}

/** Высота **/
.height-72 {
    height: 72px;
}
.height-422 {
    height: 422px;
}
.height-480 {
    height: 480px;
}
.height-560 {
    height: 560px;
}

/** Цвета иконок svg **/
.icon-black {
    filter: brightness(0);
}
.icon-green {
    filter: invert(50%) sepia(35%) saturate(542%) hue-rotate(50deg) brightness(91%) contrast(89%);
}
.icon-white {
    filter: brightness(0) invert(1);
}