How to Show Outlines for Elements in Oxygen Builder

<?php

/**
 * Shows outlines for all the elements inside Oxygen Builder
 * 
 * Green lines indicate :before pseudo-elements 
 * 
 * Red outlines indicate :after pseudo-elements
 * 
 * You have to set the condition to run only when URL contains ct_builder=true&ct_inner=true
 * 
 */
 
add_action('wp_head', function(){
   
   $css = <<<EOD
   <style type="text/css">
        #ct-builder * { 
            outline-style: dashed;
            /* Default outline - Few options to try out */
            /* Dark: RGBA(0,0,0,0.40) */
            /* Yellow: RGBA(255,250,0,0.80) */
            /* Blue: RGBA(0,135,255,0.50) */
            outline-color: RGBA(0,135,255,0.50);
            outline-width: 1px;
            /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
            outline-offset: 0px;
        
        }
        
        #ct-builder *::before {
            outline-style: dashed;
            /* Default green for :before RGBA(0,255,178,0.40) */
            outline-color: RGBA(0,255,178,0.40);
            outline-width: 2px;
            /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
            outline-offset: 2px;
            
        }
        
        #ct-builder *::after {
            outline-style: dashed;
            /* Default red for :after RGBA(255,0,0,0.50) */
            outline-color: RGBA(255,0,0,0.40);
            outline-width: 2px;    
            /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
            outline-offset: 4px;
        
        }
    </style>
EOD;

echo $css;
});