.loadscreen .ploader {
    position: absolute;
    top: calc(50vh - 50px);
    left: 0;
    right: 0;
    margin: auto;
}

.loadscreen {
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    height: 100vh;
    background: #f5f1e4;
    z-index: 999;
}

.loader {
    width: 4.8px;
    height: 4.8px;
    display: block;
    margin: 20px auto;
    position: relative;
    border-radius: 4px;
    color: rgb(254 215 150);
    background: currentColor;
    box-sizing: border-box;
    animation: animloader 0.3s 0.3s linear infinite alternate;
}

    .loader::after,
    .loader::before {
        content: '';
        box-sizing: border-box;
        width: 4.8px;
        height: 4.8px;
        border-radius: 4px;
        background: currentColor;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 15px;
        animation: animloader 0.3s 0.45s linear infinite alternate;
    }

    .loader::after {
        top: -15px;
        animation-delay: 0s;
    }

@keyframes animloader {
    0% {
        width: 4.8px
    }

    100% {
        width: 48px
    }
}
.truncate {
    display: -webkit-box; /* استفاده از نمایش به صورت جعبه انعطاف‌پذیر */
    -webkit-box-orient: vertical; /* جهت‌گیری عمودی برای جعبه */
    -webkit-line-clamp: 1; /* تعداد خطوطی که باید نمایش داده بشه */
    overflow: hidden; /* پنهان کردن متن اضافی */
    text-overflow: ellipsis; /* اضافه کردن "..." در انتهای متن */
}
/* برای مرورگرهای کروم، سافاری، اج و اپرا */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* برای مرورگر فایرفاکس */
input[type="number"] {
    -moz-appearance: textfield;
}