.breakpoint{border:3px solid #fe6600;border-radius: 8px;color:#ffffff;background-color:#8D8D8D59;padding:0 2% 0 2%;z-index:500;font-size:1em;}  
/*DPPX 1*/
@media screen and (orientation: portrait) {
    .orientation::after {color: #ffffff;content: " PORTRAIT\a"; white-space: pre;}
}
@media screen and (orientation: landscape) {
    .orientation::after {color: #ffffff;content: " LANDSCAPE\a"; white-space: pre;}
}
@media only screen and (-webkit-device-pixel-ratio:1),(resolution:1dppx),(resolution:96dpi)
{
    /*XXL*/
    @media (min-width:1400px){
    .css-filename::after {color: #FF00FF;content: " XXL";}
    }
    /*XL*/
    @media (min-width:1200px) and (max-width:1400px){
    .css-filename::after {color: #ff0000;content: " XL";}
    }
    /*LG*/
    @media (min-width:992px) and (max-width:1200px){
    .css-filename::after {color: #0000ff;content: " LG";}
    }
    /*MD*/
    @media (min-width:768px) and (max-width:992px){
    .css-filename::after {color: #ffff00;content: " MD";}
    }
    /*SM*/
    @media (min-width:576px) and (max-width:768px){
    .css-filename::after {color: #00ff00;content: " SM";}
    }
    /*XS*/
    @media (max-width:576px){
    .css-filename::after {color: #fe6600;content: " XS";}
    }        
}
/*DPPX 1.875*/
@media only screen and (resolution >= 1.875dppx){
    /*XS*/    
    .css-filename::after {color: #fe6600;content: " xs.css";}
}
/*DPPX 2*/
@media only screen and (-webkit-device-pixel-ratio:2),(resolution:2dppx),(resolution:192dpi)
{
    @media only screen and (min-device-width :375px) and (max-device-width :667px) and (orientation :portrait){
    .css-filename::after {color: #ff0000;content: " 2dppx-POR-375min.css";}
    }
    @media (min-width:768px) and (max-width:992px){/* and (orientation :portrait)*/
        .css-filename::after {color: #FF00FF;content: " 2dppx-MD";}
    }
    @media (min-width:992px) and (max-width:1200px) and (orientation :landscape){
        .css-filename::after {color: #0000ff;content: " 2dppx-LG";}
    }
    @media (min-width:1200px) and (orientation :landscape){
        .css-filename::after {color: #0000ff;content: " 2dppx-LG";}
    }
}
/*DPPX 2.625 greater than 2dppx and less than 3dppx*/
@media only screen and (resolution > 2dppx) and (resolution < 3dppx)
{
    @media only screen and (max-device-width :576px) and (orientation :portrait){
    .css-filename::after {color: #ff0000;content: " xs->2 dppx-POR";}
    }
    @media only screen and (min-device-width :576px) and (orientation :landscape){
    .css-filename::after {color: #00ff00;content: " gt-2dppx - LAN";}
    }
}
/*DPPX 3*/
@media only screen and (-webkit-device-pixel-ratio:3),(resolution:3dppx),(resolution:288dpi){
    @media (max-width:576px){
        .css-filename::after {color: #fe6600;content: " xs-3dppx.css";}
    }
}