325 lines
6.1 KiB
CSS
325 lines
6.1 KiB
CSS
.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;
|
|
}
|
|
}
|