/*.breakpoint{position:fixed;top:0;left:40%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}*/
@media only screen and (-webkit-device-pixel-ratio:1),(resolution:1dppx),(resolution:96dpi)
{
    @media (min-width:1400px){
    .css-filename::after {color: rgb(255, 0, 255);content: "xxl.css";}
    }
    @media (min-width:1200px) and (max-width:1400px){
    .css-filename::after {color: red;content: " xl.css";}
    }
    @media (min-width:992px) and (max-width:1200px){
    .css-filename::after {color: rgb(0, 4, 255);content: " lg.css";}
    }
    @media (min-width:768px) and (max-width:992px){
    .css-filename::after {color: rgb(255, 251, 0);content: " md.css";}
    }
    @media (min-width:576px) and (max-width:768px){
    .css-filename::after {color: rgb(0, 255, 0);content: " sm.css";}
    }
    @media (max-width:576px){
    .css-filename::after {color: rgb(255, 123, 0);content: " xs.css";}
    }
}
@media only screen and (-webkit-device-pixel-ratio:2.625),(resolution:2.625dppx),(resolution:252dpi)
{
    @media only screen and (min-device-width :412px) and (max-device-width :800px) and (orientation :portrait){
    .breakpoint{position:fixed;top:0;left:10%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}   
    .css-filename::after {color: red;content: " xs-2625dppx-POR.css";}
    }
    @media only screen and (min-device-width :412px) and (max-device-width :800px) and (orientation :landscape){
    .breakpoint{position:fixed;top:0;left:30%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}
    .css-filename::after {color: rgb(0, 255, 0);content: " xs-2625dppx-LAN.css";}
    }
}

@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){
        .breakpoint{position:fixed;top:0;left:10%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}   
    .css-filename::after {color: red;content: " iphone-678-POR.css";}
    }
    @media only screen and (device-width :667px) and (device-height :375px) and (orientation :landscape){
        .breakpoint{position:fixed;top:0;left:10%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}   
        .css-filename::after {color: red;content: "iphone-678-LAN.css";}
    }
}
/*@media (min-width:576px) and (max-width:768px){
    .breakpoint{position:fixed;top:0;left:30%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}   
    .css-filename::after {color: rgb(0, 255, 0);content: " kn-sm.css";}*/


@media only screen and (-webkit-device-pixel-ratio:3),(resolution:3dppx),(resolution:288dpi){
    @media (max-width:576px){
        .breakpoint{position:fixed;top:0;left:10%;border:3px solid #73ad21;color:rgb(255, 255, 255);background-color:rgb(141, 141, 141);padding:5px;z-index:500}   
        .css-filename::after {color: rgb(255, 115, 0);content: " xs-3dppx.css";}
    }
}