.bg-primary {
    background: #FFF;
}

.logo {
    text-align: center;
}

.content {
    margin-top: 10%;
}

.content1 {
    margin-top: 3%;
}

.forgetpass {
    float: right;
    padding: 2px 0;
}

.heading {
    color: #333;
    text-align: center;
    font-size: 18px;
    margin-bottom: 30px;
}

.heading1 {
    color: #333;
    text-align: left;
    font-size: 18px;
    margin-left: 15px;
}

.TopButton {
    float: right;
    margin-top: 13px;
}

.text {
    color: #333;
    text-align: center;
}

.back {
    margin: 0 0 30px;
    text-align: center;
}

.backButton {
    font-size: 14px;
}

.Button {
    background: #5CB85C;
    padding: 30px 0px;
    margin-bottom: 30px;
}

.Appname {
    margin: 0px;
    text-align: center;
    color: #FFF;
}

.AddButton {
    margin-top: 40px;
}

.footer {
    text-align: center;
}



/*Extra Added*/

.loding {
    position: fixed;
    top: 45%;
    left: 46%;
    z-index: 5;
}

.lodingbg {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.bggreen {
    background: #5cb85c;
}

.bgred {
    background: #ff0000;
}

.bgwhite {
    background: #FFF;
}

.colorwhite {
    color: #FFF;
}

.message {
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.dataTables_filter {
    float: right;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }


        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }


    tr {
        border: 1px solid #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 45% !important;
    }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
	Label the data
	*/
        td:nth-of-type(1):before {
            content: "ID";
        }

        td:nth-of-type(2):before {
            content: "EMAIL";
        }

        td:nth-of-type(3):before {
            content: "ROLE";
        }
}

.MarginTop15 {
    margin-top: 15px;
}

.MarginBottom10 {
    margin-bottom: 10px;
}

.color-red {
    color: red;
}