.btn-unstyled {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.swal2-popup {
    width: auto !important; /* Change the width as needed */
}

.select2 {
    width: 85% !important;
    direction: rtl;
    font-size: 23px;
    font-family: "Markazi Text", sans-serif;
    height:auto !important
}

.form-control {
    border-radius: 5px;
    width: 85%;
    font-size: 23px;
    font-family: "Markazi Text", sans-serif;
}

.select2-container--default .select2-selection--multiple {
    border: 0.5px solid #dee2e6;
    border-radius: 4px;
    font-family: "Markazi Text", sans-serif;
    direction: rtl;
    display: flex;
    align-items: center;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #428bca;
        color: white;
        font-family: "Markazi Text", sans-serif;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: white;
        font-family: "Markazi Text", sans-serif;
    }

.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* Allows the modal to extend based on content */
    margin: auto;
}

.modal-content {
    width: 100%; /* Ensures the content takes the full width of the dialog */
}

.modal-body {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto; /* Adds horizontal scrollbar if needed */
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.form-label {
    font-family: 'Tajawal-bold';
    display: block;
    direction: rtl;
    font-size: 19px;
}

th {
    font-family: 'Tajawal-bold';
    font-size: 18px;
    align-items:center
}

td {
    font-family: 'Markazi Text';
    font-size: 23px;
}

button {
    font-family: 'Tajawal-bold';
}
button[type="button"],
button[type="submit"] {
        font-family: 'Tajawal-bold';
    }
#span-profile {
    font-family: 'Tajawal-bold';
}
#footer {
    font-family: 'Tajawal-bold';
}
#ContentPlaceHolder1_hl_emp_vacation {
    font-family: 'Tajawal-bold';
}
.alert alert-danger {
    font-family: 'Markazi Text';
    font-size: 19px;
}
.table-condensed {
    width: 300px
}
.datepicker .today:hover {
    background-color: #007bff;
    color: #fff;
    transition: 0.3s;
}
#edit_popup_icon {
    display: flex !important;
    justify-content: center !important;
}
#edit_popup {
    margin-top: 2px !important;
    width: 30px !important;
    height: 30px !important;
}
#edit_popup_icon1 {
    display: flex !important;
    justify-content: center !important;
}
#edit_popup1 {
    margin-top: 2px !important;
    width: 30px !important;
    height: 30px !important;
}
input[type="number"],
input[type="text"]{
    direction: rtl
}
select 
{
    direction: rtl
}
.jstree-default.jstree-rtl .jstree-node {
    margin-top: 5px;
}
.col-4 {
    height: 85px !important;
}
.checkbox-wrapper {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

    .checkbox-wrapper input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        width: 20px;
        height: 20px;
        margin: 0;
        cursor: pointer;
    }

.checkbox-styled {
    width: 20px;
    height: 20px;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-styled {
    background-color: #20a0ff;
    border-color: #20a0ff;
}

.checkbox-styled::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
    position: absolute;
    top: 4px;
    left: 6px;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-styled::after {
    opacity: 1;
    transform: rotate(45deg);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #40488f;
    width: 250px;
    height: 50px;
    font-size: 16px
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    width: 150px;
    height: 50px;
    font-size: 19px
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 2em !important;
}

div:where(.swal2-container) .swal2-html-container {
    font-size: 1.575em !important;
}

#icon {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.form-control {
    border-top-right-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0;
}

.headpass {
    font-family: 'Tajawal-bold';
}

.datepicker {
    width: 85% !important;
    height: 48px !important;
    font-weight: 100;
    border-color: #dee2e6 !important;
}

.k-datepicker .k-picker-wrap {
    border-color: #dee2e6 !important; /* Set the border color */
}

/* Optional: Target the input field directly if needed */
.k-datepicker .k-input {
    border-color: #dee2e6 !important;
    width: 100% !important;
    color:black !important;
}