@import url('variables.css');

a {
    color: var(--bs-primary-t2);
    text-decoration: none;
    cursor: pointer;
}

.card {
    border-radius: 16px;
    border: none;
}

.btn {
    border-radius: 16px !important;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover {
        background-color: var(--bs-primary-t1);
        border-color: var(--bs-primary-t1);
        color: var(--bs-white);
    }

    .btn-primary:focus {
        background-color: var(--bs-primary-t1);
        border-color: var(--bs-primary-t1);
        color: var(--bs-white);
    }

.btn-outline-primary {
    background-color: var(--bs-white);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--light);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

    .btn-outline-primary:focus {
        background-color: var(--light);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

.dropdown-item.active, .dropdown-item:active, .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    background-color: var(--light);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.page-action {
    margin-bottom: 32px;
}

    .page-action div {
        display: flex;
        justify-content: space-between;
    }

    .page-action .btn {
        padding: 8px 16px;
    }

    .page-action .h5 {
        margin-top: auto;
        margin-bottom: auto;
    }

#upsert-form input {
    border-radius: 16px;
}

#upsert-form select {
    border-radius: 16px;
}

#upsert-form textarea {
    border-radius: 16px;
}

#upsert-form label {
    margin-left: 8px;
    margin-bottom: 4px;
}

#upsert-form .btn {
    font-weight: 600;
}

    #upsert-form .btn .bi {
        margin-right: 8px;
    }

.breadcrumb .breadcrumb-item {
    padding: 0;
}

.nice-select {
    width: 100%;
    border-radius: 16px;
}

    .nice-select .list {
        border-radius: 16px;
        width: 100%;
    }

td img {
    max-width: 60px;
    border-radius: 16px;
}

#action a:first-child {
    margin-right: 16px;
}

#action a {
    font-size: 20px;
}

    #action a .bi-pencil-square {
        color: var(--bs-warning);
    }

    #action a .bi-trash {
        color: var(--bs-danger);
    }

.text-primary {
    color: var(--bs-primary) !important;
}

#dt_table_wrapper th {
    background: var(--table-th) !important;
    border-color: var(--table-th) !important;
}

#dt_table_wrapper td, #dt_table_wrapper th {
    text-align: right;
}

#dt_table_wrapper tr:last-child td {
    border-bottom: none;
}

#dt_table_wrapper tr:first-child th:first-child {
    border-top-right-radius: 16px;
}

#dt_table_wrapper tr:first-child th:last-child {
    border-top-left-radius: 16px;
}

#dt_table_wrapper {
    margin-bottom: 1rem;
}

    #dt_table_wrapper .dataTables_filter input, #dt_table_wrapper .dataTables_length select, .page-action .btn, .dt-input {
        border-radius: 16px !important;
    }

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    margin-right: 0;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    margin-left: 0;
}

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--table-th) !important;
    border-color: var(--table-th) !important;
    border-radius: 16px;
    color: var(--sidebar-color) !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--table-th) !important;
    border-color: var(--table-th) !important;
    border-radius: 16px;
    color: var(--sidebar-background) !important;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: none;
    background: white;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.dt-length label {
    margin-left: 4px;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
}

.btn-group a {
    margin-left: 8px !important;
    font-size: 18px !important;
}

.modal-header {
    justify-content: space-between;
}

#CloseModalBtn {
    margin: 0;
}

.form-control {
    direction: rtl;
}

.nice-select .option {
    text-align: right !important;
}

.nice-select {
    text-align: right !important;
}

    .nice-select:after {
        left: 20px;
        right: auto;
    }

.bg-secondary {
    background-color: var(--blue-light) !important;
    color: var(--sidebar-color) !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.ltr {
    direction: ltr !important;
}

.brl-1 {
    border-left: 1px solid;
}

table {
    font-size: 14px;
}

.float-end {
    float: left !important;
}

.text-end {
    text-align: left !important;
}

.mouse-pointer {
    cursor: pointer;
}
input[type="checkbox"] {
    padding: 32px;
    width: 20px;
    height: 20px;
    margin: auto;
}
    input[type="checkbox"]:checked {
        background-color: var(--bs-primary);
    }
#msg-Title, #msg-imgUp, #msg-ProductBrandId {
    display: none;
}
.error {
    display: none;
}
.select2-container--default .select2-selection--multiple {
    height: 42px;
    border-radius: 16px;
    border-color: #dee2e6!important;
    padding-bottom: 0;
}
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        border-radius: 24px;
        background-color: var(--table-th);
        border-color: #dee2e6 !important;
        margin-left: 8px;
        padding-left: 24px;
    }
.select2-search__field {
    font-family: "Noto Sans Arabic", sans-serif !important; 
}