/*
 * Общие стиль оформления
 * @since 2021-06
 */

html, body { display: block; height: 100%; font-family: 'Exo 2', sans-serif; }

/** General */
/* Светлый бежевый фон #FFEAD1 */
.passive-text  { color: #707070; } /* Основной цвет текста, неактивных элементов */
.color-text    { color: #4785B2; } /* 0A85C2 Используется для выделения заголовков */
.light-text    { color: #B7C3CC; } /* Цвет текста заголовков групп. Светлый, чтобы не отвлекал внимание от содержания */
.active-text   { color: #000000; } /* Цвет текста активных элементов: поля редактирования, кнопки */
.inactive-text { color: #C0C0C0; } /* Цвет неактивного состояния, используется в Тэгах */
.orange-text   { color: #FF8900; }

/** Forms */
.form-inline { display: flex; }
.form-inline input[type="text"],
.form-inline button { margin: 0 1rem 0 0; }

/** Lists */
.list-inline { list-style-type: none; display: flex; margin-bottom: 2rem; }
.list-inline li { margin-bottom: 0; margin-left: 1rem; }
.list-inline li i { font-style: normal; padding-left: 0.25rem; }

/** Page wrapper */
.page-wrapper { display: flex; height: 100%; flex-direction: column; }
.site-main { flex: 1; }

/** Header */
.site-header {  margin: 0 0 1rem; padding: 1rem 0; border-bottom: 1px solid #c3afcf; }
.site-header .container { display: flex; flex-direction: column; }
.logo { margin-bottom: 1rem; font-size: 2rem; font-weight: 500; }
.logo a:hover { color: #FF8900; }
.search { width: 100%; }
.search .form-inline { margin: 0; }
.search .search-query {  }
.search .search-button { text-transform: uppercase; }

/** Nav-chain */
.nav-chain { margin-bottom: 4rem; }
.nav-chain ul { display: flex; list-style-type: none; margin: 0; padding: 0; }
.nav-chain li { margin: 0; padding: 0; }
.nav-chain .nav-link::after { content: "»"; display: inline-block; padding: 0 0.5rem; color: silver; }

/** Main menu */
.main-menu { text-transform: uppercase; }
.main-menu ul { display: flex; margin: 0; }
.main-menu li { list-style-type: none; margin: 0; padding: 0 1rem; }

/** Pagination */
.pagination { margin: 0; text-align: right; }
.pagination .page-numbers { display: inline-block; border-radius: 0.5rem; margin: 0 0.5rem; padding: 0 1rem; }
.pagination a.page-numbers { border-radius: 0.5rem; padding: 0.5rem; }
.pagination .page-numbers.current { border: 0.1rem solid; color: #9b4dca; }

/** Footer */
.site-footer { margin-top: 4rem; padding: 2rem; background: #f0f0f0; color: #606c76; text-align: center; }

/* Larger than mobile screen */
@media (min-width: 40.0rem) {
	.site-header .container { flex-direction: row; justify-content: space-between; align-items: center; }
	.logo { margin: 0 2rem 0 0; }
	.search { max-width: 360px; }
}

/*
 * Single product page
 */

.product-images { display: flex; flex-wrap: wrap; }
.product-thumb { object-fit: cover; height: 160px; width: 100px; margin: 0 1em 1em 0; border: 1px solid #D0D0D0; border-radius: 1ex; }
.product-thumb.main-image { border-color: #808080; }

/*
 * Product filter page
 */
.productfilter-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.product-list {  }
.product-list .product-item { display: flex; align-items: center; margin-bottom: 1rem; }
.product-list .product-item p { margin: 0; line-height: 1.2; }
.listitem-image { object-fit: cover; height: 48px; width:48px; margin-right: 1em; background: #e0e0e0; border-radius: 5px; }
.listitem-text {}
.listitem-text .title {  }
.listitem-text .hint { color: #808080; font-size: 80%; }

/*
 * Log In page
 */

/* Log in form */
.entrance-form { margin: 0 auto; max-width: 90%; width: 30em; }
.entrance-form .user-panel { display: flex; flex-direction: column; border: 1px solid #c0c0c0; border-radius: 0.5rem; }
.entrance-form .data-panel { margin-bottom: 0.5ex; padding: 0 0 1ex 0; border: 1px solid #C0C0C0; border-left: none; border-radius: 0 1ex 1ex 0; }
.entrance-form .data-panel .title { margin-bottom: 1ex; padding: 0.5rem 1rem; background: #E8E8E8; border-radius: 0 1ex 0 0; border-bottom: 1px solid #C0C0C0; color: #808080; font-size: 80%; }
.entrance-form fieldset { box-sizing: border-box; margin: 0; padding: 0 1rem; width: 100%;}
.entrance-form .inline-row { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.entrance-form .inline-row input[type=checkbox] { margin-bottom: 0; }
.entrance-form .submit { display: flex; justify-content: center; align-items: center; padding: 0 2rem; }
/* Larger than mobile screen */
@media (min-width: 40.0rem) {
	.entrance-form .user-panel { flex-direction: row; }
}

/*
 * User profile
 */
.profile-header { display: flex; justify-content: space-between; align-items: baseline; }
.profile-menu { display: flex; justify-content: flex-end; }
.profile-menu a,
.profile-menu span { margin-left: 1rem; }

/*
 * Expenses
 */
 /* Список чеков */
.voucher-index {  }
.voucher-index td { border: 1px solid #808080; padding: 0.5ex 1ex; }
.voucher-index .title { font-weight: 400; }

.voucher-index .year-list li { list-style-type: none; margin: 0; }
.voucher-index .year-list > li { margin-bottom: 1em; }
.voucher-index .year-list > li > .title { border-bottom: 3px solid; color: #B7C3CC; display: block; font-size: 150%; padding: 0; }
.voucher-index .month-list { margin: 1em 1em 1em 2em; }
.voucher-index .month-list > li { }
.voucher-index .month-list > li:first-child > .title { border-top: none; }
.voucher-index .month-list > li.expanded > .title { border-bottom: 2px solid; }
.voucher-index .month-list > li > .title { border-top: 1px dashed; color: #4785B2; display: flex; align-items: baseline; justify-content: space-between; font-size: 120%; padding: 0.5rem; }
.voucher-index .month-list > li > .title a { color: inherit; }
.voucher-index .month-list > li > .title .total { font-size: 80%; }
.voucher-index .voucher-list { margin: 0 0 1em 2em; font-size: 100%; }
.voucher-index .voucher-list small { font-size: 80%; }
.voucher-index .voucher-list > li { border-top: 1px dashed #C0C0C0; color: #404040; display: flex; justify-content: flex-start; font-size: 100%; padding: 1ex; }
.voucher-index .voucher-list > li:first-child { border-top: none; }
.voucher-index .voucher-list > li .date { display: block; text-align: center; white-space: nowrap; }
.voucher-index .voucher-list > li .shop { display: block; flex-grow: 10; padding-left: 1em; width: 10ex; }
.voucher-index .voucher-list > li .count { display: block; text-align: center; width: 7ex; }
.voucher-index .voucher-list > li .discount { display: block; text-align: right; width: 15ex; }
.voucher-index .voucher-list > li .total { display: block; text-align: right; width: 15ex; }

.voucher-title { border-bottom: 2px solid; color: #4785B2; display: flex; align-items: baseline; font-size: 120%; font-weight: 500; margin-bottom: 2em; padding: 0.25rem 0; }
.voucher-title span, .voucher-title small { color: inherit; }
.voucher-title small { font-size: 60%; }
.voucher-title .date { margin-right: 1em; }
.voucher-title .shop { flex-grow: 10; }

/* Список позиций в чеке */
.voucher-items { margin: 0 2em; }
.voucher-item { border-top: 1px dashed #D0D0D0; padding: 1ex 0; }
.voucher-item .product { display: flex; align-items: baseline; padding: 0.5rem 0; line-height: 1; }
.voucher-item .num   { width: 3ex; }
.voucher-item .title { flex-grow: 10; font-size: 115%; font-weight: 500; text-align: left; }
.voucher-item .cost { font-size: 115%; font-weight: 500; overflow: hidden; text-align: right; }
.voucher-item .cost small { font-size: 60%; font-weight: normal; }
.voucher-item .cost i { padding: 0 0.5ex; }
.voucher-item .cost span { transition: 0.5s; }
.voucher-item .cost .price { position: relative; top: -3.5em; }
.voucher-item .cost .mult  { position: relative; top: -3.0em; }
.voucher-item .cost .qty   { position: relative; top: -2.5em; }
.voucher-item .cost .minus { position: relative; top: -2.0em; }
.voucher-item .cost .disc  { position: relative; top: -1.5em; }
.voucher-item .cost .equal { position: relative; top: -1.0em; }
.voucher-item .cost:hover .price { top: 0; }
.voucher-item .cost:hover .mult  { top: 0; }
.voucher-item .cost:hover .qty   { top: 0; }
.voucher-item .cost:hover .minus { top: 0; }
.voucher-item .cost:hover .disc  { top: 0; }
.voucher-item .cost:hover .equal { top: 0; }
.voucher-item .tags { font-size: 80%; padding: 0.5rem 0; }
.voucher-item .tags form { font-size: 14px; line-height: 1; margin: 0; }
.voucher-item .tag { height: auto; margin: 0; padding: 0; background: none; border: none; color: #C0C0C0; font-size: 13px; font-weight: normal; letter-spacing: 0; line-height: 1; text-transform: none; }
.voucher-item .tag:hover { background: none; text-decoration: underline; }
.voucher-item .tag.selected { color: #808080; }

.voucher-item.header { display: flex; align-items: baseline; border-top: none; font-size: 90%; padding: 1ex 0; }
.voucher-item.header .title { font-size: 100%; font-weight: normal; }

.voucher-footer { border-top: 2px solid #D0D0D0; line-height: 1.5; padding: 1ex 0; }
.voucher-footer .voucher-item { display: flex; align-items: baseline; border: none; padding: 0.5ex 0; }









/* EoF */