@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
.tajawal-extralight {
    font-family: "Tajawal", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.tajawal-light {
    font-family: "Tajawal", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.tajawal-regular {
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.tajawal-medium {
    font-family: "Tajawal", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.tajawal-bold {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.tajawal-extrabold {
    font-family: "Tajawal", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.tajawal-black {
    font-family: "Tajawal", sans-serif;
    font-weight: 900;
    font-style: normal;
}

html {
    background: #f0f2f5 !important;
}

html,
body {
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    background-color: #f8f9fa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.card .card-header {
    padding: 1rem;
}

.card .card-body {
    font-family: "Tajawal", Helvetica, Arial, sans-serif;
    padding: 0.5rem;
}

.form-check {
    display: block;
    min-height: auto;
    padding-left: 0.25em;
    margin-bottom: 0.125rem;
}

.bg-gradient-primary {
    background-image: linear-gradient(195deg, #224047 0%, #2b303f 100%) !important;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    padding: 1rem 0;
    border: 1px #ececec solid;
    margin: 5px;
}

.table td,
.table th {
    white-space: normal;
}

label,
.form-label {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #3f424f;
    margin-left: 0.25rem;
}

.badge-info {
    background-color: #17a2b8;
}

.badge-success {
    background-color: #28a745;
}

.badge-warning {
    background-color: #ffc107;
}

.badge-danger {
    background-color: #dc3545;
}

.badge-primary {
    background-color: #007bff;
}

.badge-secondary {
    background-color: #6c757d;
}

.badge-light {
    background-color: #f8f9fa;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.badge-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.form-control {
    border: 1px #f0f2f5 solid;
    padding: 10px;
}

.page-link.active,
.active>.page-link {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #000000;
    border-color: #000000;
}

.overFlowColumn{
    overflow-wrap: anywhere;
    height: 80px;
    overflow: hidden;
    max-width: 300px;
}
/* ****************** sa work***********************/

.form-floating input,
.form-floating textarea {
    padding-inline-start: 10px !important;
}

.form-floating label {
    left: 10px;
}

.btn-icon {
    padding: 5px 15px !important;
    margin: 0 2px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
}

.edit-btn-icon {
    background: #dddddd;
}

.delete-btn-icon {
    /* background: #ff000069;
    font-size: 14px; */
    border: 1px solid !important;
    padding: 2px 12px !important;
}

.form-date label {
    display: block;
}

.form-date {}

.form-date input {
    width: 100%;
    border: 1px solid #c2c2c2;
    border-radius: 6px;
    padding: 5px 10px;
}