/*--- score proportions ---*/

:root{



/*MAIN CAMERA*/

   --proportion-main-camera-iq-still-iq:75;
   
      --proportion-main-camera-iq-still-iq-nozoom:75;
         --proportion-main-camera-iq-still-iq-nozoom-bright: 31;
         --proportion-main-camera-iq-still-iq-nozoom-medium: 28;
         --proportion-main-camera-iq-still-iq-nozoom-low: 41;
      
      --proportion-main-camera-iq-still-iq-zoom4x:15;
         --proportion-main-camera-iq-still-iq-zoom4x-bright: 31;
         --proportion-main-camera-iq-still-iq-zoom4x-medium: 28;
         --proportion-main-camera-iq-still-iq-zoom4x-low: 41;
      
      --proportion-main-camera-iq-still-iq-ultrawide:10;
         --proportion-main-camera-iq-still-iq-ultrawide-bright: 31;
         --proportion-main-camera-iq-still-iq-ultrawide-medium: 28;
         --proportion-main-camera-iq-still-iq-ultrawide-low: 41;
   

   --proportion-main-camera-iq-video-iq:25;
 
      --proportion-main-camera-iq-video-iq-nozoom:85;
         --proportion-main-camera-iq-video-iq-nozoom-bright: 31;
         --proportion-main-camera-iq-video-iq-nozoom-medium: 28;
         --proportion-main-camera-iq-video-iq-nozoom-low: 41;

      --proportion-main-camera-iq-video-iq-zoom3x:15;
         --proportion-main-camera-iq-video-iq-zoom3x-bright: 31;
         --proportion-main-camera-iq-video-iq-zoom3x-medium: 28;
         --proportion-main-camera-iq-video-iq-zoom3x-low: 41;
         
      

/*SELFIE CAMERA*/

   --proportion-selfie-iq-still-iq:75;
      --proportion-selfie-iq-still-iq-bright: 31;
      --proportion-selfie-iq-still-iq-medium: 28;
      --proportion-selfie-iq-still-iq-low: 41;
   
   --proportion-selfie-iq-video-iq:25;
      --proportion-selfie-iq-video-iq-bright: 31;
      --proportion-selfie-iq-video-iq-medium: 28;
      --proportion-selfie-iq-video-iq-low: 41;



/*MAIN PERFORMANCE*/

   --proportion-main-camera-performance-still-performance-nozoom: 83;
      --proportion-main-camera-performance-still-performance-nozoom-timing: 58;
      --proportion-main-camera-performance-still-performance-nozoom-stabilization: 42;

   --proportion-main-camera-performance-still-performance-zoom4x: 17;
      --proportion-main-camera-performance-still-performance-zoom4x-timing: 58;
      --proportion-main-camera-performance-still-performance-zoom4x-stabilization: 42;
   



/*VCX TOTAL*/

   --proportion-main: 60;
   --proportion-selfie: 25;
   --proportion-main-performance: 15;

}


/*Layout fix*/

.t3-sl:after{
	content: " ";
    display: table;
	clear:both;
}

/**/

#score-proportions{
   margin-top:2em;
   width:20em;
   margin-left:auto;
}

.proportion{
   position: relative;
   display: flex;
   align-items: center;
   margin-bottom:2em;
   font-size: .8em;  
   border:.2em solid #ddd;
   background-color:#f9f9f9;
}

.proportion.--tooltip{
   margin-bottom:0;
   border:none;
}

.proportion.--tooltip:before{
   content: "weight";
   font-size: 1em;
   font-weight: 100;
   height: auto;
   width: auto;
   margin: 0;
   background-color: #aaa;
   color: #000;
   padding: 0 .4em;
   position: absolute;
   top: -1.4em;
   right: -.25em;
   border-radius: .2em;
}

.proportion.--dark{
   color:#fff;
}

.proportion.--bg-transparent{
   background-color:transparent;
}

.proportion:before{
   content:"";
   display:inline-block;
   width:2.5em;
   height:2.5em;
   margin-left:1.5em;
   margin-right:2em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.proportion:after{
   content:"";
   position: absolute;
   left:5.5em;
   width:.15em;
   height:50%;
   background-color:#ddd;
}

.proportion.--tooltip:after{
   display: none;
}

.proportion.--main:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main.svg);
}

.proportion.--selfie:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_selfie.svg);
}

.proportion.--main-performance:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main_performance.svg);
}

.proportion.--vcx{
   background-color:#f2f2f2;
}

.proportion.--vcx:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/vcx_logo.png);
}

.proportion__wrap{
   flex:1;
   padding:.5em;
}

.proportion__group{
   width:100%;
   display:flex;
   flex-direction: row;
   align-items: center;
   padding: .5em;  
}

.proportion__group.--lg{
   font-size:1.2em;
}

.proportion__group:before{
   content:"";
   display:inline-block;
   width:1.5em;
   height:1.5em;
   margin-right:1em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.proportion.--tooltip .proportion__group:before,
.proportion__group.--group-total:before{
   display:none;
}

.proportion__group.--image-quality:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_image-quality.svg);
}

.proportion__group.--video:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_video.svg);
}

.proportion__group.--performance:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_performance.svg);
}

.proportion__group.--nozoom:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_default.svg);
}

.proportion__group.--zoom:before{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_zoom.svg);
}


.proportion__value{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding:0 1px;
}

.proportion__value:nth-child(odd) .proportion__bar{
   background-color:#ccc;
}
.proportion__value:nth-child(even) .proportion__bar{
   background-color:#aaa;
}

.proportion__icon{
   content: "";
   display: block;    
   height: 1em;
   width: 1em;
   margin-bottom: .25em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.proportion.--tooltip.--dark .proportion__icon{
   height:1.5em;
   width:1.5em;
}

.proportion__icon.--lg{
   height:1.5em ;
   width:1.5em;
}

.vcx-score__total .proportion__icon{
   height:2em !important;
   width:2em !important;
}

.proportion__icon.--nozoom{
	background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_default.svg);
}
.proportion.--dark .proportion__icon.--nozoom{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_default_light.svg);
}
.proportion__icon.--zoom{
	background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_zoom.svg);
}
.proportion.--dark .proportion__icon.--zoom{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_zoom_light.svg);
}
.proportion__icon.--ultrawide{
	background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_ultrawide.svg);
}
.proportion.--dark .proportion__icon.--ultrawide{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_focal_ultrawide_light.svg);
}

.proportion__icon.--sunny{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_sunny.svg);
}
.proportion.--dark .proportion__icon.--sunny{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_sunny_light.svg);
}
.proportion__icon.--indoor{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_indoor.svg);
}
.proportion.--dark .proportion__icon.--indoor{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_indoor_light.svg);
}
.proportion__icon.--night{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_night.svg);
}
.proportion.--dark .proportion__icon.--night{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_night_light.svg);
}
.proportion__icon.--timing{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_timing.svg);
}
.proportion.--dark .proportion__icon.--timing{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_timing_light.svg);
}
.proportion__icon.--stabilization{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_stabilization.svg);
}
.proportion.--dark .proportion__icon.--stabilization{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_stabilization_light.svg);
}
.proportion__icon.--main{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main.svg);
}
.proportion.--dark .proportion__icon.--main{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main_light.svg);
}
.proportion__icon.--selfie{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_selfie.svg);
}
.proportion.--dark .proportion__icon.--selfie{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_selfie_light.svg);
}
.proportion__icon.--main-performance{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main_performance.svg);
}
.proportion.--dark .proportion__icon.--main-performance{
   background-image: url(/vcx/phonecam-2025/frontend/images/camera_main_performance_light.svg);
}
.proportion__icon.--image-quality{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_image-quality.svg);
}
.proportion.--dark .proportion__icon.--image-quality{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_image-quality_light.svg);
}
.proportion__icon.--video{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_video.svg);
}
.proportion.--dark .proportion__icon.--video{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_video_light.svg);
}
.proportion__icon.--performance{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_performance.svg);
}
.proportion.--dark .proportion__icon.--performance{
   background-image: url(/vcx/phonecam-2025/frontend/images/score_performance_light.svg);
}



.proportion__bar{
   position: relative;
   width:100%;
   right:0;
   height: .4em;
   border-radius: .1em;
}

.proportion.--tooltip.--dark .proportion__bar{
   margin-top: .125em;
   margin-bottom: .25em;
}

.proportion__num{
   width: 100%;
   text-align: center;
}

.proportion__value{
}




/*proportion values - main camera total*/

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ"]{
   width: calc(var(--proportion-main-camera-iq-still-iq)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-still-iq);
   content:counter(variable) "%";
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ"]{
   width: calc(var(--proportion-main-camera-iq-video-iq)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-video-iq);
   content:counter(variable) "%";
}


/*proportion values - main camera - image quality*/

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom"]{
	width: calc(var(--proportion-main-camera-iq-still-iq-nozoom)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-still-iq-nozoom);
   content:counter(variable) "%";
}

	.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Bright"]{
		width: calc(var(--proportion-main-camera-iq-still-iq-nozoom-bright)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Bright"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-nozoom-bright);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Medium"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-nozoom-medium)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Medium"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-nozoom-medium);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Low"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-nozoom-low)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - NoZoom - Low"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-nozoom-low);
         content:counter(variable) "%";
      }




.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x"]{
   width: calc(var(--proportion-main-camera-iq-still-iq-zoom4x)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-still-iq-zoom4x);
   content:counter(variable) "%";
}

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Bright"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-zoom4x-bright)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Bright"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-zoom4x-bright);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Medium"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-zoom4x-medium)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Medium"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-zoom4x-medium);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Low"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-zoom4x-low)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Zoom4x - Low"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-zoom4x-low);
         content:counter(variable) "%";
      }




.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Ultrawide"]{
   width: calc(var(--proportion-main-camera-iq-still-iq-ultrawide)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - Ultrawide"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-still-iq-ultrawide);
   content:counter(variable) "%";
}

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Bright"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-ultrawide-bright)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Bright"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-ultrawide-bright);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Medium"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-ultrawide-medium)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Medium"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-ultrawide-medium);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Low"]{
         width: calc(var(--proportion-main-camera-iq-still-iq-ultrawide-low)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Still IQ - UltraWide - Low"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-still-iq-ultrawide-low);
         content:counter(variable) "%";
      }


/*proportion values - main camera video quality*/

.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom"]{
   width: calc(var(--proportion-main-camera-iq-video-iq-nozoom)*1%);
   }

.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-video-iq-nozoom);
   content:counter(variable) "%";
}



	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Bright"]{
		 width: calc(var(--proportion-main-camera-iq-video-iq-nozoom-bright)*1%);
	  }

	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Bright"] .proportion__num:after{
		 counter-reset: variable var(--proportion-main-camera-iq-video-iq-nozoom-bright);
		 content:counter(variable) "%";
	  }

	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Medium"]{
		 width: calc(var(--proportion-main-camera-iq-video-iq-nozoom-medium)*1%);
	  }

	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Medium"] .proportion__num:after{
		 counter-reset: variable var(--proportion-main-camera-iq-video-iq-nozoom-medium);
		 content:counter(variable) "%";
	  }

	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Low"]{
		 width: calc(var(--proportion-main-camera-iq-video-iq-nozoom-low)*1%);
	  }

	  .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - NoZoom - Low"] .proportion__num:after{
		 counter-reset: variable var(--proportion-main-camera-iq-video-iq-nozoom-low);
		 content:counter(variable) "%";
	  }



.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x"]{
   width: calc(var(--proportion-main-camera-iq-video-iq-zoom3x)*1%);
}

.proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-iq-video-iq-zoom3x);
   content:counter(variable) "%";
}


      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Bright"]{
         width: calc(var(--proportion-main-camera-iq-video-iq-zoom3x-bright)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Bright"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-video-iq-zoom3x-bright);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Medium"]{
         width: calc(var(--proportion-main-camera-iq-video-iq-zoom3x-medium)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Medium"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-video-iq-zoom3x-medium);
         content:counter(variable) "%";
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Low"]{
         width: calc(var(--proportion-main-camera-iq-video-iq-zoom3x-low)*1%);
      }

      .proportion__value[data-title="Proportion -- Main Camera IQ - Video IQ - Zoom3x - Low"] .proportion__num:after{
         counter-reset: variable var(--proportion-main-camera-iq-video-iq-zoom3x-low);
         content:counter(variable) "%";
      }



/*proportion values - selfie image quality*/


.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ"]{
   width: calc(var(--proportion-selfie-iq-still-iq)*1%);
}
.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ"] .proportion__num:after{
   counter-reset: variable var(--proportion-selfie-iq-still-iq);
   content:counter(variable) "%";
}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Bright"]{
		width: calc(var(--proportion-selfie-iq-still-iq-bright)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Bright"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-still-iq-bright);
	   content:counter(variable) "%";
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Medium"]{
	   width: calc(var(--proportion-selfie-iq-still-iq-medium)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Medium"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-still-iq-medium);
	   content:counter(variable) "%";
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Low"]{
	   width: calc(var(--proportion-selfie-iq-still-iq-low)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Still IQ - Low"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-still-iq-low);
	   content:counter(variable) "%";
	}



.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ"]{
   width: calc(var(--proportion-selfie-iq-video-iq)*1%);
}
.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ"] .proportion__num:after{
   counter-reset: variable var(--proportion-selfie-iq-video-iq);
   content:counter(variable) "%";
}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Bright"]{
	   width: calc(var(--proportion-selfie-iq-video-iq-bright)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Bright"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-video-iq-bright);
	   content:counter(variable) "%";
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Medium"]{
	   width: calc(var(--proportion-selfie-iq-video-iq-medium)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Medium"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-video-iq-medium);
	   content:counter(variable) "%";
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Low"]{
	   width: calc(var(--proportion-selfie-iq-video-iq-low)*1%);
	}

	.proportion__value[data-title="Proportion -- Selfie IQ - Video IQ - Low"] .proportion__num:after{
	   counter-reset: variable var(--proportion-selfie-iq-video-iq-low);
	   content:counter(variable) "%";
	}



/*proportion values - main performance*/

.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-performance-still-performance-nozoom);
   content:counter(variable) "%";
}
.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom"]{
   width: calc(var(--proportion-main-camera-performance-still-performance-nozoom)*1%);
}

	.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom - Timing"] .proportion__num:after{
      counter-reset: variable var(--proportion-main-camera-performance-still-performance-nozoom-timing);
      content:counter(variable) "%";
	}
	.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom - Timing"]{
	  width: calc(var(--proportion-main-camera-performance-still-performance-nozoom-timing)*1%);
    }
    .proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom - Stabilization"] .proportion__num:after{
	  counter-reset: variable var(--proportion-main-camera-performance-still-performance-nozoom-stabilization);
	  content:counter(variable) "%";
    }
	.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - NoZoom - Stabilization"]{
	  width: calc(var(--proportion-main-camera-performance-still-performance-nozoom-stabilization)*1%);
	}



.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-camera-performance-still-performance-zoom4x);
   content:counter(variable) "%";
}
.proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x"]{
   width: calc(var(--proportion-main-performance-still-performance-zoom4x)*1%);
}

   .proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x - Timing"] .proportion__num:after{
      counter-reset: variable var(--proportion-main-camera-performance-still-performance-zoom4x-timing);
      content:counter(variable) "%";
   }
   .proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x - Timing"]{
      width: calc(var(--proportion-main-camera-performance-still-performance-zoom4x-timing)*1%);
   }
   .proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x - Stabilization"] .proportion__num:after{
      counter-reset: variable var(--proportion-main-camera-performance-still-performance-zoom4x-stabilization);
      content:counter(variable) "%";
   }
   .proportion__value[data-title="Proportion -- Main Camera Performance - Still Performance - Zoom4x - Stabilization"]{
      width: calc(var(--proportion-main-camera-performance-still-performance-zoom4x-stabilization)*1%);
   }




/*proportion values - total*/

.proportion__value[data-title="VCX Proportion - Main"]{
   width: calc(var(--proportion-main)*1%);
}

.proportion__value[data-title="VCX Proportion - Main"] .proportion__num:after{
   counter-reset: variable var(--proportion-main);
   content:counter(variable) "%";
}

.proportion__value[data-title="VCX Proportion - Selfie"]{
   width: calc(var(--proportion-selfie)*1%);
}

.proportion__value[data-title="VCX Proportion - Selfie"] .proportion__num:after{
   counter-reset: variable var(--proportion-selfie);
   content:counter(variable) "%";
}

.proportion__value[data-title="VCX Proportion - Main Performance"]{
   width: calc(var(--proportion-main-performance)*1%);
   }

.proportion__value[data-title="VCX Proportion - Main Performance"] .proportion__num:after{
   counter-reset: variable var(--proportion-main-performance);
   content:counter(variable) "%";
}



/*TEMP*/



/*=== GENERAL ===*/


section#device-scores{
	padding-top:5em;
	padding-bottom:5em;
}

.vcx-score .tooltip{
   position: absolute;
   opacity:0;
   visibility: hidden;
   right: -.5em;
   top: 0;
   width: 16em;
   font-size: 1.2rem;
   color: #fff;
   background-color: #444;
   border:.2em solid #aaa;
   box-shadow:0.5em 0.5em 2em 0.25em rgb(0, 0, 0, .3);
   transform: translate(-2em, -90%);
   transition: visibility 0s .5s, opacity .25s, transform .15s;
   pointer-events: none;
   -webkit-font-smoothing: antialised;
   backface-visibility: hidden;
   -webkit-font-smoothing: subpixel-antialiased;
}

.vcx-score .tooltip:before{
   position: absolute;
   content: "";
   right: 2.5em;
   bottom: -.7em;
   height: 1em;
   width: 1em;
   background-color: #aaa;
   transform: rotate(45deg);
   z-index: 1;
}

.vcx-score .tooltip:after{
   position: absolute;
   content: "";
   right: 2.5em;
   bottom: -.5em;
   height: 1em;
   width: 1em;
   background-color: #444;
   transform: rotate(45deg);
   z-index: 2;
}

.vcx-score .tooltip .proportion__bar{
   width: 0;
}

@media screen and (min-width: 992px) {
      

   .vcx-score .-tooltip:hover .tooltip{
      transform:translate(-2em, -100%);
      opacity: 1;
      visibility: visible;
      transition: visibility 0s, opacity .5s, transform .4s;
   }
   .vcx-score .-tooltip:hover .tooltip .proportion__bar{
      width:100%;
      transition: width .5s;
   }

   .vcx-score .-tooltip > span:first-child:after{
      position: absolute;
      content: "";
      bottom: .1em;
      border-bottom: 1px dotted;
      left: 0;
      width: 100%;
      height: .1em;
   }

   .vcx-score .-tooltip{
      cursor:help;
   }


}

/*=== DEVICE ===*/


/*--- image ---*/

.device__image-wrap{
   position: relative;
}
.device__image-wrap.-loading:before {
   font-family: "Font Awesome\ 5 Pro";
   content: "\f1ce";
   animation: a 1s infinite linear;
   font-weight: 300;
   position: absolute;
   font-size: 2em;
   left: 50%;
   display: block;
   margin-left: -.5em;
   top: 50%;
   margin-top: -1em;
   color: #eb912d;
 }

 .device__image{
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height:300px;
}

 .device__image-wrap.-loading .device__image{
   opacity:0;
   transition: all .5s;
}

.device__image-wrap:not(.-loading) .device__image{
   opacity:1;
   transition: all 1.5s;
}

.device__image-wrap .device__image img{
   opacity:1 !important;
}


.device__image img{
   max-height: 36em;
}

@media screen and (max-width: 767px) {
   .device__image img{
      max-height: 50vh;
   }
}

@media screen and (min-width: 768px) {
   .device__image-wrap {
       padding-right: 3em;
   }
}

/*--- ratings ---*/

.device__heading{
   margin-bottom: 3em;
}

.device__heading p{
   margin:0;
}

.device__heading p:first-of-type{
	margin-bottom:-1em;
}

.device__title{
   margin: 0;
   font-size: 3em;
   font-weight: 100;
   margin-bottom: .1em;
}
.device__title > span:first-child{
	display: block;
	font-size: .5em;
	font-weight: 700;
	margin-bottom: -.2em;
}

.device__title .rating-visual{
   font-size: 1.25rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.vcx-score__col{
   position: relative;
}

.vcx-score__col:first-child{
   flex:5;
   padding-left: 5rem;
}

@media screen and (max-width: 575px) {
   
   .vcx-score__col:first-child{
      padding-left: 3.5rem;
   }
}

.vcx-score__col:last-child{
   flex:1.5;
}

/* @media screen and (min-width: 576px) {
   
   .vcx-score__col:last-child{
   flex:2.5;
   }
} */

@media screen and (min-width: 1200px) {
   
   .vcx-score__col:last-child{
      flex:1.25;
   }
}

.vcx-score__item-title{
   position: relative;
   font-size: 1.4em;
   cursor:pointer;
}

.vcx-score__item-title:before{
   content: "";
   position: absolute;
   left: -1.5em;
   height: 100%;
   width: 1.25em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

#main-camera .vcx-score__item-title:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/camera_main.svg");
}

#selfie-camera .vcx-score__item-title:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/camera_selfie.svg");
}

#main-camera-performance .vcx-score__item-title:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/camera_main_performance.svg");
}

.vcx-score__item-title:after{
   content:"";
   display:inline-block;
   margin-left: .3em;
   height: .6em;
   width: .6em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   background-image: url("/vcx/phonecam-2025/frontend/images/collapse.svg");
}

.vcx-score__item-title small{
   font-size: 40%;
   padding: .25em .5em;
   background: #aaa;
   color: #fff;
   vertical-align: middle;
   font-weight: 700;
}

.collapsible__head.collapsed .vcx-score__item-title:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/collapse-in.svg");
}

.vcx-score__item-score{
   position: relative;
   margin-top: -.15em;
   font-size: 2em;
   color: #eb912d;
}
.vcx-score__item-score:nth-child(2){
   position: relative;
   margin-top: .25em;
   font-size: 1em;
   color: #eb912d;
}

.vcx-score__spacer{
   display:flex;
}

.vcx-score__spacer > div{
   height:1em;
}

.vcx-score__spacer > div:last-child{
   background-color:#f8f8f8;
}


@media screen and (max-width: 576px) {
   
   .device__ratings{
      margin-left:-15px;
      margin-right: -15px;
   }
}

.device__ratings .collapsible{
   background-color: #f9f9f9;
}



/* .device__ratings .collapsible__content{
   padding-left:.8em;
} */

.device__ratings .accordion{
   position: relative;
}
/* 
.device__ratings .accordion:before{
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 2.5em;
   height: 90%;
   width: 2px;
   background-color: #dfdfdf;
}

.device__ratings .accordion:after{
   content: "";
   position: absolute;
   display: block;
   top: 50%;
   left:.4em;
   height: 1.25em;
   width: 1.25em;
   transform: translateY(-50%);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   opacity: .4;
}



#main-camera-image-accordion:after,
#selfie-camera-image-accordion:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_image-quality.svg");
}

#main-camera-video-accordion:after,
#selfie-camera-video-accordion:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_video.svg");
}

#main-camera-performance-accordion:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_performance.svg");
} */



/* 
.device__ratings .accordion: > .accordion__tab:first-child .accordion__head > div{
   padding-top: .5em;
}

.device__ratings .accordion__tab:last-child .accordion__head > div{
   padding-bottom: .5em;
} */


.device__ratings .collapsible__head,
.device__ratings .accordion__head,
.device__ratings .accordion__content{
   display: flex;
   align-items: stretch;
   justify-content: space-between;
}

.device__ratings .collapsible__head > div:first-child{
   padding-top:.75em;
   padding-bottom: .75em;
   background-color: #f3f3f3;
}

.device__ratings .collapsible__head > div:last-child{
   background-color: #e4e4e4;
}

.device__ratings .collapsible__head > div,
.device__ratings .accordion__head > div{
   display: flex;
   align-items: center;
}
.device__ratings .collapsible__head > div:last-child,
.device__ratings .accordion__head > div:last-child{
   justify-content: center;
}

.device__ratings .collapsible__head > div:last-child,
.device__ratings .accordion__head > div:last-child,
.device__ratings .accordion__content > div:last-child{
   background-color:#eee;
}

.device__ratings .collapsible__head > div:last-child{
   background-color: #e4e4e4;
}



.score--color{
   color: #eb912d;
}

.score-main{
   position: relative;
   font-size: 1.3em;
}

.score-main__title{
   font-size: 1.1em;
   position: relative;
   cursor:pointer;
}

.score-main__title:before{
   content:"";
   position: absolute;
   display: block;
   height: .9em;
   width: .9em;
   left: -1.4em;
   top: .25em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.score-main__title[data-title="Main Camera IQ - Still IQ"]:before,
.score-main__title[data-title="Selfie IQ - Still IQ"]:before,
.score-main__title[data-title="Main Performance - Image"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_image-quality.svg");
}

.score-main__title[data-title="Main Camera IQ - Video IQ"]:before,
.score-main__title[data-title="Selfie IQ - Video IQ"]:before,
.score-main__title[data-title="Main Performance - Video"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_video.svg");
}

.score-main__title[data-title="Main - Performance"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_performance.svg");
}

.score-main__title:after,
.score-secondary__title:after{
   content:"";
   display:inline-block;
   margin-left: .3em;
   height: .7em;
   width: .7em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   background-image: url("/vcx/phonecam-2025/frontend/images/collapse.svg");
}

.accordion__head.collapsed .score-main__title:after,
.accordion__head.collapsed .score-secondary__title:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/collapse-in.svg");
}



.score-main__data{
   margin: .25em 0;
   padding-left:2em;
}

.score-main__score{
   font-weight: 300;
}
.score-main__score:nth-child(2){
   font-size: .6em;
}

.score-secondary{
   position: relative;
   font-size: 1em;
}

.score-secondary__title{
   position: relative;
   cursor:pointer;
   font-size: .9em;
}

.score-secondary__title:before{
   content:"";
   position: absolute;
   display: block;
   height: .9em;
   width: .9em;
   left: -1.4em;
   top: .25em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

[data-title="Main Camera IQ - Still IQ - NoZoom"]:before,
[data-title="Main Camera IQ - Video IQ - NoZoom"]:before,
[data-title="Main Camera Performance - Still Performance - NoZoom"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_focal_default.svg");
}

[data-title="Main Camera IQ - Still IQ - Zoom4x"]:before,
[data-title="Main Camera IQ - Video IQ - Zoom3x"]:before,
[data-title="Main Camera Performance - Still Performance - Zoom4x"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_focal_zoom.svg");
}

[data-title="Main Camera IQ - Still IQ - UltraWide"]:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_focal_ultrawide.svg");
}



.score-sub{
   display: flex;
   justify-content: center;
   padding: .25em 0;
   padding-left: 1.25em;
}

.accordion__content .score-sub:last-child{
   padding-bottom:1em;
}

.score-sub__title{
   position: relative;
   line-height: 1em;;
   font-size: .8em;
}

.score-sub__title:before{
   content:"";
   position: absolute;
   width:100%;
   height: 1px;
   left: 0;
   top: 1em;
   background-color: #dfdfdf;
}

.score-sub__title:after{
   content:"";
   position: absolute;
   display: block;
   height: 1.2em;
   width: 1.2em;
   left: -1.6em;
   top: .4em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}


.score-sub__title[data-title="Main Camera IQ - Still IQ - NoZoom - Bright"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - Zoom4x - Bright"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - UltraWide - Bright"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - NoZoom - Bright"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - Zoom3x - Bright"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - UltraWide - Bright"]:after,
.score-sub__title[data-title="Main - Video - Bright"]:after,
.score-sub__title[data-title="Selfie IQ - Still IQ - Bright"]:after,
.score-sub__title[data-title="Selfie IQ - Video IQ - Bright"]:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_sunny.svg");
}

.score-sub__title[data-title="Main Camera IQ - Still IQ - NoZoom - Medium"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - Zoom4x - Medium"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - UltraWide - Medium"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - NoZoom - Medium"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - Zoom3x - Medium"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - UltraWide - Medium"]:after,
.score-sub__title[data-title="Main - Video - Medium"]:after,
.score-sub__title[data-title="Selfie IQ - Still IQ - Medium"]:after,
.score-sub__title[data-title="Selfie IQ - Video IQ - Medium"]:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_indoor.svg");
}

.score-sub__title[data-title="Main Camera IQ - Still IQ - NoZoom - Low"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - Zoom4x - Low"]:after,
.score-sub__title[data-title="Main Camera IQ - Still IQ - UltraWide - Low"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - NoZoom - Low"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - Zoom3x - Low"]:after,
.score-sub__title[data-title="Main Camera IQ - Video IQ - UltraWide - Low"]:after,
.score-sub__title[data-title="Main - Video - Low"]:after,
.score-sub__title[data-title="Selfie IQ - Still IQ - Low"]:after,
.score-sub__title[data-title="Selfie IQ - Video IQ - Low"]:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_night.svg");
}

.score-sub__title[data-title="Main Camera Performance - Still Performance - NoZoom - Timing"]:after,
.score-sub__title[data-title="Main Camera Performance - Still Performance - Zoom4x - Timing"]:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_timing.svg");
   top:-.1em;
}
.score-sub__title[data-title="Main Camera Performance - Still Performance - NoZoom - Stabilization"]:after,
.score-sub__title[data-title="Main Camera Performance - Still Performance - Zoom4x - Stabilization"]:after{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_stabilization.svg");
   top:-.1em;
}

.score-sub__bar{
   position: absolute;
   height: 1px;
   left: 0;
   width: 0;
   min-width: 2.5%;
   top: 1em;
   background-color: #eb912d;
   transition: all 1.5s;
}

.score-sub__desc{
   font-size: .9em;
}

.device__ratings .accordion__body:not(.in) .score-sub__bar{
   width:0 !important;
}

.score-sub__numeric{
   text-align:center;
   white-space: nowrap;    
   display: flex;
   align-items: center;
}

@media screen and (max-width: 767px) {
   
   .score-sub__numeric{
      justify-content: center;
   }
}




.score-sub__score{
   margin-top: -.25em;
}

.score-sub__score:nth-child(2){
   margin-top: .25em;
   font-size: .6em;
}



.vcx-score__total{
   text-align: right;
   display:flex;
}

.vcx-score__total img{
   height:3em;
   margin-right: 1.5em;
}

.vcx-score__total > div:first-child{
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.vcx-score__total > div:last-child{
   text-align: center;
   background-color: #ddd;
}

.vcx-score__total-score {
   position: relative;
   display: inline-block;
   font-size: 3em;
}

@media screen and (max-width: 575px) {
   
   .vcx-score__total-score {
      font-size: 2.5em;
   }

}

.vcx-score__total-range  {
   font-size: .6em;
   margin-left:-.5em;
   margin-top: -5.5em;
}

.device__ratings .info-box{
   margin-top: 1em;
   text-align:right;
}

.device__ratings .info-box p{
   line-height:1.25em;
}


/*--- accordion ---*/

.accordion__head:focus {
   border:0;
   border-color: transparent;
   outline: none;
}

.accordion__tab{
   background-color:transparent;
   border:none;
   box-shadow:none;
   margin-bottom:0;
}

/*--- rating visual ---*/

.rating-visual{
   position: relative;
   display: inline-block;
}

.rating-visual__icons{
   display:flex;
}

.rating-visual__icon{
   position: relative;
   font-style: normal;
}

.rating-visual__icon:before{
   content: "\f005";
   font-family: "Font Awesome\ 5 Pro";
   font-weight: 100;
   color: inherit;
}

.rating-visual--animated .rating-visual__icon:after{
   opacity: 0;

   animation-fill-mode: forwards;
   animation-name: shrink-in;
   animation-duration:.5s;
}

.rating-visual--animated .rating-visual__icon:nth-child(1):after{
   animation-delay:.5s;
}
.rating-visual--animated .rating-visual__icon:nth-child(2):after{
   animation-delay:.6s;
}
.rating-visual--animated .rating-visual__icon:nth-child(3):after{
   animation-delay:.7s;
}
.rating-visual--animated .rating-visual__icon:nth-child(4):after{
   animation-delay:.8s;
}
.rating-visual--animated .rating-visual__icon:nth-child(5):after{
   animation-delay:.9s;
}

.rating-visual__icon:after{
   position: absolute;
   font-family: "Font Awesome\ 5 Pro";
   font-weight: 700;
   left:0;
}

.rating-visual__icon--half:after{
   content: "\f089";
}

.rating-visual__icon--full:after{
   content: "\f005";
}

@keyframes shrink-in {
   0%{
     opacity: 0;
     transform: scale(10);
   }
   100% {
     opacity: 1;
     transform: scale(1);
   }
 }


 .rating-visual__vcx-version{
	content:"2023";
   display: block;
   font-weight: 400;
   font-size: .9rem;
   text-align: right;
}

.device__ratings .info-box > a:after{
   content:"\f307";
   font-size: 1.2rem;
   font-weight: 300;
   font-family: Font Awesome\ 5 Pro;
}
.device__ratings .info-box > a.collapsed:after{
   content:"\f300";
}


/*=== RATING DETAILS ===*/

.rating-details-wrap {
   padding: 2em 0;
}

#rating-details{
   padding-top: 2em;
   padding-bottom: 4em;
}

#rating-details-toggle{
   width: auto;
   margin: 2em auto;
   font-weight: bold;
   cursor: pointer;
}

.rating-detail:hover .rating-detail__value {
   opacity: 1;
   transition: all .4s;
}

.rating-detail__col {
   margin-top: 2.5em;
}

.rating-detail__head {
   position: relative;
   text-align: center;
}

.rating-detail__head:nth-child(1):before{
   content: "";
   display: inline-block;
   width: 3em;
   height: 3em;
   margin-left: 3em;
   margin-bottom: 1em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.rating-detail:nth-child(1) .rating-detail__head:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_sunny.svg");
}

.rating-detail:nth-child(2) .rating-detail__head:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_indoor.svg");
}

.rating-detail:nth-child(3) .rating-detail__head:before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_night.svg");
}

.rating-detail ul {
   padding: 0;
}

.rating-detail ul li {
   list-style: none;
   position: relative;
   height: 1em;
   margin: .25em 0;
   font-weight: 500;
   font-size: .6em;
}

.rating-detail__desc {
   text-align: left;
}

.rating-detail__desc ul{
   position: relative;
}

.rating-detail__desc ul:before{
   content: "";
   position: absolute;
   width: 1em;
   height: 1em;
   left: -1.5em;
   top: 50%;
   transform: translateY(-50%);
   margin-right: 1em;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   opacity:.3;
}


.rating-detail__desc ul:nth-child(1):before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_image-quality.svg");
}

.rating-detail__desc ul:nth-child(2):before{
   background-image: url("/vcx/phonecam-2025/frontend/images/score_video.svg");
}


.rating-detail__bar ul li:before{
   content:"";
   position: absolute;
   top: .5em;
   left: 0;
   height: .3em;
   width: 100%;
   transform: scale(1.005);
   background-color:#000;
   opacity: .1;
}

.rating-detail__bar ul li > span {
   position: absolute;
   height: 1px;
   left: 0;
   width: 0;
   min-width: 2.5%;
   top: 1em;
   background: #eb912d;
   transition: all 1.5s;
}

.rating-detail__bar ul li > span {
   top: .5em;
   height: .3em;
   transform: scale(1.005);
}

.rating-detail__bar ul li > span.-not-available{
   min-width: 0;
}

.rating-detail__value {
   opacity: 0;
   position: absolute;
   right: -1.5em;
   top: -.65em;
   font-size: 120%;
}



/*=== DIRECT IQ COMPARISON ===*/

section#image-quality-comparison {
	margin:0 -15px;
	padding-top:3em;
	padding-bottom:5em;
	background: #2d2d2d;
    color: #fff;
}