.detail-view-10pct
{
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
}

@media screen and (min-width: 45cm) and (min-resolution:96dpi)
{

    .detail-view-10pct
    {
        border-left-width: 12cm !important;
        border-right-width: 12cm !important;
        border-color: Yellow !important;
    }

}

@media screen and (max-width: 45cm) and (min-width: 35cm) and (min-resolution:96dpi)
{

    .detail-view-10pct
    {
        border-left-width: 10cm !important;
        border-right-width: 10cm !important;
        border-color: Green !important;
    }

}

@media screen and (max-width: 35cm) and (min-width: 25cm) and (min-resolution:96dpi)
{

    .detail-view-10pct
    {
        border-left-width: 6cm !important;
        border-right-width: 6cm !important;
        border-color: Red !important;
    }
}


@media screen and (max-width: 25cm) and (min-width: 17cm) and (min-resolution:96dpi)
{

    .detail-view-10pct
    {
        border-left-width: 2cm !important;
        border-right-width: 2cm !important;
        border-color: Blue !important;
    }
}


@media screen and (max-width: 17cm) and (min-resolution:96dpi)
{

    .detail-view-10pct
    {
        border-left-width: 0cm !important;
        border-right-width: 0cm !important;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape)
{

    .detail-view-10pct
    {
        border-left-width: 1cm;
        border-right-width: 1cm;
        border-color: Violet;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait)
{

    .detail-view-10pct
    {
        border-left-width: 0cm;
        border-right-width: 0cm;
    }
}