@font-face {
    font-family: iransans;
    src: url(font/IRANSans.ttf);
}

@font-face {
    font-family: nastaliq;
    src: url(font/NotoNastaliqUrdu-Medium.ttf);
}

body {
    font-family: iransans;
    direction: rtl;
    background-color: #f8f9fa;
    height: 100vh;
    margin: 0;
}

.title {
    font-family: nastaliq !important;
    color: #437abb;
    display: inline;
}

.the-nav-link {
    font-weight: bold;
    display: inline;
    font-size: 14px;
}

button {
    font-family: iransans !important;
}

.blinking-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(238, 0, 0);
    animation: blink 1.5s infinite;
    display: inline-block;
    margin-right: 10px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.blinking-dot.second {
    animation-delay: 0.75s;
}

@media (min-width:500px) {
    body {
        align-items: center;
    }
}

.cont {
    display: flex;
    justify-content: center;
}

.search-container {
    text-align: center;
}

    .search-container img {
        width: 40%;
    }

.search-box {
    width: 100%;
    margin: 0 auto;
}

    .search-box input {
        width: 90%;
        margin: 0 auto;
        border: none;
        padding: 12px 25px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        font-size: calc(0.7rem + 0.5vw);
    }

.search {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
    padding: 12px 20px;
}

.button-29 {
    width: 20%;
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #5468ff 0, #174e8b 100%);
    border: 0;
    border-radius: 1rem;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    height: 46px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding: 20px 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: calc(0.9rem + 0.5vw);
}

    .button-29:focus {
        box-shadow: #174e8b 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #174e8b 0 -3px 0 inset;
    }

    .button-29:hover {
        box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #174e8b 0 -3px 0 inset;
        transform: translateY(-2px);
    }

    .button-29:active {
        box-shadow: #3c4fe0 0 3px 7px inset;
        transform: translateY(2px);
    }

.search-box input::placeholder {
    font-size: calc(0.6rem + 0.5vw);
}

.input2 {
    color: #3c4fe0 !important;
}

input:focus {
    outline: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.305) !important;
    border: none !important;
}

.the-footer img {
    max-width: 320px;
    height: auto;
}

.the-footer p {
    color: rgb(94, 94, 94);
    margin-top: -5px;
    font-size: 13px;
    font-weight: bold;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 30px auto;
}

.modal-content {
    border-radius: 1.1rem;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.399);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
}

.modal-backdrop {
    display: none !important;
}

.custom-width {
    max-width: 800px;
    width: 100%;
}

@media (max-width: 768px) {
    .modal-dialog.custom-width {
        max-width: 90%;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 10px;
    border: none;
}

.guide-container, .close-container {
    color: #b7b7b7;
    cursor: pointer;
}

    .guide-container p {
        margin: 8px 5px 0 0;
        font-weight: 600;
        text-align: center;
    }

.test {
    margin: 8px 0 !important;
}

.guide {
    font-size: 40px;
    display: inline;
}


.the-close {
    font-size: 40px;
}

.modal-header .d-flex {
    align-items: flex-start;
}

.modal-header i {
    margin-right: 5px;
}

.modal-header img {
    margin-top: 0;
    width: 50%;
}

.modal-header .btn-close {
    margin-top: 0;
}

.modal-body {
    padding: 0;
}

.detail1 {
    font-weight: bold;
    font-size: 19px;
    color: #464646;
}

    .detail1 .good {
        color: green;
    }

    .detail1 .bad {
        color: rgb(153, 0, 0);
    }

.detail2 {
    font-size: 16px;
    color: #464646;
}

@media (max-width:560px) {
    .button-29 {
        width: 50%;
    }

    .guide, .the-close {
        font-size: 25px;
    }

    .guide-container p {
        margin: 5px 5px 0 0;
        font-size: 12px;
    }

    .modal-header img {
        width: 80%;
    }
}

@media (max-width: 767px) {
    .search-container img {
        width: 80%;
    }

    .title {
        font-size: 14px;
    }

    .the-nav-item {
        margin: 8px 2px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .the-nav-link {
        font-size: 13px;
    }
}

.the-nav-item a {
    color: rgb(75, 75, 75) !important;
}

    .the-nav-item a:hover, .active-menu a {
        color: black !important;
    }

.active-menu {
    border-bottom: 2px solid rgb(238, 0, 0);
    padding-bottom: 4px;
    border-radius: 4px;
    transition: 0.4ms;
}

.wrapper {
    width: 600px;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.rang {
    text-align: center;
}

.rang-title {
    display: inline-block;
    width: 200px;
}

.rang-number {
    width: 100%;
    text-align: center;
    border-width: 0;
    font-size: 50px;
    font-weight: 900;
    background-color: #fff;
    transition: 0.5s;
}

.meter {
    display: block;
    width: 273px;
    height: 155px;
    margin: 0 auto;
}

.meter-left {
    transform: skewX(1deg) skewY(2deg);
    stroke-width: 53px;
    stroke-dashoffset: 253;
    /*stroke-dasharray: 120 400;*/
    stroke-dasharray: 106 400;
    stroke: red;
    fill: none;
}

.meter-center {
    transform: skewX(1deg) skewY(0deg);
    stroke-width: 53px;
    stroke-dashoffset: 127;
    /*stroke-dasharray: 120 400;*/
    stroke-dasharray: 88 400;
    stroke: orange;
    fill: none;
}

.meter-right {
    transform: skewX(2deg) skewY(0deg);
    stroke-width: 53px;
    stroke-dashoffset: 1;
    /*stroke-dasharray: 120 400;*/
    stroke-dasharray: 101 350 155;
    stroke: green;
    fill: none;
}

.meter-clock {
    transition: 0.5s;
    transform: rotate(-54deg);
    transform-origin: 137px 146px;
    fill: black;
}

.meter-circle {
    fill: black;
}