/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

#loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

/* Variable */
:root {
    --visible: 0;
    --hidden: 100%;
    --animation-duration: .5s;
}

/* Scroll Bar */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-dark-text-emphasis) var(--bs-white);
}
*::-webkit-scrollbar {width: 12px}
*::-webkit-scrollbar-track {background: var(--bs-white)}
*::-webkit-scrollbar-thumb {background-color: var(--bs-dark-text-emphasis);border: 3px solid var(--bs-white)}

/* Bootstrap Default Layouting */
.selector-for-some-widget {box-sizing: content-box}

/* Basic Usage */
body, html {
    position: relative;
    width: 100%;
    margin: auto;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-gray-900)
}

a {
    color: var(--bs-primary) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: .2s
}

a:hover {
    color: var(--bs-danger);
    text-decoration: none !important
}

textarea {
    resize: none !important
}

.full {
    width: 100%;
    margin: auto
}

.form-label {
    font-size: 13px;
    display: block;
    position: relative;
}

.form-control, .form-select {
    resize: none !important
}

.form-control:hover, .form-select:hover, .form-input-check:hover, .form-control:focus, .form-select:focus, .form-input-check:focus {
    border: 1px solid var(--bs-primary) !important;
    box-shadow: none !important
}

.table-responsive {
    max-height: 100vh !important;
    overflow-x: auto !important
}

.table {
    width: 100% !important;
    margin: auto !important
}

.table thead {
    border-bottom: 1px solid var(--bs-gray-300) !important;
    font-weight: normal !important;
    background: var(--bs-gray-900) !important;
    color: var(--bs-white) !important
}

.table tbody {
    border-top: 1px solid var(--bs-gray-300) !important
}

.table td {
    vertical-align: middle !important;
}

.btn:hover, 
.btn:focus, 
.nav-tabs .nav-link, 
.accordion-item, 
.accordion-header, 
.accordion-button, 
.list-group, 
.list-group .list-group-item, 
.collapse, 
.collapse .card-body, 
.modal-header {
    box-shadow: none !important
}

.dropdown-menu {
    padding: 5px !important;
    transition: .2s
}

/* Datatables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 20px
}

/* Media Query */
@media screen and (max-width: 720px){
    .row [class^="col-"] {
        margin-bottom: 20px !important
    }

    .row [class^="col-"]:last-child {
        margin-bottom: 0px !important
    }
}