.aside-toolbar {
    padding: 0em 1.5em 0em 1.5em;
    border-bottom: 1px dashed #1f212a;
}

.flat-btn {
    border: none;
    background-color: transparent;
    padding: 0px;
}
/* `.flat-btn` is not a `.btn`, so the theme's focus ring does not reach it. Keyboard users
   were left with the browser default on a borderless 25px glyph. */
.flat-btn:focus-visible {
    outline: none;
    border-radius: 0.475rem;
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}


.flatpickr-current-month input.cur-year{
    padding-right:10px;
}

.select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-search__field {
    height: 18px;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    left: 5%;
}


.select2-container--bootstrap5 .select2-selection__clear {
    right: 85%;
}

[type="tel"],
[type="url"],
[type="email"],
[type="number"],
[type="password"] {
    direction: rtl;
}

.flatpickr-wrapper{
    width:100%;
}

.numInputWrapper span {
    left: 2.9em !important;
    right: auto !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after {
    right: auto !important;
    left: 1.25rem !important;
}

.start-115 {
    right: 110% !important;
}

.start-103 {
    right: 108% !important;
}

.start-98 {
    right: 98% !important;
}

.ck-content, .ck-toolbar, .ck-content.ck-focused{
    background-color: var(--bs-gray-100) !important;
    border-radius: 0rem 0rem 0.475rem 0.475rem !important;
    border-color: var(--bs-gray-300) !important;
    border-top: 0px !important;
    font-weight: 500 !important;
    font-family:var(--djdt-font-family-primary);
    color: var(--bs-gray-700) !important;
    font-size: 1.1rem !important;
}

.table_break_all{
    word-break: break-all !important
}

.table_break_word{
    word-break: break-word !important
}

@media (min-width: 768px) {
    .h-md-86 {
        height: 86% !important;
    }
}

.selected-package {
    order: -1 !important;
    margin-top: 0.3rem !important;
}

.golden-medal {
    background-color: rgba(255, 215, 0, 0.5) !important;
}

[data-bs-theme=dark] .golden-medal {
    background-color: rgba(191, 165, 10, 0.5) !important;
}

.silver-medal {
    background-color: rgba(192, 192, 192, 0.5) !important;
}

[data-bs-theme=dark] .silver-medal {
    background-color: rgba(169, 169, 169, 0.5) !important;
}

.bronze-medal {
    background-color: rgba(205, 127, 50, 0.5) !important;
}

[data-bs-theme=dark] .bronze-medal {
    background-color: rgba(169, 113, 66, 0.5) !important;
}

.copper-medal {
    background-color: rgba(184, 115, 51, 0.5) !important;
}

[data-bs-theme=dark] .copper-medal {
    background-color: rgba(156, 82, 33, 0.5) !important;
}


[data-bs-theme=dark] .score-number {
    color: white !important;
}


/* Force the whole input wrapper to follow RTL */
.iti {
    direction: rtl;
    text-align: right;
    display: block;
}

/* Make sure the flag dropdown stays on the left */
.iti__flag-container {
    left: auto !important;
    right: 0 !important;
}

/* Adjust the input field padding so digits don’t overlap the flag */
.iti input {
    padding-right: 105px !important;  /* space for flag on the left */
    padding-left: 10px;
    text-align: right; /* numbers on the right */
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-right: 6px;
}

.iti__selected-dial-code {
    direction: ltr;
}

.iti__country-list {
    direction: ltr;
    text-align: left;
}

.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-left: 0px !important;
}

/*
  The six code boxes, on one line at every width.

  They were a hard 60px each, so the row needed 405px before any padding -- off the edge of every
  phone narrower than about 500px. `flex: 1 1 0` sizes each box from what the row actually has, so it
  cannot overflow by construction.

  The size has to come from the *container*, not from `vw`: the form sits in `w-lg-50`, so a 992px
  desktop gives the row 336px where a 768px tablet gives it 678px. A viewport-width formula grows
  across that boundary while the space available shrinks, and would overflow exactly there.
*/
.otp-row {
    /* !important because Metronic's own gap utilities carry it, so a `gap-*` class on the row would otherwise win. Fluid: proportional while the row is short of space, settling at 1rem once there is room -- 0.5rem left 60px boxes looking joined up on a desktop. */
    gap: clamp(0.375rem, 2.5vw, 1rem) !important;
    max-width: 28rem;
    margin-inline: auto;
}

.otp-input {
    flex: 1 1 0;
    /* Both floors are stated. `aspect-ratio` transfers a minimum on one axis into a minimum on the other, and a 44px floor here becomes a 44px floor on the width -- six of those plus gaps do not fit a 320px screen, which is the one place the floor was meant to help. The box lands at about 42px there and 60px on a desktop, and it is square at every width in between. */
    min-width: 0;
    min-height: 0;
    width: auto;
    max-width: 3.75rem;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0 0.25rem;
    text-align: center;
    align-self: center;
    font-size: 1.75rem;
    line-height: 1;
}

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.no-arrow[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.d-flex-normal{
    display: flex;
}

/* indent child */
td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
    width: 28px;
}

tr.shown td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

.dt-child-wrap {
    padding: 0 0 0 48px;
}

.logistics-card {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: -webkit-fill-available;
}

.package-track-card {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    height: -webkit-fill-available;
}

.logistics-card .card-body {
    align-content: center !important;
}