/**
 * Reusable CSS class utility Framework for styling the application.
**/

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.h-screen {
    height: 100vh;
}

.hide {
    display: none;
}

.w-full-over-100 {
    width: 200%;
}

.bg-purple {
    background-color: #800080 !important;
}

.bg-orange {
    background-color: #ff581a !important;
}

.bg-light-blue {
    background-color: #42e7ff !important;
}

.bg-white {
    background-color: #fff;
}

.outline-none {
    outline: none !important;
}

.outline-none:focus {
    box-shadow: none !important;
}

.nav-tabs + div.tab-content {
    margin-top: 1rem;
}

.dataTables_paginate {
    padding-bottom: 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

.max-w-33 {
    max-width: 33% !important;
}

.z-1 {
    z-index: 1 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-20 {
    z-index: 20 !important;
}

.z-30 {
    z-index: 30 !important;
}

.z-40 {
    z-index: 40 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-100 {
    z-index: 100 !important;
}

#loader {
    height: 88vh;
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) {
    .xl-100 {
        width: 100%;
    }
}

@media screen and (max-width: 767px){
    div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"] {
        padding: 0;
    }

    div.dataTables_wrapper div.dataTables_paginate .pagination{
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

@media only screen and (max-width: 600px) {
    #loader {
        height: 80vh;
    }
}