body { margin: 0; margin-right: auto; margin-left: auto; background-color: #e6e6e6 } main { flex-grow: 1; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; padding: 5px 0; } .container_100vh { flex-grow: 1; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: center; } .container_main { font-size: 16px; } .container_main ul { margin-bottom: 20px; } .container_main li { list-style-position: inside; margin-bottom: 5px; } .container_main li ul { padding-left: 22px; margin-bottom: unset; margin-top: 5px; } .container_main b { font-size: 18px; margin-bottom: 5px; } .container_main a { color: #203070; transition: .3s color linear; } .container_main a:hover { color: #4477ff; } * { box-sizing: border-box; font-family: monospace; } button, input, ul, li { padding: 0; margin: 0; border: 0 solid transparent; } svg { max-width: 100%; } html { background-color: #e6e6e6; } body { background-color: #dadada; max-width: 1240px; margin: 0 auto; min-height: 100vh; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; } abbr { cursor: help; border-bottom: 1px dotted #000; text-decoration: none; } .container { width: 100%; padding: 0 20px; } .header { position: sticky; top: 0; left: 0; width: 100%; } .header__top { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: #c1c1c1; } .header__logo { flex-basis: 220px; } .logo { font-size: 0; } .logo__link { display: inline-block; font-size: 0; width: 100%; } .search { display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; } .text-input { padding: 0 10px; border: 1px solid #e6e6e6; background-color: #e6e6e6; transition: .3s background-color linear, .3s border linear, .3s box-shadow linear; outline: none; } .search__text-input { width: 260px; margin-right: 5px; } .text-input:hover { background-color: #fff; } .text-input:focus { border: 1px solid #0054a6; background-color: #fff; box-shadow: 0 0px 6px 1px rgba(0, 84, 166, .6); } .text-input::placeholder { font-size: 16px; font-weight: bold; color: #777 } .search__btn { height: 100%; padding: 5px 10px; cursor: pointer; background-color: #dadada; transition: .3s background-color linear, .3s box-shadow linear; } .search__btn img { width: 20px; } .search__btn svg path { fill: #333; transition: .3s fill linear; } .search__btn:hover { background-color: #fff; box-shadow: 0 0px 6px 1px rgba(0, 84, 166, .6) } .search__btn:hover svg path { fill: #0054a6; } .main-menu__list { display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; background: #c1c1c1; } .main-menu__item { list-style: none; font-size: 0; flex-grow: 1; margin-right: 5px; } .main-menu__item:last-child{ margin-right: 0px; } .main-menu__link { display: inline-block; width: 100%; font-size: 22px; font-size: 22px; font-weight: 400; text-transform: uppercase; text-align: center; padding: 4px 0; cursor: pointer; background-color: #e6e6e6; border: 1px solid #e6e6e6; box-shadow: 0 4px 6px 2px rgba(0, 0, 0, .5); text-decoration: none; color: #444; transition: .3s background-color linear, .3s border linear, .3s color linear, .3s box-shadow linear; } .main-menu__link:hover { background-color: #fff; border: 1px solid #0054a6; color: #0054a6; box-shadow: 0 0px 12px 2px rgba(0, 84, 166, .8) } .pagination__link:hover { background-color: #fff; border: 1px solid #808080; color: #0054a6; } .header__mobile-logo { display: none; } .header__mobile-search { display: none; } .footer { margin-top: auto; padding: 25px 0; text-align: center; font-size: 18px; color: #000; background-color: #a7a7a7; } .adder, .jumper { font-size: 18px; color: #000000; } .title { font-size: 24px; text-align: center; text-transform: uppercase; font-weight: bold; } .line { margin-bottom: 10px; } .line:last-child { margin-bottom: 0; } .crazy-base64-span, .table__cell_long-ass { word-break: break-all; } .form__field { margin-bottom: 20px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; } .form__field:last-child { margin-bottom: 0; } .adder__text-input, .jumper__text-input, .search-page__text-input { flex-grow: 1; padding: 5px 10px; margin-left: 15px; } .btn { height: 100%; padding: 5px 10px; cursor: pointer; background-color: #dadada; transition: .3s background-color linear, .3s color linear, .3s border linear, .3s box-shadow linear; } .adder__btn, .jumper__btn, .search-page__btn { display: block; margin-left: auto; margin-right: auto; background-color: #fff; text-transform: uppercase; border: 1px solid #0054a6; color: #0054a6; font-size: 20px; font-weight: bold; } .adder__btn:hover, .jumper__btn:hover, .search-page__btn:hover { background-color: #0054a6; color: #ffffff; border: 1px solid #fff; box-shadow: 0 0px 23px 13px rgba(255, 255, 255, 1) } .pagination__item.active .pagination__link, .pagination__item.active .pagination__link:hover { background-color: #0054a6; color: #ffffff; box-shadow: 0px 0px 0px 0px transparent; } .table { font-size: 18px; border-collapse: collapse; width: 100%; } .table__head { font-weight: bold; text-transform: uppercase; } .table__head .table__row { background-color: transparent !important; color: #000 !important; } .table__row { margin-bottom: 10px; background-color: #dadada; color: #000; } .table__row:nth-child(odd) { background-color: #808080; color: #fff; } .table__row a { color: #203070; transition: .3s color linear; } .table__row:nth-child(odd) a { color: #0054a6; } .table__row a:hover { color: #50a0ff } .table__row:nth-child(odd) a:hover { color: #ddddff; } .table__cell { padding: 8px; } .table__cell_center-bold { text-align: center; font-weight: bold; } .table__cell_date { white-space: nowrap; max-width: 225px; text-align: center; } .table__cell_full-b32 { user-select: all; } .pagination { margin-top: 40px; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: center; } .pagination__item { list-style: none; width: 40px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; font-size: 0; margin-right: 5px; } .pagination__item:last-child { margin-right: 0; } .pagination__link { text-decoration: none; text-transform: uppercase; line-height: 1; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; padding: 10px 0px; cursor: pointer; background-color: #dadada; transition: .3s background-color linear, .3s color linear, .3s border linear, .3s box-shadow linear; border: 1px solid transparent; color: #0054a6; font-size: 18px; font-weight: bold; } .pagination__link_arrow { font-size: 0; position: relative; } .pagination__link_arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; } .pagination__link_arrow_prev::after { transform: translate(-50%, -50%) rotate(-45deg); border-left: 1px solid #0054a6; border-top: 1px solid #0054a6; } .pagination__link_arrow_next::after { transform: translate(-50%, -50%) rotate(45deg); border-right: 1px solid #0054a6; border-top: 1px solid #0054a6; } .error-msg { text-align: center; } .error-msg svg { max-width: 300px; } .hamburger { display: none; } .header-bottom__main-menu-switch { display: none; } .section-head { margin-bottom: 40px; } .disclaimer { font-size: 16px; margin-bottom: 15px; } .disclaimer:last-child { margin-bottom: 30px; } @media screen and (max-width: 920px) { .container { padding: 0 8px; } .header__logo { flex-basis: auto; margin-bottom: 5px; } .logo svg { max-width: 120px; } .header__search .search__text-input { max-width: unset; flex-grow: 1; margin: 0; } .header__top { display: none; } .header__bottom { /* background-color: rgba(30, 30, 80, .8); */ padding: 3px 5px; position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .header__bottom:before { content: ""; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(190, 190, 190, .6); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .header__mobile-logo { display: block; margin-left: 10px; margin-right: auto; width: 100px; position: relative; z-index: 1; } .header__mobile-logo .st2 { /* fill: #fff; */ } .header__mobile-search { display: flex; margin-left: 10px; position: relative; z-index: 1; } .header__mobile-search .search__btn { padding: 3px 5px; } .header__mobile-search svg { width: 15px; } .header__mobile-search .search__text-input { width: 140px; } .hamburger { display: block; } .hamburger__stripes { border-top: 2px solid #333; border-bottom: 2px solid #333; width: 20px; height: 14px; position: relative } .hamburger__stripes:after { content: ""; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; transform: translateY(-50%); background-color: #333; } .main-menu { background-color: #fff; position: absolute; left: 0; top: 100%; height: calc(100vh - 32px); background-color: #e6e6e6; transform: translateX(-100%); transition: .2s transform linear, .1s box-shadow linear; box-shadow: none; } .main-menu__list { flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; background: unset; } .main-menu__item { margin-right: 0; padding: 0 8px; min-width: 30vw; } .main-menu__link { box-shadow: none; border-bottom: 1px solid #aaa } .header-bottom__main-menu-switch:checked ~ .main-menu { transform: translateX(0); box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, .5) } .title { font-size: 16px; } .table { font-size: 14px; } .table__cell { padding: 6px 4px; word-break: break-word; min-width: 48px; } .text-input { padding: 0 6px; font-size: 16px; } .text-input::placeholder { font-size: 14px; } .pagination__link { padding: 3px 0px; font-size: 14px; } .adder__btn, .jumper__btn, .search-page__btn { font-size: 16px; } .footer { font-size: 12px; } } @media screen and (max-width: 620px) { .main-menu__item { min-width: 45vw; } .table__cell_date { white-space: unset; } } @media screen and (max-width: 530px) { .table__cell_full-b32 { display: none; } }