body {
    margin: 0;
    padding: 0;
    direction: rtl;
    font-size: 1rem;
    text-shadow: 0 0 1px #000;
}

header {
    background-color: #a80000;
    text-align: center;
    background-image: url(bg-header.png);
    background-position: center;
    background-repeat-y: no-repeat;
    background-size: contain;
    overflow: hidden;
}

.logo {
    display: block;
    margin: 0 auto
}

    .logo img {
        width: 100%
    }

    .logo:after {
        box-shadow: inset 0 0 0 5px #a80000;
        content: '';
        display: block;
        position: absolute;
        top: 0;
    }

/*.btn {
    border-radius: .2rem;
    display: flex
}*/

nav {
    max-width: 100vw;
    text-align: center;
    margin: 0;
    background-color: #000;
    display: block;
    clear: both;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(bg-menu.png);
    background-position-y: 4px;
    background-size: 63px;
}

    nav .btn {
        color: #fffd;
        background-color: #e8e8e8;
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);
        transition: all .7s;
        font-size: 1rem;
        font-weight: bold;
        padding: .7rem 1.4rem !important;
        margin: 0 .35rem;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        text-shadow: 0 0 5px #0009;
        border: 1px solid #fff1;
        box-shadow: 0 0 3px 1px #000;
    }

        nav .btn:hover {
            color: #fff;
            background: rgb(225,225,225);
            background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.4) 100%);
            transition: all .25s;
            transform: scale(1.07);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            text-shadow: 0 0 7px #0009,0 0 2px #000c;
            border-color: #fff1 #fff1 #fff7 #fff7;
            box-shadow: 0 0 5px 2px #000;
        }

.menu {
    display: flex;
    padding: 0 1rem
}

.red {
    color: red
}

a {
    text-decoration: none
}

.d-none {
    display: none
}

/*.row {
    display: flex;
    margin: 0 auto -1px;
    border: 1px solid #aaa;
    width: calc(100vw - 2rem);
    max-width: 68rem;
    transition: all .2s
}

    .row:nth-child(odd) {
        background-color: #00000014
    }

        .row:nth-child(odd):hover {
            background-color: #00000007
        }

    .row:nth-child(even) {
        background-color: #00000035
    }

        .row:nth-child(even):hover {
            background-color: #00000025
        }

    .row:first-child {
        border-radius: .35rem .35rem 0 0;
        margin-top: 2rem;
    }

    .row:last-child {
        border-radius: 0 0 .35rem .35rem;
        margin-bottom: 2rem;
    }*/

.cel-no,
.cel-img,
.cel-txt {
    padding: 1rem;
}

.cel-no {
    font-size: 2.5rem;
    align-items: center;
    display: inline-flex;
    width: 5vw;
    justify-content: center;
    padding-left: 0;
}

.cel-img img {
    max-width: 100%;
    transition: all .35s;
    box-shadow: 0 0 0 0 #0000;
}


.cel-txt:last-child {
    /* display:none; */
}

.day {
    color: #3399ff
}

.sex {
    color: #cc0000
}

h1 {
    text-align: center
}

.list main {
    min-height: calc(100vh - 16.14rem)
}

/*****				 Video 				*****/

.live .row {
    flex-direction: column
}

.cel-video iframe {
    width: 100%;
    height: calc(100vw * 0.583 - 2rem - 2px);
    border: 0;
    max-height: 38.5rem;
    margin: 0 0 -.45rem;
}

.cel-video-title {
    margin: 0 auto 2rem;
    font-size: 1.4rem;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    text-shadow: 0 0 3rem #000,0 0 2rem #000,0 0 1rem #000,0 0 .5rem #000;
    background: url(bg-header.png) #8a0000 no-repeat center -10rem;
    color: #fff;
}

/*.row, .row:hover {
    background-color: #fff;
    border: none !important;
    border-radius: 0 !important
}*/



/*****				 Signe 				*****/

.form-help {
    display: flex;
    word-spacing: -.1rem;
    letter-spacing: 0;
    justify-content: center;
}

    .form-help a {
        margin: -.2rem .5rem 0;
        padding: .2rem 1rem .14rem;
        background: #0001;
        justify-content: flex-start
    }

.form-group {
    max-width: 35rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .form-group:last-child {
        justify-content: center
    }

        .form-group:last-child .btn {
            padding: .375rem 3.5rem
        }

label {
    display: inline-block;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    text-align: left;
    padding-left: .25rem;
    padding-right: 13px;
}

.box-input {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
}

input {
    display: block;
    width: 100%;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 2rem !important;
}

span.RadInput {
    padding-left: 0 !important
}

label[for=input-mob],
label[for=input-pass] {
    padding-right: 0;
    min-width: 4.3rem;
}

input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem #8a000055;
}

form {
    max-width: 500px;
    margin: 0 auto;
}

hr {
    margin: 2rem 0;
    border: 0;
    border-top-color: currentcolor;
    border-top-style: none;
    border-top-width: 0px;
    border-top: .1rem solid #8a000055;
}

.sign form .btn {
    cursor: pointer;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .sign form .btn:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
        text-decoration: none;
    }

.sign .row {
    flex-direction: column;
}

/*****				 ByDevice 				*****/

@media (min-width:1200px) {
    header, .logo:after {
        height: 14rem
    }

    .logo, .logo:after {
        width: 14rem
    }

    .cel-img {
        width: 30vw
    }

    .logo img {
        box-shadow: 0 0 10rem 10rem #a80000
    }
}

@media (max-width:1199px) {
    header, .logo:after {
        height: 13rem
    }

    .logo, .logo:after {
        width: 13rem
    }

    .cel-img {
        width: 35vw
    }

    .logo img {
        box-shadow: 0 0 8rem 8rem #a80000
    }
}

@media (max-width:991px) {
    header, .logo:after {
        height: 12rem
    }

    .logo, .logo:after {
        width: 12rem
    }

        .logo img {
            box-shadow: 0 0 7rem 7rem #a80000
        }
}


@media (min-width:768px) {
    .row:hover .cel-img img {
        transform: scale(1.07) rotate(2.5deg);
        transition: all .7s;
        box-shadow: 0 0 0 14px #fffb;
    }

    .row:hover .cel-no {
        color: #e82525;
        text-shadow: 0 0 7px #e32c2c;
    }
}

@media (max-width:767px) {
    header, .logo:after {
        height: 10rem
    }

    .logo, .logo:after {
        width: 10rem
    }

    nav .btn {
        font-size: .95rem;
        padding: .6rem .8rem !important;
    }

    .menu {
        padding: 0 .7rem
    }

    .row {
        flex-direction: column;
    }

    .cel-no {
        font-size: 2rem;
        justify-content: center;
        width: 5rem;
        background: #0007 url(bg-header.png) -114px 48px no-repeat;
        text-shadow: 0px 0px 7px #fff7;
        padding: 0px;
        height: 5rem;
        margin-bottom: -5.07rem;
        z-index: 0;
        color: #fff;
        border-width: 0 0 1px 1px;
        border-color: transparent transparent #8a0000 #8a0000;
        border-style: none solid solid solid;
    }

    .cel-txt {
        font-size: .85rem;
        width: auto;
        max-width: auto;
        text-align: center
    }

    .cel-img {
        width: 40vw;
        text-align: center;
        padding: 0
    }

    .logo img {
        box-shadow: 0 0 5rem 5rem #a80000
    }

    .hidden-mobile {
        display: none
    }

    form {
        max-width: 450px
    }

    .list .row {
        border-bottom: 7px solid #8a0000 !important
    }
}



@media (min-width:577px) {
    .cel-txt {
        max-width: 35vw;
    }
}

@media (max-width:576px) {
    .logo:after {
        box-shadow: inset 0 0 0 3px #a80000;
    }

    header, .logo:after {
        height: 7rem
    }

    .logo, .logo:after {
        width: 7rem
    }

    nav .btn {
        font-size: .8rem;
        padding: .6rem .6rem !important;
        margin: 0 .30rem;
        color: #fff;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        text-shadow: 0 0 7px #0005,0 0 2px #0007;
        border: 1px solid #fff5;
        box-shadow: 0 0 5px 2px #000;
    }

    .menu {
        padding: 0 .5rem
    }

    .row {
        flex-direction: column;
        width: 100vw;
        border: none
    }

    .cel-img {
        padding: 0;
        width: auto;
        width: auto;
    }

    .cel-no {
        font-size: 1.2rem;
        justify-content: center;
        width: 3rem;
        background: #0007 url(bg-header.png) -131px 30px no-repeat;
        text-shadow: 0px 0px 7px #0007;
        padding: 0;
        height: 3rem;
        margin-bottom: -3.07rem;
        z-index: 1;
        color: #fff;
    }

    .cel-txt {
        font-size: .8rem;
        width: auto;
        text-align: center
    }

    .cel-img {
        text-align: center;
        padding: 0
    }

    .row:first-child {
        border-radius: 0;
        margin: 0
    }

    .row:last-child {
        border-radius: 0;
        margin: 0
    }

    .logo img {
        box-shadow: 0 0 3rem 3rem #a80000
    }

    .cel-video iframe {
        height: calc(100vw * 0.57)
    }

    form {
        max-width: 400px
    }
}



@media (max-width:400px) {
    .logo:after {
        box-shadow: inset 0 0 0 2px #a80000;
    }

    header, .logo:after {
        height: 5rem
    }

    .logo, .logo:after {
        width: 5rem
    }

    nav .btn {
        font-size: .75rem;
        padding: .5rem .35rem !important;
        margin: 0 .25rem;
    }

    .menu {
        padding: 0
    }

    .row {
        flex-direction: column;
        width: 100vw;
        border: none
    }

    .cel-no {
        background: #0007 url(bg-header.png) -131px 30px no-repeat
    }

    .cel-img {
        padding-bottom: 0;
        width: auto;
        vertical-align: middle;
    }

    .cel-txt {
        font-size: .75rem;
        width: auto;
        text-align: center;
        vertical-align: middle;
    }

    .logo img {
        box-shadow: 0 0 2rem 2rem #a80000
    }

    form {
        max-width: 350px
    }
}

footer {
    background-color: #a80000;
    direction: ltr;
/*    display: flex;*/
    max-width: 100vw;
    padding: 1rem 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #fff
}

.footer-text {
}

/*بخاطر تیبل !!!! */

/*table {
    border-collapse: collapse;
    position: inherit;
    display: flex;
    clear: both;
    width: calc(100vw - 2rem);
    max-width: 68rem;
    margin: 2rem auto;
}*/

.list form {
    max-width: initial
}

.row {
}

/*tr:nth-child(odd) td {
    background-color: #00000007
}

tr:nth-child(odd):hover td {
    background-color: #00000014
}

tr:nth-child(even) td {
    background-color: #00000025
}

tr:nth-child(even):hover td {
    background-color: #00000035
}

tr:first-child td:first-child {
    border-radius: .35rem .35rem 0 0;
}

tr:last-child td:last-child {
    border-radius: 0 0 .35rem .35rem;
}*/

.row {
    flex-direction: row;
    width: initial;
    border: none;
    background: none;
}

    .row:hover {
        background: none !important;
        box-shadow: 0 0 25px #0007 inset;
    }

td div.cel-img:last-child {
    display: none
}

@media (max-width:767px) {
    td .row {
        flex-direction: column;
    }

    .list form {
        max-width: initial
    }
}

@media (max-width:576px) {
    table {
        width: 100vw;
    }

    .row {
        flex-direction: column;
        width: initial;
        border: none
    }

    tr:first-child td:first-child, tr:last-child td:last-child {
        border-radius: 0;
    }

    td {
        width: 100%;
        display: flex;
    }

        td .live {
            width: 100%
        }
}

@media (max-width:400px) {
    table {
        width: 100vw;
    }

    .row {
        flex-direction: column;
        width: initial;
        border: none;
    }
}

#MainContent_CheckBox1 {
    float: right;
    position: absolute;
    width: 90vw;
    height: 22px;
}

.checkbox {
    direction: rtl;
    padding-left: 20px;
}

    .checkbox label {
        /* display: inline-block; */
        /* padding-left: 5px; */
        display: inline;
        vertical-align: middle;
        position: relative;
        right: 7px;
    }

        .checkbox label:before {
            /* left: 0; */
            /* margin-left: -20px; */
            text-align: center;
            padding: 1px;
            content: "■";
            display: inline-block;
            position: relative;
            width: 17px;
            height: 18px;
            right: -7px;
            font-size: 14px;
            color: #fff;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            margin: 3px 0 0 0;
        }


        .checkbox label:after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

    .checkbox input[type="checkbox"] {
        opacity: 0;
        z-index: 1;
    }

.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #7cc;
}

.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.new {
    text-align: center;
    text-shadow: 0 0 2px #5d5b;
    color: #5b5;
}