@import url(./fonts.css); * { margin: 0; } html, body { height: 100%; } body { background: #fff; font-family: 'Alegreya Sans', sans-serif; font-size: 12px; color: #000; } .footer { display: flex; justify-content: right; margin-right: 1rem; width: 100%; gap: 0.5rem; } p { font-family: 'Roboto', sans-serif !important; font-size: 16px; } .0 -legend li { font-family: 'Roboto', sans-serif !important; font-size: 16px; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } } content { min-height: 100%; /* equal to footer height */ margin-bottom: -100px; display: block; } content:after { content: ""; display: block; } footer, content:after { height: 100px; } footer { width: 100%; text-align: center; background-color: #f7f7f7; z-index: 1000; padding: 25px; color: black; display: none; } div#home-content { margin-top: 30px; margin-bottom: 30px; text-align: justify; } div#home-content p { font-family: Roboto; line-height: 28px; font-weight: 300; font-size: 16px; } .data-home { background: #2f80ed; border-radius: 100px; padding: 10px 10px 10px 5px; color: #ffffff; display: inline-block; font-family: 'Roboto', sans-serif !important; text-align: center; font-size: 16px; margin-top: 20px; padding-left: 5px; padding-right: 20px; } .data-home:hover, .data-home:focus { background: white; color: #2f80ed; text-decoration: none; border: 2px solid #2f80ed; } h1 { font-size: 21px; font-weight: 700; color: #4f4f4f; margin-bottom: 10px; font-family: 'Alegreya Sans', sans-serif; margin-top: 15px; /*border-bottom: 1px solid #286090;*/ } #leftMenu h1 { color: black; } h2 { font-weight: 400; text-shadow: 1px 1px 1px #000; padding-bottom: 10px; margin-bottom: 20px; color: #286090; font-style: italic; } h3 { font-weight: 600; text-shadow: 1px 1px 1px #000; font-style: italic; } div.container-fluid { } div.box { background-color: #f8F8F8; border: 2px solid #286090; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 10px; margin-bottom: 15px; } hr.half-hr { width: 50%; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; } hr.data-hr { border-color: #286090; } .centered { text-align: center; } .navbar-custom { background-color: white; border-bottom: 0px solid white; margin-bottom: 0px; min-height: 70px; } .navbar-custom .navbar-brand { position: relative; padding: 0px; width: auto; height: 70px; background-color: white; } .navbar-custom .navbar-brand img { max-height: 70px; max-width: 200px; padding-top: 5px; width: 200px; } .navbar-custom .navbar-text { color: #000; } .navbar-custom .navbar-nav { margin-right: 0px; padding-right: 0px; max-height: 60px; } .navbar-custom .navbar-nav li { float: right; } .navbar-custom .navbar-nav li.return { float: left; } .navbar-custom .navbar-title { color: #fff; font-size: 30px; font-weight: bold; font-family: sans-serif; line-height: 1.2; padding: 5px 0 0 0px; float: left; max-width: 40%; } @media ( max-width: 1400px ) { .navbar-custom .navbar-title { font-size: 30px !important; } .navbar-custom .navbar-title .navbar-subtitle { font-size: 12px !important; } } @media ( max-width: 1200px ) { .navbar-custom .navbar-title { font-size: 20px !important; } .navbar-custom .navbar-title .navbar-subtitle { font-size: 12px !important; } } .navbar-nav .fa-stack { font-size: 15px; text-align: center; } .navbar-custom .navbar-title a, .navbar-custom .navbar-title a:hover { color: #0e2031; text-decoration: none; font-family: 'Alegreya Sans', sans-serif; } .navbar-custom .navbar-title .navbar-subtitle { font-weight: normal; font-size: 15px; padding-bottom: 10px; font-family: 'Alegreya Sans', sans-serif; } .navbar-custom .navbar-nav > li > a { color: #0e2031; font-size: 14px; -webkit-border-radius: 100px; -moz-border-radius: 100px; margin: 10px 10px 0px 0px; padding: 8px; border: 2px solid #0e2031; font-weight: 400; border-radius: 100px; font-family: 'Roboto', sans-serif; } .navbar-custom .navbar-nav > li.return > a { color: #0e2031; font-size: 14px; margin: 10px 10px 0px 10px; padding: 10px; border: none; padding-right: 25px; } .navbar-right li a { padding-left: 15px !important; } .padding-right-5 { padding-right: 5px !important; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus { color: #2F80ED; background-color: white; border: 2px solid #2F80ED; } .navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus { color: #2F80ED; background-color: #fff; border: 2px solid #2F80ED; } .navbar-custom .navbar-nav > .disabled > a, .navbar-custom .navbar-nav > .disabled > a:hover, .navbar-custom .navbar-nav > .disabled > a:focus { color: #cccccc; background-color: transparent; } .navbar-custom .navbar-toggle { border-color: #0e2031; margin-top: 30px; } .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus { background-color: #0e2031; } .navbar-custom .navbar-toggle:hover .icon-bar, .navbar-custom .navbar-toggle:focus .icon-bar { background-color: white; } .navbar-custom .navbar-toggle .icon-bar { background-color: #0e2031; } .navbar-custom .navbar-collapse, .navbar-custom .navbar-form { border-color: white; max-height: 70px; } .navbar-custom .navbar-nav > .dropdown > a:hover .caret, .navbar-custom .navbar-nav > .dropdown > a:focus .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } .navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus { background-color: #286090; color: #ffffff; } .navbar-custom .navbar-nav > .open > a .caret, .navbar-custom .navbar-nav > .open > a:hover .caret, .navbar-custom .navbar-nav > .open > a:focus .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } .navbar-custom .navbar-nav > .dropdown > a .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } .navbar-custom .navbar-link { color: #ffffff; } .navbar-custom .navbar-link:hover { color: #ffffff; } /* header message user start */ .closeButtonMessage { font-family: "Alegreya Sans", sans-serif; font-size: 15px; font-weight: 400; padding: 20px; border: 1px solid lightgray; text-align: center; background: lightgoldenrodyellow; display: block; } .closeButtonMessage a { float: right; margin-right: 20px; font-size: 16px; } /* header message user end */ #wrapper { min-height: 100%; height: 100%; position: relative; } .btn-border { border: 1px solid #fff; } .divForm { padding: 0px 10px; } .radio-box input[type=radio] { display: none; margin: 10px; } .radio-box input[type=radio] + label { display: inline-block; font-family: Roboto; padding: 5px 10px; width: 100%; font-weight: 400; font-size: 16px; border-width: 2px; white-space: normal; transition: all 0.5s; } .radio-box input[type=radio][disabled=disabled] + label { cursor: not-allowed; background-color: #F2F2F2; color: gray; } .radio-box input[type=radio]:checked + label { color: white; background-color: #0e2031; border: 1px solid #0e2031 !important; } .radio-box input[type=radio]:checked + label:hover { color: black; background-color: white; border-color: 1px solid white; } .radio-box input[type=radio] + label { color: black; background-color: transparent; border: 1px solid #0e2031 !important; } .radio-box input[type=radio] + label:hover { color: white; background-color: #0e2031; border: 1px solid #0e2031 !important; } .glyphicon-flip { transform: scaleX(-1); -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); } .glyphicon-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /***** Toggle button *****/ .cmn-toggle { position: absolute; visibility: hidden; } .cmn-toggle + label { display: inline-block; position: relative; cursor: pointer; outline: none; user-select: none; } input.cmn-toggle-round-flat + label { padding: 2px; width: 50px; height: 25px; top: 6px; background-color: #2F80ED; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after { display: block; position: absolute; content: ""; } input.cmn-toggle-round-flat + label:before { top: 3px; left: 3px; right: 3px; bottom: 3px; background-color: #0E2031; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round-flat + label:after { top: 5px; left: 5px; bottom: 5px; width: 17px; background-color: #2F80ED; border-radius: 52px; transition: margin 0.4s, background 0.4s; } input.cmn-toggle-round-flat:checked + label { background-color: white; } input.cmn-toggle-round-flat:checked + label:after { margin-left: 22px; background-color: white; } label.label-form { padding-top: 5px; font-size: 13px; font-size: 18px; font-weight: 700; font-family: 'Alegreya Sans', sans-serif; color: #4f4f4f; margin-bottom: 0; } button.export-btn:not(.button-download-hidden) { font-weight: 400; font-family: 'Roboto', sans-serif !important; font-size: 16px; display: inline-block; margin: -2px; padding: 5px 10px; width: 100%; word-wrap: normal; background: transparent; border-color: #0e2031; color: #0e2031; } button.export-btn { background-color: white; border-color: white; } button.export-btn:focus, button.export-btn:hover, button.export-btn:active, button.export-btn:active:focus, button.export-btn:hover:disabled { outline: 0px auto -webkit-focus-ring-color; background-color: #0e2031 !important; border-color: #0e2031 !important; color: white !important; } button.option-btn { padding: 15px; font-weight: 900; border-width: 2px; text-shadow: 1px 1px 1px #000; word-wrap: normal; } button.option-btn:focus { outline: 0px auto -webkit-focus-ring-color } /* Margin */ .no-margin { margin: 0px !important; } .light-margin { margin: 5px; } .margin { margin: 15px; } .heavy-margin { margin: 25px; } .no-margin-bottom { margin-bottom: 0px; } .light-margin-bottom { margin-bottom: 5px; } .margin-bottom { margin-bottom: 15px; } .heavy-margin-bottom { margin-bottom: 25px; } .no-margin-top { margin-top: 0px; } .light-margin-top { margin-top: 5px; } .margin-top { margin-top: 15px; } .heavy-margin-top { margin-top: 25px; } .no-margin-left { margin-left: 0px; } .light-margin-left { margin-left: 5px; } .margin-left { margin-left: 2px; } .heavy-margin-left { margin-left: 25px; } .no-margin-right { margin-right: 0px; } .light-margin-right { margin-right: 5px; } .margin-right { margin-right: 15px; } .heavy-margin-right { margin-right: 25px; } /* Modal */ .modal-header { border-top-left-radius: 6px; border-top-right-radius: 6px; background-color: #0E2031; border-bottom: 2px solid #efefef; } .modal-header h3 { text-shadow: none; color: white; font-style: normal; } .modal-header button { color: white; text-shadow: none; opacity: 0.7; } .modal-header button:hover { opacity: 1; color: #286090; } .modal-body { background: #fff; font-family: "Open sans", serif; color: #000; } .modal-body textarea { max-width: 100%; min-height: 100px; } .modal-footer { background: #0E2031; color: white; text-shadow: none; border-top: 2px solid #efefef; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .modal-footer .btn + .btn { background-color: #2F80ED; border-color: #2F80ED; } .input-group-addon { text-shadow: none; } .input-group-addon:last-child { color: white; background-color: #2F80ED; } .small-icon { color: #286090; } .small-icon:hover { color: white; } canvas#graphCanvas { padding: 15px; min-height: 400px !important; } .footer-attribution > p { font-size: 12px !important; } div#tableDiv { padding: 15px; margin-bottom: 50px; } thead { margin-bottom: 3px; } thead th { text-align: left; background-color: #797f84; color: #fff; vertical-align: middle !important; border-bottom: 0px; } thead th:not(:last-child) { border-right: 1px solid #ddd; } thead th:first-child, tbody td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } thead th:last-child, tbody td:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } thead th.th-invisible, thead th.th-invisible:hover { background-color: transparent !important; border: none !important; } thead th.th-indicator { border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom: 1px solid #ddd !important; min-width: 200px; padding: 10px; } thead th.th-description { border-bottom: 3px solid #ddd !important; border-top: 1px solid #ddd !important; min-width: 200px; padding: 10px; } thead th.th-header { min-width: 150px; padding: 10px; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #ddd; } .table-hover > tbody > tr:hover { background-color: #cdcdcd; } .table tbody td:not(:last-child) { vertical-align: middle !important; border-right: 1px solid #ddd; } .table tbody td.td-text { text-align: left; } .table tbody td.td-number { text-align: right; } .pagination { text-shadow: none; } .pagination .paginate_button.previous.disabled a, .pagination .paginate_button.next.disabled a { background-color: #ddd; } .tab-pane { transition: all 1s; } #graphDisplay { transition: all 1s; padding-left: 25px; margin: 10px 5px; min-height: 60vh; } #graphDisplay .loading { padding: 20px; } #graphDisplay p { font-size: 14px; font-family: Roboto; line-height: 28px; font-weight: 300; } #graphDescription p { font-family: Roboto; line-height: 20px; font-weight: 300; margin-bottom: 5px; } #graphLegend ul.chart-legend { list-style-type: none; padding-left: 0px; } #graphLegend ul { font-size: 16px; font-weight: 300; } #graphSource p, #graphNote p { font-size: 12px; margin-bottom: 0 !important; line-height: 20px; } #graphLegend ul.chart-legend li { display: inline-block; width: 20%; min-width: 300px; font-family: sans-serif; font-style: italic; font-size: 16px; font-weight: 500; word-wrap: break-word; word-break: break-word; vertical-align: text-top; padding: 5px; } #graphDescription h1 { margin-top: 0; } #graphLegend ul.chart-legend li .chart-legend-box { display: inline-flex; width: 30px; height: 20px; margin-right: 10px; } #graphLegend ul.chart-legend li .chart-legend-label { cursor: pointer; opacity: 0.8; } #graphLegend ul.chart-legend li .chart-legend-label.data-not-visible { text-decoration: line-through; } #euAverageDiv { opacity: 1; transition: opacity 1s; } #euAverageDiv.hidden-average { opacity: 0; height: 0; } #filter-panel, #export-panel { position: fixed; top: 150px; margin-bottom: -3px; z-index: 1000; max-width: 30%; } #filter-panel { float: left; left: 0; } #export-panel { float: right; right: 0; } #filter-content, #export-content { background-color: #fff; padding: 0 15px 15px 15px; min-height: 200px; border: 2px solid #286090; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); border-radius: 0px; } #leftMenu .form-control { color: black; background: transparent; border-radius: 4px; height: 35px; } #leftMenu .form-control option { color: black; } #filter-content { border-left: none; } #export-content { border-right: none; float: right; } #filter-tab, #export-tab { text-align: center; padding: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(00deg); } #export-tab span { float: right; } #export-tab.export-tab-hide { margin-right: -50px; } #filter-tab span, #export-tab span { display: block; width: 50px; color: #fff; font-size: 20px; cursor: pointer; background-color: #00529E; opacity: 0.7; padding: 10px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } #filter-tab span:hover, #export-tab span:hover { opacity: 1; } #leftMenu { background-color: #f7f7f7; transition: all 1s; border: 1px solid #f7f7f7; z-index: 100; color: black; } #leftMenu.menu-hide { width: 1px; transition: all 1s; } #leftMenu.menu-hide div, #leftMenu.menu-hide h1 { display: none; } #leftMenu button#display-left-menu, #leftMenu button.button-download-hidden { position: absolute; right: 1px; width: 30px; padding: 10px 5px; margin-right: -20px; transition: none; } #leftMenu button#display-left-menu { top: 40vh; } #leftMenu.menu-hide button#display-left-menu { top: 40vh; font-size: 20px; background-color: white; } #leftMenu button#display-left-menu:focus { background-color: white; } #leftMenu.menu-hide button.button-download-hidden.button-link { top: calc(40vh + 70px); } #leftMenu.menu-hide button.button-download-hidden.button-file { top: calc(40vh + 130px); } #leftMenu.menu-hide button.button-download-hidden.button-image { top: calc(40vh + 190px); } #leftMenu.menu-hide button#display-left-menu, #leftMenu.menu-hide button.button-download-hidden { margin-right: 0px; } #content { display: flex; overflow: hidden; min-height: calc(100vh - 80px); } .div-selector { padding-left: 5px; padding-right: 5px; } .not-visible { display: none; } .radio-box { margin-left: 10px; } .footer-attribution { position: absolute; bottom: -20px; right: 0; } .footer-attribution-index { position: absolute; bottom: 0; right: 0; } .footer-attribution-index p { font-size: 12px !important; } @media ( max-width: 992px) { canvas#graphCanvas { padding: 0 !important; } .navbar-custom .navbar-brand img { max-height: 80px; } .navbar-custom .navbar-header { height: 100px; } .navbar-custom .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; background-color: transparent; } .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #286090; } .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #cccccc; background-color: transparent; } .navbar-custom .navbar-title { float: initial; padding-left: 0; text-align: center; margin: 0 auto; } #content { display: block; } #leftMenu, #leftMenu.menu-hide { transition: all 1s; width: 100%; min-height: 60px; } #leftMenu button#display-left-menu, #leftMenu button.button-download-hidden { right: 5vw; top: 20px; margin-top: -15px; margin-left: -15px; background-color: #2F80ED !important; color: white; width: 35px; } #leftMenu.menu-hide button#display-left-menu { right: 25px; top: 20px; margin-top: -15px; margin-left: -15px; background-color: #0E2031 !important; color: white; width: 35px; } #leftMenu.menu-hide button.button-download-hidden.button-link { right: 100px; top: 20px; margin-top: -15px; margin-left: -15px; background-color: #2F80ED !important; color: white; width: 35px; } #leftMenu.menu-hide button.button-download-hidden.button-file { right: 150px; top: 20px; margin-top: -15px; margin-left: -15px; background-color: #2F80ED !important; color: white; width: 35px; } #leftMenu.menu-hide button.button-download-hidden.button-image { right: 200px; top: 20px; margin-top: -15px; margin-left: -15px; } #leftMenu.menu-hide button#display-left-menu { font-size: 15px; } #leftMenu button#display-left-menu i:before { content: "\f077"; } #leftMenu.menu-hide button#display-left-menu i:before { content: "\f078"; } .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none !important; } .navbar-custom .navbar-nav { float: none !important; margin-top: 7.5px; margin: 0 auto; } .footer-attribution { position: relative; } .navbar-custom .navbar-nav > li { float: none; width: 200px; margin: 0 auto; text-align: center; } .navbar-custom .navbar-nav li.return { float: none; } .navbar-custom .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; margin-bottom: 10px; } .navbar-collapse.collapse.in { max-height: none !important; min-height: 360px; } } @media ( max-width: 1200px) { .radio-box { display: block; } } .radio-box .div-selector label.btn.btn-default { font-size: 14px !important; font-family: 'Roboto', sans-serif !important; } /* The snackbar - position it at the bottom and in the middle of the screen */ .snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #eee; color: #58585A; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 10000; left: 50%; font-weight: 600; bottom: 30px; border: 2px solid #286090; } #snackbar-disclaimer.snackbar { min-width: 600px; margin-left: -300px; } .snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s; animation: fadein 0.5s; } .snackbar.hide { visibility: visible; -webkit-animation: fadeout 0.5s; animation: fadeout 0.5s; } @-webkit-keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } .snackbar .snackbar-close { position: absolute; top: 3px; right: 5px; cursor: pointer; transition: 0.2s ease; } .snackbar .snackbar-close:hover { font-weight: bold; font-size: medium; } .snackbar .snackbar-links { text-align: right; padding-right: 5px; } .snackbar .snackbar-link { font-style: italic; cursor: pointer; } .snackbar .snackbar-link:hover { opacity: 0.9; text-decoration: underline; } .snackbar p { margin: 0 0 0 5px; } @media ( max-width: 992px) { .snackbar { min-width: 100%; margin: 0px; left: 0; } #snackbar-disclaimer.snackbar { min-width: 100%; margin: 0px; left: 0; } } .irs-min, .irs-max { color: #333; background-color: #fff; } .irs-from, .irs-to, .irs-single { background: #286090; } .irs-single { background: #286090; width: 40px; height: 30px; border-radius: 30px; line-height: 3; } .irs-from:after, .irs-to:after, .irs-single:after { border-top-color: #286090; } .irs-line-mid, .irs-line-left, .irs-line-right, .irs-bar, .irs-bar-edge, .irs-slider { background: url(../img/sprite-skin-custom.png) repeat-x; } .irs-line-left { height: 12px; background-position: 0 -30px; } .irs-line-mid { height: 12px; background-position: 0 0; } .irs-line-right { height: 12px; background-position: 100% -30px; } .irs-bar { height: 12px; top: 25px; background-position: 0 -60px; } .irs-slider { width: 16px; height: 18px; top: 22px; background-position: 0 -120px; background: #0e2031; border-radius: 10px; } #graphDescription h1, #graphSource h1 { font-size: 18px; } °Ù¶È