﻿.resp-table {
    width:100%;
}

    table {
        background-color:white!important;
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        width: 100%;
        table-layout: fixed;
    }

table caption {
    /*font-size: 1.5em;*/
    margin: .5em 0 .75em;
}

table tr {
   /* background-color: #f8f8f8;
    border: 1px solid #ddd;*/
    padding: .35em;
}

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            /*font-size: .85em;*/
            letter-spacing: .1em;
            text-transform: uppercase;
        }


@media screen and (max-width: 767px) {
    table {
        border: 0 !important;
    }

        table caption {
           /* font-size: 1.3em !important;*/
        }

    table thead {
        border: none !important;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
    }

        table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        /*Here we are setting each td display to block*/
        table td {
            border-bottom: 1px solid #ddd;
            display: block;
            /*font-size: .8em;*/
            /*text-align: right;*/
        }

            /*
	            Now the other data-label that we have added on each td comes into play.
	        */

            table td::before {
                content: attr(data-label);
                float: right;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }

            table td .action-col{
                display:flex !important;
            }

    .actions-col {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end;
        max-width: 100%;
    }

    .actions-col td {
        width:100% !important;
    }

}