@font-face {
    font-family: 'IRANYekanXVF';
    src: url('/content/font/YekanXProVar/webfont/IRANYekanXVF.woff') format('woff-variations'),
    /* will be the standard and works in Safari now */
    url('/content/font/YekanXProVar/webfont/IRANYekanXVF.woff') format('woff');
    /* for the other supporting browsers */
    font-weight: 100 1000;
    font-display: fallback;
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 98%;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}

body {
    background: #fff;
    font-family: IRANYekanXVF;
}

.p-box {
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 25px;
    padding: 20px 20px 15px 20px;
    margin-top: 45px;
}

.header {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
}

    .header .logo {
        width: 80px;
        height: 80px;
    }

    .header .sys-name .t-1 {
        display: block;
        color: #000000;
        font-weight: 800;
        font-size: 16px;
    }

    .header .sys-name .t-2 {
        display: block;
        color: #333;
        font-size: 14px;
        font-weight: 550;
    }

    .header .sys-name .t-3 {
        display: block;
        color: #555;
        font-size: 14px;
        font-weight: 550;
    }

    .header .time {
        margin-right: auto;
        font-weight: 500;
        text-align: right;
        font-size: 14px;
        color: #333;
        line-height: 23px;
    }

        .header .time div {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 5px;
        }

            .header .time div.hour {
                text-align: center;
                color: #000;
                font-size: 18px;
                justify-content: center;
                letter-spacing: 3px;
                font-weight: 800;
            }

        .header .time img {
            width: 20px;
            height: 15px;
            border-radius: 4px;
        }

.footer {
    padding-top: 15px;
    border-top: 1px solid #ddd;
    margin-top: 20px;
    color: #888
}







.box-lang {
    text-align: center;
}

.select-lang {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    text-align: center;
    margin-bottom: 50px
}

    .select-lang a {
        display: block;
    }

    .select-lang .flag {
        width: 120px;
        height: 70px;
        object-fit: cover;
        border-radius: 10px;
    }

    .select-lang span {
        display: block;
        margin-top: 15px;
        color: #000;
        font-size: 16px;
    }

    .select-lang a.btn {
        margin-top: 15px;
        display: inline-block;
    }



.box-form {
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 15px;
    margin-bottom: 20px;
    min-height: 235px;
}

    .box-form .title {
        border-left: 1px solid #fff;
        width: 60px !important;
        min-height: 176px !important;
        flex-shrink: 0;
        flex-grow: 0;
        position: relative;
        display: block;
    }

        .box-form .title .ver {
            transform: rotate(-90deg);
            display: block;
            text-align: center;
            font-weight: 700;
            position: absolute;
            bottom: 75px;
            right: -86px;
            margin: auto;
            width: 235px;
            font-size: 18px;
        }

    .box-form .fields {
        padding: 10px 20px 20px 20px;
    }

        .box-form .fields label {
            margin-top: 10px;
        }

    .box-form.color-1 {
        background: #e0f3ff;
        border: 1px solid #b0e0ff;
    }

        .box-form.color-1 .title {
            border-color: #b0e0ff;
        }

        .box-form.color-1 .form-control:focus {
            outline: 2px solid #b0e0ff;
        }

        .box-form.color-1 .title .ver {
            color: #009cff;
        }


    .box-form.color-2 {
        background: #f9edff;
        border: 1px solid #eac1ff;
    }

        .box-form.color-2 .title {
            border-color: #eac1ff;
        }

        .box-form.color-2 .form-control:focus {
            outline: 2px solid #eac1ff;
        }

        .box-form.color-2 .title .ver {
            color: #a700ff;
        }

.submit-box {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

    .submit-box .btn-success {
        width: 200px;
    }

    .submit-box .btn:disabled {
        opacity: 0.3;
    }











.results {
    margin: 20px 0;
}

    .results .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border: 1px solid;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 5px;
    }

        .results .item.zoj {
            background: #b0e0ff33;
            border-color: #b0e0ff;
        }

        .results .item.fard {
            background: #eac1ff33;
            border-color: #eac1ff;
        }

        .results .item .country {
            width: 50px;
            flex-shrink: 0;
        }

            .results .item .country .flag {
                border-radius: 4px;
                width: 50px;
                height: 35px;
            }

            .results .item .country i.fa {
                width: 50px;
                font-size: 35px;
                text-align: center;
                opacity: 0.7;
                color: gray;
            }

        .results .item .name {
            width: 150px;
            font-weight: bold;
            color: #000;
            flex-shrink: 0;
        }

        .results .item .city {
            width: 100px;
            font-weight: bold;
            color: #000;
            flex-shrink: 0;
        }

        .results .item .se-name {
            width: 100px;
            color: #000;
            flex-shrink: 0;
        }

        .results .item .date {
            width: 150px;
            font-weight: bold;
            color: #000;
            flex-shrink: 0;
        }

        .results .item .msg {
            width: 200px;
            color: #000;
        }

        .results .item .elan {
            width: 80px;
            color: #000;
        }

            .results .item .elan i.fa {
                font-size: 20px
            }

.TheRed {
    color: #dc0700
}

.hiden {
    display: none;
}