@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap";:root{--header-size: 84px;--header-margin: 30px;--bottom-margin: 40px;--lateral-margin: 16px;--card-height: 90px;--card-row-gap: 30px;--card-column-gap: 40px;--card-border-radius: 6px;--card-favorite-size: 68px;--card-padding-left: 26px;--card-padding-right: 16px;--card-mobile-row-gap: 10px;--card-mobile-padding: 10px;--card-mobile-height: 120px;--dropdown-width: 240px;--dropdown-height: 32px;--background-color: #fcfcfc;--foreground-color: #ffffff;--foreground-color-light: #f5f5f5;--header-gradient: #ececec -32%, #ffffff 124%;--border-color: #979797;--border-color-light: #d6d6d6;--border-color-strong: #2e2e2e;--border-color-selected: #1797ff;--border-color-pagination: #d9d9d9;--text-color-logo: #3b3b3b;--text-color-list: #343434;--text-color-regular: #6b6b6b;--text-color-tab: #606060;--text-color-date: #767676;--text-color-selected-tab: #1797ff;--list-color-selected: #eaeaea;--list-color-shadow: #dad8d8;--pagination-color-selected: #1890ff;--pagination-text-color-selected: #ffffff}@media only screen and (min-width: 768px){:root{--header-size: 114px;--header-margin: 70px;--bottom-margin: 100px;--lateral-margin: 24px}}body{margin:0;font-family:Roboto,sans-serif;background-color:var(--background-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}.App{height:100vh}header{display:flex;align-items:center;width:100%;height:var(--header-size);background-image:linear-gradient(to bottom,var(--header-gradient));box-shadow:0 1px 4px #0015291f}.header__content{width:100%;max-width:1440px;margin:auto;padding:0 var(--lateral-margin)}header h1{color:var(--text-color-logo);font-weight:400;font-size:28px;font-family:Baskerville}header img{height:28px}main{width:100%;padding:var(--header-margin) 0 var(--bottom-margin)}.main__content{display:grid;justify-content:center;width:100%;max-width:1440px;margin:auto;grid-template-rows:.5fr 188px minmax(450px,auto) 1fr;grid-template-columns:1fr;padding:0 var(--lateral-margin)}.main__content>div{display:flex;justify-content:center;width:100%}.main__content-tabs{padding-bottom:5px}.main__content-dropdown{padding:38px 0;justify-content:space-between!important;flex-direction:column;align-items:center}.main__content-dropdown .pagination{display:flex;align-items:center;flex-direction:column;margin-bottom:10px}.main__content-dropdown .pagination-information{display:flex;flex-direction:column;align-items:center}.main__content-dropdown .pagination-information p{color:var(--text-color-regular);margin:0 0 5px}.main__content-dropdown .pagination-information:first-child{margin-top:5px}@media only screen and (min-width: 768px){.main__content{grid-template-rows:.5fr 108px minmax(450px,auto) 1fr}.main__content-tabs{padding-bottom:25px}.main__content-dropdown,.main__content-dropdown .pagination{flex-direction:row}.main__content-dropdown .pagination-information{flex-direction:row;align-items:flex-end}.main__content-dropdown .pagination-information p{margin-right:10px}}.Dropdown{position:relative;width:var(--dropdown-width);user-select:none;-webkit-user-select:none}.Dropdown__header{display:flex;justify-content:space-between;align-items:center;height:var(--dropdown-height);padding:5px 12px;border:1px solid var(--border-color-strong);border-radius:4px;cursor:pointer;background-color:var(--foreground-color)}.Dropdown__list-container{z-index:10;position:absolute;width:100%;box-shadow:0 2px 2px 0 var(--list-color-shadow)}.Dropdown__list{box-sizing:border-box;margin:0;padding:0;font-weight:500;background:#ffffff}.Dropdown__value{display:flex;align-items:center}.Dropdown__value img{width:20px;margin-right:13px}.Dropdown__value span{color:var(--text-color-list);font-weight:400;font-size:14px}.Dropdown__option{display:flex;align-items:center;height:46px;padding-left:12px;list-style:none}.Dropdown__option img{width:24px;margin-right:13px}.Dropdown__option span{color:var(--text-color-list);font-weight:400;font-size:14px}.Dropdown__option:hover{cursor:pointer;background-color:var(--list-color-selected)}.Button{background-color:var(--foreground-color);border:1px solid var(--border-color-light);border-radius:4px;color:var(--text-color-regular);cursor:pointer;height:var(--dropdown-height);padding:0 16px;user-select:none;-webkit-user-select:none;margin-left:10px;transition:.1s ease-out}.Button:hover{background-color:var(--pagination-color-selected);box-shadow:#0000001a 0 1px 1px;color:var(--pagination-text-color-selected)}.Button:focus{border-color:var(--border-color-selected);outline:none}.NewsCard{display:flex;height:var(--card-mobile-height);border:solid 1px var(--border-color);border-radius:var(--card-border-radius);background-color:var(--foreground-color)}.NewsCard:hover>*{opacity:.4}.NewsCard__content{display:flex;flex-direction:column;justify-content:center;padding:0 var(--card-mobile-padding);flex:1;text-decoration:none}.NewsCard__content p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;color:var(--text-color-list);font-size:14px;font-weight:500;line-height:1.43;letter-spacing:.25px}.NewsCard__content-time{margin:0 0 7px;display:flex;align-items:center}.NewsCard__content-time svg{margin-right:8px}.NewsCard__content-time span{margin:0;color:var(--text-color-date);font-size:11px}.NewsCard__favorite{display:flex;justify-content:center;align-items:center;min-width:var(--card-favorite-size);border-radius:0 var(--card-border-radius) var(--card-border-radius) 0;user-select:none;-webkit-user-select:none;background-color:var(--foreground-color-light);justify-self:flex-end}.NewsCard__favorite svg{transition:.25s ease-out}.NewsCard__favorite svg:hover{cursor:pointer;transform:scale(1.2)}@media only screen and (min-width: 768px){.NewsCard{height:var(--card-height)}.NewsCard__content{padding-left:var(--card-padding-left);padding-right:var(--card-padding-right)}}.NewsCardSkeleton{display:flex;height:var(--card-mobile-height);border:solid 1px var(--border-color);border-radius:var(--card-border-radius);background-color:var(--foreground-color);opacity:.6;user-select:none;pointer-events:none}.NewsCardSkeleton__content{display:flex;flex-direction:column;justify-content:center;padding:0 var(--card-mobile-padding);flex:1;text-decoration:none}.NewsCardSkeleton__content p{overflow:hidden;margin:0;color:var(--text-color-list);font-size:14px;font-weight:500;line-height:1.43;letter-spacing:.25px}.NewsCardSkeleton__content-time{margin:0 0 7px;display:flex;align-items:center}.NewsCardSkeleton__content-time svg{margin-right:8px}.NewsCardSkeleton__content-time span{margin:0;color:var(--text-color-date);font-size:11px}.NewsCardSkeleton__favorite{display:flex;justify-content:center;align-items:center;min-width:var(--card-favorite-size);border-radius:0 var(--card-border-radius) var(--card-border-radius) 0;user-select:none;-webkit-user-select:none;background-color:var(--foreground-color-light);justify-self:flex-end}@media only screen and (min-width: 768px){.NewsCardSkeleton{height:var(--card-height)}.NewsCardSkeleton__content{padding-left:var(--card-padding-left);padding-right:var(--card-padding-right)}}.NewsList{display:grid;width:100%;column-gap:var(--card-column-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,550px),1fr));grid-auto-rows:var(--card-mobile-height);row-gap:var(--card-mobile-row-gap)}.NewsList__empty{display:flex;flex-direction:column;width:100%;justify-content:center;align-items:center}@media only screen and (min-width: 768px){.NewsList{grid-auto-rows:var(--card-height);row-gap:var(--card-row-gap)}}.Tabs{display:flex;width:fit-content;user-select:none;-webkit-user-select:none;padding:0}.Tabs__option{display:flex;justify-content:center;align-items:center;width:98px;padding:5px 0;border:1px solid var(--border-color-light);border-radius:0;list-style:none;color:var(--text-color-tab);font-weight:500;font-size:16px;cursor:pointer;transition:.3s ease-in-out}.Tabs__option:first-of-type{border-right:0;border-radius:2px 0 0 2px}.Tabs__option:last-of-type{border-left:1px solid var(--border-color-light);border-radius:0 2px 2px 0}.Tabs__option-selected{border-color:var(--border-color-selected);color:var(--text-color-selected-tab)}
