/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Helper classes for modifying the display property and table layouts.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/cheatsheet.html#helper
 *
 *
 *  1. Element Types
 *  2. Remove Psudo Elements
 *  3. Circle
 */

/* 1. Element Types */
.rsx-block {
    display: block !important;
}

.rsx-inline-block {
    display: inline-block !important;
}

.rsx-inline {
    display: inline !important;
}

.rsx-table {
    display: table !important;
    width: 100%;
    table-layout: fixed;
}

.rsx-table-row {
    display: table-row !important;
}

.rsx-table-cell {
    display: table-cell !important;
    float: none !important;
}

.rsx-table-fixed {
    table-layout: fixed !important;
}

.rsx-table-auto {
    table-layout: auto !important;
}

@media (max-width: 519px) {
    .rsx-block-xs {
        display: block !important;
    }

    .rsx-inline-block-xs {
        display: inline-block !important;
    }
    
    .rsx-inline-xs {
        display: inline !important;
    }

    .rsx-hidden-xs {
        display: none !important;
    }

    .rsx-table-xs {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

    .rsx-table-row-xs {
        display: table-row !important;
    }

    .rsx-table-cell-xs {
        display: table-cell !important;
        float: none !important;
    }

    .rsx-table-fixed-xs {
        table-layout: fixed !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-block-sm {
        display: block !important;
    }

    .rsx-inline-block-sm {
        display: inline-block !important;
    }
    
    .rsx-inline-sm {
        display: inline !important;
    }

    .rsx-table-sm {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

    .rsx-table-row-sm {
        display: table-row !important;
    }

    .rsx-table-cell-sm {
        display: table-cell !important;
        float: none !important;
    }

    .rsx-table-fixed-sm {
        table-layout: fixed !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-block-md {
        display: block !important;
    }

    .rsx-inline-block-md {
        display: inline-block !important;
    }
    
    .rsx-inline-md {
        display: inline !important;
    }

    .rsx-table-md {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

    .rsx-table-row-md {
        display: table-row !important;
    }

    .rsx-table-cell-md {
        display: table-cell !important;
        float: none !important;
    }

    .rsx-table-fixed-md {
        table-layout: fixed !important;
    }
}


@media (min-width: 1240px) {
    .rsx-block-lg {
        display: block !important;
    }

    .rsx-inline-block-lg {
        display: inline-block !important;
    }
    
    .rsx-inline-lg {
        display: inline !important;
    }

    .rsx-table-lg {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

    .rsx-table-row-lg {
        display: table-row !important;
    }

    .rsx-table-cell-lg {
        display: table-cell !important;
        float: none !important;
    }

    .rsx-table-fixed-lg {
        table-layout: fixed !important;
    }
}




/* 2. Remove Psudo Elements */
.rsx-remove-psudo-both:after,
.rsx-remove-psudo-both:before,
.rsx-remove-psudo-after:after,
.rsx-remove-psudo-before:before {
    content: none !important;
}


@media (max-width: 519px) {
    .rsx-remove-psudo-both-xs:after,
    .rsx-remove-psudo-both-xs:before,
    .rsx-remove-psudo-after-xs:after,
    .rsx-remove-psudo-before-xs:before {
        content: none !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-remove-psudo-both-sm:after,
    .rsx-remove-psudo-both-sm:before,
    .rsx-remove-psudo-after-sm:after,
    .rsx-remove-psudo-before-sm:before {
        content: none !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-remove-psudo-both-md:after,
    .rsx-remove-psudo-both-md:before,
    .rsx-remove-psudo-after-md:after,
    .rsx-remove-psudo-before-md:before {
        content: none !important;
    }
}


@media (min-width: 1240px) {
    .rsx-remove-psudo-both-lg:after,
    .rsx-remove-psudo-both-lg:before,
    .rsx-remove-psudo-after-lg:after,
    .rsx-remove-psudo-before-lg:before {
        content: none !important;
    }
}




/* 2. Remove Psudo Elements */
.rsx-remove-psudo-both:after,
.rsx-remove-psudo-both:before,
.rsx-remove-psudo-after:after,
.rsx-remove-psudo-before:before {
    content: none !important;
}


@media (max-width: 519px) {
    .rsx-remove-psudo-both-xs:after,
    .rsx-remove-psudo-both-xs:before,
    .rsx-remove-psudo-after-xs:after,
    .rsx-remove-psudo-before-xs:before {
        content: none !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-remove-psudo-both-sm:after,
    .rsx-remove-psudo-both-sm:before,
    .rsx-remove-psudo-after-sm:after,
    .rsx-remove-psudo-before-sm:before {
        content: none !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-remove-psudo-both-md:after,
    .rsx-remove-psudo-both-md:before,
    .rsx-remove-psudo-after-md:after,
    .rsx-remove-psudo-before-md:before {
        content: none !important;
    }
}


@media (min-width: 1240px) {
    .rsx-remove-psudo-both-lg:after,
    .rsx-remove-psudo-both-lg:before,
    .rsx-remove-psudo-after-lg:after,
    .rsx-remove-psudo-before-lg:before {
        content: none !important;
    }
}




/* 3. Circle */
.rsx-display-circle {
    border-radius: 50% !important;
}


@media (max-width: 519px) {
    .rsx-display-circle-xs {
        border-radius: 50% !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-display-circle-sm {
        border-radius: 50% !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-display-circle-md {
        border-radius: 50% !important;
    }
}


@media (min-width: 1240px) {
    .rsx-display-circle-lg {
        border-radius: 50% !important;
    }
}