/* ===========================
   GENERAL
=========================== */

body{
    color:#333;
    margin:0;
    padding:0;
    overflow-x:hidden;
    box-sizing:border-box;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

.main-content{
    width:auto;
    transition:all .3s ease;
}

.container{
    width:100%;
    max-width:100%;
    margin:20px auto;
    overflow:hidden;
}

/* ===========================
   TABLE
=========================== */

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    min-width:1100px;
    border-collapse:collapse;
}

table th,
table td{
    padding:12px;
    text-align:left;
    vertical-align:middle;
}

table th{
    white-space:nowrap;
}

table td{
    white-space:nowrap;
}

/* ===========================
   SEARCH FORM
=========================== */

form{
    display:flex;
    gap:10px;
    margin:20px 0;
    align-items:center;
}

form input[type="text"]{
    flex:1;
    min-width:200px;
}

.btn-search{
    white-space:nowrap;
}

/* ===========================
   TOP BUTTONS
=========================== */

.top-buttons{
    display:flex;
    justify-content:flex-end;
    margin-bottom:20px;
    gap:10px;
    flex-wrap:wrap;
}

.add-btn{
    white-space:nowrap;
}

/* ===========================
   ACTION LINKS
=========================== */

.action-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.action-links a{
    text-decoration:none;
}

/* ===========================
   DOCUMENT LINK
=========================== */

.document-link a{
    white-space:nowrap;
}

/* ===========================
   PAGINATION
=========================== */

.pagination{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px;
}

/* ===========================
   LARGE TABLETS
=========================== */

@media (max-width:1024px){

    .container{
        padding:15px;
    }

    table th,
    table td{
        padding:10px;
        font-size:14px;
    }

}

/* ===========================
   TABLETS
=========================== */

@media (max-width:768px){

    .main-content{
        padding:12px;
    }

    .container{
        margin:15px auto;
        padding:12px;
    }

    h2{
        font-size:24px;
        text-align:center;
    }

    /* Search */

    form{
        flex-direction:column;
        align-items:stretch;
    }

    form input[type="text"]{
        width:100%;
    }

    .btn-search{
        width:100%;
    }

    /* Button */

    .top-buttons{
        justify-content:center;
    }

    .add-btn{
        width:100%;
        text-align:center;
    }

    /* Table */

    table{
        min-width:1000px;
    }

    table th,
    table td{
        font-size:13px;
        padding:8px;
    }

    /* Actions */

    .action-links{
        flex-direction:column;
        gap:6px;
    }

    .pagination{
        gap:6px;
    }

}

/* ===========================
   PHONES
=========================== */

@media (max-width:480px){

    .main-content{
        padding:10px;
    }

    .container{
        padding:10px;
    }

    h2{
        font-size:20px;
    }

    table th,
    table td{
        font-size:12px;
        padding:6px;
    }

    .pagination a{
        padding:6px 10px;
        font-size:13px;
    }

}

/* ===========================
   PREVENT HEADER OVERFLOW
=========================== */

header,
nav{
    max-width:100%;
}

img{
    max-width:100%;
    height:auto;
}