/*
[Table of contents]

1. @media screen and (min-width:0\0)
   - IE

2. @media screen and (-webkit-min-device-pixel-ratio:0)
   - Chrome/Safari

3. @media screen and (min-width: 1780px) and (max-width: 1980px)
   - Larger Screens

4. @media screen and (min-width: 1500px) and (max-width: 1600px)
   - Larger Screens

5. @media screen and (max-width : 1280px)
   - Macbook and other devices

6. @media screen and (max-width : 1024px)
   - iPad devices Landscape

7. @media screen and (max-width : 980px)
   - Tabs and Tablets Landscape

8. @media screen and (max-width : 800px)
   - iPad Potrait and other devices

9. @media screen and (max-width : 767px)
   - iPhone 6Plus/Nexus 6 Landscape

10. @media screen and (max-width : 680px)
   - iPhone 6 Landscape

11. @media screen and (max-width : 580px)
   - iPhone 5 Landscape

12. @media screen and (max-width : 480px)
   - iPhone 4 Landscape and iPhone 6/6Plus Potrait

13. @media screen and (max-width : 420px)
   - iPhone 6/6Plus Potrait/Nexus 5/Samsung Galaxy Potrait
*/
@media screen and (min-width : 1367px) {
    .login-page:after {
        background-position: right bottom;
    }
}
@media screen and (max-width : 1180px) {
    .dashboard-blocks .small-box .inner {
        padding: 12px;
    }
    .dashboard-blocks .small-box h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .dashboard-blocks .small-box p {
        font-size: 24px;
    }
}
@media screen and (max-width : 1024px) {
    .table-design thead th, .table-design tbody td {
        font-size: 12px;
    }
}
@media screen and (max-width : 991px) {
    h5, .h5 {
        font-size: 1rem;
    }
    .row.custom-space {
        margin-left: -5.5px;
        margin-right: -5.5px;
    }
    .dataTabels_theam .dataTables_wrapper > .row:first-child .dataTables_filter input, 
    .search-field {
        max-width: 350px;
        width: 100%;
    }
    .row.custom-space >div {
        padding-left: 5.5px;
        padding-right: 5.5px;
    }
    
}
@media screen and (min-width : 768px) {
}
@media screen and (max-width : 767px) {
    h1, .h1 {
    font-size: 2.0rem;
    }
      
    h2, .h2 {
        font-size: 1.5rem;
    }
      
    h3, .h3 {
        font-size: 1.25rem;
    }
      
    h4, .h4{
        font-size: 1.25rem;
    }
    .form-control {
        height: calc(2.25rem + 2px);
        font-size: 0.875rem;
    }
    .btn {
        padding: 0.438rem 0.75rem;
        font-size: 0.9375rem;
    }
    .dashboard-blocks .small-box .inner {
        text-align: left;
    }
    .wrapper .content-wrapper {
        padding-left: 15px;
        padding-right: 15px; 
    }
    .content-header h3,
    .dashboard-blocks .small-box p {
        font-size: 20px;
    }
    .content-wrapper {
        background-position: left -15px top, right bottom;
    }
    .main-header:after,
    .main-header:before {
        height: 8px;
    }
    .main-header:after {
        width: 150px;
        bottom: -8px;
    }
    .main-header:before {
        width: 120px;
        bottom: -16px;
    }
    
    .whiteBox {
        padding: 15px;
    }
    .data-listing > .row > div {
        padding-bottom: 15px;
    }
    .btn {
        min-width: 120px;
    }
    .dataTabels_theam .dataTables_wrapper > .row:first-child .dataTables_filter input {
        max-width: 100%;
    }
    .dataTabels_theam .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: flex-start;
    }
}
@media screen and (max-width : 576px) {
    .graph-head h3 {
        width: 100%;
    }
    .graph-head .graph-head-detail {
        width: 100%;
        justify-content: start;
        margin-bottom: 20px;
    }
    .label,
    .btn {
        font-size: 0.75rem;
    }
    .lg-btns .btn {
        padding: 0.438rem 0.25rem;
        min-width: 116px;
        max-width: 110px;
    }
    .login-logo img, .register-logo img {
        max-width: 70%;
    }
    .login-box-msg, .register-box-msg {
        padding: 0 10px 15px;
    }
    .login-card-body, .register-card-body {
        padding: 20px 25px 25px 25px;
    }
}