.ads-percentile-wrapper{ width:100% } .ads-percentile-wrapper-1{ margin:0 auto; } .ads-percentile-wrapper-2{ margin:0 auto; } .ads-percentile-wrapper2{ margin:0 auto; } .ads-percentile-bar{ height:225px; position:relative; } .ads-percentile-bar .ads-percentile{ width:20%; height:20px; margin:2px auto 0 auto; padding:0 } .ads-percentile-bar .ads-percentile-arrow{ position:absolute; left:35%; /*left:91px !important;*/ width:0; height:0; border-color:transparent transparent transparent #0080ff; border-style:solid; border-width:8.5px 0 8.5px 13px; } .ads-percentile-bar .ads-percentile-text-1{ position:absolute; /*left:55px;*/ left:20% !important; width:40px; height:16px; font-size:.675rem; } .ads-percentile-bar .ads-percentile-arrow2{ position:absolute; /*left:155px;*/ left:60% !important; width:0; height:0; border-style: solid; border-width:8.5px 13px 8.5px 0; border-color: transparent #ce0000 transparent transparent; } .ads-percentile-bar .ads-percentile-text-2{ position:absolute; left:66% !important; width:40px; height:20px; font-size:.675rem; } .ads-percentile-bar .text{ position:absolute; bottom:0; width:40px; color:#000000; text-align:center; font-size:.675rem; font-weight:700; } .ads-percentile-bar .text.text-per100{ top:217px !important; /*left:110px !important;*/ left:42.3% !important; font-size:.675rem; height: 15px !important; } .ads-percentile-bar .text.text-per2_{ top:6px; left:90%; font-size:.675rem; } .ads-percentile-bar .text.text-per2{ top:-1px; left:49%; font-size:.325rem; } .ads-percentile-bar .text.text-per0{ /*top:0px; left:75%; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;*/ top: -11px !important; /*left: 110px !important;*/ left: 43% !important; } .ads-percentile-bar .text.text-per75{ top:159px !important; /*left: 110px !important;*/ left: 43% !important; /*top:100px;*/ /*left:75%;*/ /*writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;*/ } .ads-percentile-bar .text.text-per50{ /*top:-0px; left:75%; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;*/ top:104px !important; /*left: 110px !important;*/ left: 43% !important; } .ads-percentile-bar .text.text-per25{ top:49px !important; /*left: 110px !important;*/ left: 43% !important; /*top:-100px; left:75%; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;*/ } .ads-percentile-color-1{ background:#ce0000; } .ads-percentile-color-2{ background:#FF7F3F; } .ads-percentile-color-3{ background:#FFD93D; } .ads-percentile-color-4{ background:#6BCB77; } .ads-percentile10{ opacity: 0.1; } .ads-percentile02{ height:5px !important; opacity: 1; } .ads-percentile20{ opacity: 0.2; } .ads-percentile30{ opacity: 0.3; } .ads-percentile40{ opacity: 0.4; } .ads-percentile50{ opacity: 0.5; } .ads-percentile60{ opacity: 0.6; } .ads-percentile70{ opacity: 0.7; } .ads-percentile80{ opacity: 0.8; } .ads-percentile90{ opacity: 0.9; } .ads-percentile100{ height:15px !important; opacity: 0.98; } .ads-percentile-description{ text-align: center; width: 100%; height: 40px; font-size: 15px; font-weight: 700; padding: 9px 10px; } .ads-percentile-description1{ background: #ECEFF1; border-color: #CFD8DC; color: #607D8B; } .ads-percentile-description2{ background: #D3E9FF; border-color: #D3E9FF; color: #607D8B; } .ads-percentile-description3{ background: #ECEFF1; border-color: #CFD8DC; color: #607D8B; } .ads-percentile-arrow_{ width:0; height:0; border-color:transparent transparent transparent #0080ff; border-style:solid; border-width:8.5px 0 8.5px 13px; } .ads-percentile-arrow2_{ width:0; height:0; border-style: solid; border-width:8.5px 13px 8.5px 0; border-color: transparent #ce0000 transparent transparent; } .percentile-flex-1{ display: contents; align-items: baseline; justify-content: left; } a.percentile-info{ width:24px; height:16px; background-image:url(../images/icons/icon_info2.svg); background-repeat:no-repeat; background-position:center center; display:inline-block; } a.percentile-asteriks{ width:24px; height:16px; color: #607D8B; } .per2arrow { width:72px; /*margin:50px auto;*/ top:-12px; left:60%; position:absolute; bottom:0; color:#777; text-align:center; font-size:.675rem; font-weight:700; } .per2line { margin-top:12px; width:60px; height:5px; float:left; } .per2point { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left-color: blue; border-left-width: 12px; border-left-style: dashed; float:right; position: relative; top: 8px; } .ads-percentile-arrow-color-1{ background:#ce0000; } .ads-percentile-arrow-color-2{ background:#FF7F3F; } .ads-percentile-arrow-color-3{ background:#FFD93D; } .ads-percentile-arrow-color-4{ background:#6BCB77; } @media screen and (max-width:991px) and (min-width:0){ .ads-percentile-wrapper-2{ margin:20px auto 0 auto; } .ads-percentile-description3{ font-size: 13px; } .percentile_text{ font-size: 13px !important; } .description_class{ font-size: 14px !important; } .ads-percentile-bar .ads-percentile-text-2{ left:70% !important; } .ads-percentile-bar .ads-percentile-text-1 { left:10% !important; } .ads-percentile-bar .text.text-per2 { left:41% !important; } .ads-percentile-bar .text.text-per0, .ads-percentile-bar .text.text-per25, .ads-percentile-bar .text.text-per50, .ads-percentile-bar .text.text-per75, .ads-percentile-bar .text.text-per100{ left:38% !important; } }