:root {
    --orange: #F05922;
    --blue: #2E3192;
    --b-o: linear-gradient(120deg, var(--blue) 50%, var(--orange) 50%);
    --o-b: linear-gradient(175deg, var(--orange) 50%, var(--blue) 50%);
    --o-b-webkit: -webkit-linear-gradient(70deg, var(--orange) 50%, var(--blue) 50%);
}

.border-o-b {
    border-style: solid;
    border-image: var(--o-b) 1 / 2px;
    border-image-width: 2px 0;
}

.btn-blue {
    background-color: var(--blue);
    color: white;
}

.btn-orange {
    background-color: var(--orange);
    color: white;
}

@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-15deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%, 100% {
        transform: rotateZ(0);
    }
}

.btn-orange:hover, .btn-blue:hover {
    animation: wiggle 2s linear infinite;
}

.btn-orange:hover {
    color: var(--orange) !important;
}

.btn-blue:hover {
    color: var(--blue) !important;
}

.finger-size {
    width: 3rem;
    height: 3rem;
}

.finger-height {
    height: 3rem;
}

.finger-width {
    width: 3rem;
}

.bg-orange {
    background-color: var(--orange);

}

.bg-blue {
    background-color: var(--blue);

}

.text-orange {
    color: var(--orange);

}

.text-blue {
    color: var(--blue);

}

.border-blue {
    border-color: var(--blue);
}

.border-orange {
    border-color: var(--orange);
}

@font-face {
    font-family: 'IRANYekan';
    src: url("/static/font/IRANYekanWebRegular.ttf");
}

* {
    font-family: IRANYekan, serif;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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


.circle-singleLine {
    /*margin: 4vw;*/
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    font-size: 3.3vw;
    line-height: 5vw;
    text-align: center;
    background: var(--blue);
    color: #fff;
}

.errorlist {
    color: red;
    font-weight: bold;
}


.Single-Line, .Double-Line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Double-Line {
    -webkit-line-clamp: 2;

}

.mw-50 {
    max-width: 50%;
}

.toast-success {
    border: 0.5vw solid var(--blue);
    border-radius: 0.5vw;
    color: var(--blue);
}

.toast-error {
    border: 0.5vw solid red;
    border-radius: 0.5vw;
    color: red;
}

.text-o-b {
    /* 1. تعریف گرادیان به عنوان پس‌زمینه */
    background: linear-gradient(175deg, var(--orange) 50%, var(--blue) 50%);

    /* 2. محدود کردن پس‌زمینه به ناحیه متن */
    -webkit-background-clip: text; /* برای مرورگرهای مبتنی بر WebKit (Chrome, Safari) */
    background-clip: text; /* استاندارد */

    /* 3. شفاف کردن رنگ متن تا گرادیان دیده شود */
    color: transparent; /* رنگ اصلی متن را شفاف می‌کنیم */

    /* اگر مرورگرهای قدیمی‌تر مد نظر است، می‌توانید از text-fill-color استفاده کنید */
    /* -webkit-text-fill-color: transparent; */
}