@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/woff/IRANSansX-Thin.woff') format('woff'), url('../fonts/woff2/IRANSansX-Thin.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/woff/IRANSansX-UltraLight.woff') format('woff'), url('../fonts/woff2/IRANSansX-UltraLight.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/woff/IRANSansX-Light.woff') format('woff'), url('../fonts/woff2/IRANSansX-Light.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/woff/IRANSansX-Medium.woff') format('woff'), url('../fonts/woff2/IRANSansX-Medium.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/woff/IRANSansX-DemiBold.woff') format('woff'), url('../fonts/woff2/IRANSansX-DemiBold.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/woff/IRANSansX-ExtraBold.woff') format('woff'), url('../fonts/woff2/IRANSansX-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/woff/IRANSansX-Black.woff') format('woff'), url('../fonts/woff2/IRANSansX-Black.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/woff/IRANSansX-Bold.woff') format('woff'), url('../fonts/woff2/IRANSansX-Bold.woff2') format('woff2');
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/woff/IRANSansX-Regular.woff') format('woff'), url('../fonts/woff2/IRANSansX-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?ui78gn');
    src: url('../fonts/icomoon.eot?ui78gn#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?ui78gn') format('truetype'), url('../fonts/icomoon.woff?ui78gn') format('woff'), url('../fonts/icomoon.svg?ui78gn#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

i {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --card-bg: #4f91e7;
    --card-color: #fff;
    --card-hover-shadow1: rgba(63,116,85,0.4);
    --card-hover-shadow2: rgba(63,116,85,0.2);
}

* {
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    font-family: IRANSansX;
    line-height: 25px;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    direction: rtl;
}

input, textarea, button {
    font-family: IRANSansX;
}



html {
    position: relative;
    min-height: 100%;
}

body {
    background: radial-gradient(circle, #f0f0f0 0%, #ccc 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 51px);
}

.DBox {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3),0 0 30px rgba(0,0,0,0.2),0 0 50px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    min-width: 400px;
    max-width: 620px;
    margin: 42.5px auto 0;
}

    .DBox .DPayment, .DBox .DPayInfo {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-direction: column;
        width: 100%;
    }

        .DBox .DPayment .DMDate, .DBox .DPayInfo .DTotalAmount {
            background-color: #6c757d;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: -42.5px;
            margin-bottom: 22.5px;
            position: relative;
            align-self: center;
        }

        .DBox .DPayInfo .DTotalAmount {
            font-size: 18px;
            background-color: #dc3545;
            margin-bottom: 0;
        }

            .DBox .DPayInfo .DTotalAmount span {
                letter-spacing: 1px;
                font-weight: 700;
                margin: 0 5px;
            }

        .DBox .DPayment .DItems, .DBox .DPayment .DTotal {
            display: grid;
            gap: 30px 60px;
            grid-template-columns: 1fr max-content;
            color: #5f716c;
        }

            .DBox .DPayment .DItems > div:nth-child(2n), .DBox .DPayment .DTotal > div:last-child {
                font-weight: 700;
                letter-spacing: 1px;
                text-align: left;
            }

            .DBox .DPayment .DItems span, .DBox .DPayment .DTotal span {
                color: #8c9794;
                letter-spacing: 0;
                margin-right: 5px;
                font-weight: 600;
                font-size: 13px;
            }

        .DBox .DPayment .DTotal {
            font-size: 16px;
        }

            .DBox .DPayment .DTotal > div:last-child {
                color: #475250;
            }

        .DBox .DPayment a:not(.ANoBox), .DBox .DPayInfo input[type=submit] {
            background-color: #007bff;
            font-size: 16px;
            color: #fff;
            border-radius: 5px;
            display: block;
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 20px;
            transition: all 300ms;
            cursor: pointer;
        }

        .DBox .DPayInfo input[type=submit] {
            background-color: #04AA6D;
            margin-top: 0;
        }

            .DBox .DPayInfo input[type=submit]:hover {
                background-color: #059862;
            }

        .DBox .DPayment a:not(.ANoBox):hover {
            background-color: #0069d9;
        }

        .DBox .DPayment hr {
            height: 1px;
            background: #eaeaea;
            width: 100%;
            border: none;
        }

        .DBox .DPayment .DPayed {
            background: #eaeaea;
            color: #333;
            border-radius: 5px;
            text-align: center;
            padding: 10px;
        }

        .DBox .DPayInfo .DCardNo.Green {
            --card-bg: #00be92;
            --card-hover-shadow1: rgba(117,117,117,0.4);
            --card-hover-shadow2: rgba(117,117,117,0.2);
        }

        .DBox .DPayInfo .DCardNo.Red {
            --card-bg: #fe0c3c;
            --card-hover-shadow1: rgba(117,117,117,0.4);
            --card-hover-shadow2: rgba(117,117,117,0.2);
        }

        .DBox .DPayInfo .DCardNo.Purple {
            --card-bg: #6e2b8f;
            --card-hover-shadow1: rgba(117,117,117,0.4);
            --card-hover-shadow2: rgba(117,117,117,0.2);
        }

        .DBox .DPayInfo .DCardNo.Black {
            --card-bg: #333;
            --card-hover-shadow1: rgba(117,117,117,0.4);
            --card-hover-shadow2: rgba(117,117,117,0.2);
        }

        .DBox .DPayInfo .DCardNo.Yellow {
            --card-bg: #fbcd0b;
            --card-hover-shadow1: rgba(117,117,117,0.4);
            --card-hover-shadow2: rgba(117,117,117,0.2);
            --card-color: #000;
        }

            .DBox .DPayInfo .DCardNo.Yellow > *:nth-child(1) {
                background-color: rgba(255, 255, 255, 0.2);
            }

        .DBox .DPayInfo .DCardNo {
            background-color: var(--card-bg);
            color: var(--card-color);
            border-radius: 5px;
            align-self: center;
            text-align: center;
            display: grid;
            gap: 10px 30px;
            grid-template-columns: 60px 1fr 90px;
            align-items: stretch;
            justify-content: stretch;
            font-size: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: all 300ms;
        }

            .DBox .DPayInfo .DCardNo:hover {
                box-shadow: 0 0 10px var(--card-hover-shadow1),0 0 20px var(--card-hover-shadow2);
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(1) {
                display: flex;
                background-color: rgba(0,0,0,0.2);
                justify-content: center;
                align-items: center;
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(3) {
                align-self: center;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: url('../images/blubank1.jpg');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 50%;
                margin: 10px 0 10px 10px;
                width: 80px;
                height: 80px;
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(2) {
                text-align: center;
                display: flex;
                gap: 10px;
                flex-direction: column;
                justify-content: center;
            }

                .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN {
                    -moz-font-feature-settings: "ss01";
                    -webkit-font-feature-settings: "ss01";
                    font-feature-settings: "ss01";
                    letter-spacing: 2px;
                    word-spacing: 50px;
                    font-weight: 700;
                    font-size: 20px;
                }

                    .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN.Sheba {
                        letter-spacing: 1px;
                        font-size: 18px;
                    }

    .DBox .DStep {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

        .DBox .DStep span {
            display: block;
            border-radius: 50%;
            background-color: #333;
            color: #fff;
            width: 22px;
            height: 22px;
            text-align: center;
        }

input, textarea {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 26px;
    text-align: center;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 25px;
    transition: all 300ms;
    outline: none;
}

textarea {
    text-align: right;
}

    input:focus, textarea:focus {
        border: 1px solid #888;
    }

form, form > *:not(.DBtn) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-content: center;
    align-items: center;
    color: #666;
    position: relative;
}

    form > *:not(.DBtn) {
        grid-template-columns: 85px 1fr;
        gap: 5px 10px;
    }

    form > *:nth-child(n+3) {
        grid-column: 1 /-1;
    }

    form input[type=text] {
        letter-spacing: 2px;
    }

    form .input-validation-error {
        border: 1px solid #dc3545;
        box-shadow: 0 0 10px rgba(220,53,69,0.3)
    }

    form .field-validation-error {
        color: #dc3545;
        font-size: 12px;
        grid-column: 2 / -1;
    }

.DInfo h4 {
    margin: -10px 0 5px;
    font-weight: 500;
    text-align: justify;
}

ul {
    color: #333;
    font-size: 12px;
    line-height: 22px;
    margin-top: 0;
    padding: 0 20px 0 0;
}

footer {
    font-family: Verdana;
    font-size: 11px;
    direction: ltr;
    padding: 20px;
    line-height: 11px;
    color: #666;
}

    footer a {
        color: #555;
        transition: all 300ms;
    }

        footer a:hover {
            color: #333;
        }

.DMessage {
    max-width: calc(100vw-80px);
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    animation: aMessageNoRemove 300ms forwards ease-in-out;
}

    .DMessage.DNoRemove {
        display: grid;
        grid-template-columns: 18px 1fr;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 10px 20px;
    }


    .DMessage:not(.DNoRemove) {
        position: fixed;
        animation: aMessage 2s forwards ease-in-out;
        top: 10vh;
    }

    .DMessage i {
        font-size: 18px;
    }

    .DMessage.Succeed {
        background-color: #13bd6e;
    }

        .DMessage.Succeed i:before {
            content: '\e901';
        }

    .DMessage.Error {
        background-color: #dc3545;
    }

        .DMessage.Error i:before {
            content: '\e902';
        }

    .DMessage.Alert {
        background-color: #ffc107;
        color: #000;
    }

        .DMessage.Alert i:before {
            content: '\e903';
        }

    .DMessage.Info {
        background-color: #17a2b8;
    }

.DNoBox {
    display: flex;
    grid: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .DNoBox a {
        background-color: #f5f5f5;
        border-radius: 5px;
        padding: 5px 20px;
    }

        .DNoBox a:hover {
            background-color: #bbb;
            color: #fff;
        }

@keyframes aMessageNoRemove {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aMessage {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }

    10%,90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(40px);
    }
}

.ANoBox {
    margin: 20px auto;
    color: #007bff;
    font-weight: 500;
    transition: all 300ms;
}

.DBox .ANoBox {
    margin: 0 auto;
}

.ANoBox:hover {
    color: #0069d9;
}



.TBCal + img {
    position: absolute;
    left: 7px;
    top: 7px;
}

.DErrorMessages {
    font-size: 13px;
    line-height: 25px;
}

@media (max-width: 640px) {
    .DBox {
        max-width: calc(100vw - 40px);
    }

        .DBox .DPayInfo .DCardNo {
            align-self: stretch;
        }

    form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 590px) {
    .DBox .DPayInfo .DCardNo {
        gap: 10px;
    }

        .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN {
            font-size: 18px;
        }

            .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN.Sheba {
                font-size: 16px;
            }
}

@media (max-width: 490px) {

    form {
        grid-template-columns: 1fr;
    }

        form > *, form .field-validation-error {
            grid-column: 1 / -1 !important;
        }


    .DBox {
        min-width: initial;
        width: calc(100vw - 40px);
    }

        .DBox .DPayInfo .DCardNo {
            grid-template-columns: 40px 1fr 70px;
        }

            .DBox .DPayInfo .DCardNo > *:nth-child(1) {
                grid-row: 2 / span 1;
                grid-column: 1 / -1;
                padding: 5px;
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(2) {
                grid-column: 1 / span 2;
                padding-right: 10px;
                padding-top: 10px;
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(3) {
                margin-bottom: 0;
                width: 60px;
                height: 60px;
            }
}

@media (max-width: 400px) {
    .DBox .DPayInfo .DCardNo {
        grid-template-columns: 40px 1fr 60px;
    }

        .DBox .DPayInfo .DCardNo > *:nth-child(3) {
            width: 50px;
            height: 50px;
        }

        .DBox .DPayInfo .DCardNo > *:nth-child(2) {
            font-size: 14px;
        }

            .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN {
                font-size: 16px;
                letter-spacing: 1px;
            }

                .DBox .DPayInfo .DCardNo > *:nth-child(2) .DCN.Sheba {
                    font-size: 15px;
                    letter-spacing: 0;
                }

    form > *:not(.DBtn) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 359px) {

    .DBox .DPayInfo .DCardNo {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .DBox .DPayInfo .DCardNo > * {
            grid-column: 1 / -1 !important;
        }

            .DBox .DPayInfo .DCardNo > *:nth-child(2) {
                padding: 15px;
            }

            .DBox .DPayInfo .DCardNo > *:nth-child(3) {
                display: none;
            }
}





.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #e0e0e0;
    background: #f0f0f0;
    color: #888;
    font-size: 13px;
    border-radius: 4px;
}

    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
        color: #eeeeee;
        text-decoration: none;
    }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    font-weight: normal;
    color: #333;
}

    .ui-state-hover a, .ui-state-hover a:hover {
        color: #ffffff;
        text-decoration: none;
    }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #109402;
    background: #11b400;
    font-weight: normal;
    color: #ffffff;
}

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
        color: #ffffff;
        text-decoration: none;
    }

.ui-widget :active {
    outline: none;
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}
/* Icons
----------------------------------*/
/* states and ../UIImages */
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(../UIImages/ui-icons_cccccc_256x240.png);
}

.ui-widget-content .ui-icon {
    background-image: url(../UIImages/ui-icons_cccccc_256x240.png);
}

.ui-widget-header .ui-icon {
    background-image: url(../UIImages/ui-icons_ffffff_256x240.png);
}

.ui-state-default .ui-icon {
    background-image: url(../UIImages/ui-icons_cccccc_256x240.png);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../UIImages/ui-icons_ffffff_256x240.png);
}

.ui-state-active .ui-icon {
    background-image: url(../UIImages/ui-icons_222222_256x240.png);
}

.ui-state-highlight .ui-icon {
    background-image: url(../UIImages/ui-icons_4b8e0b_256x240.png);
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
    background-image: url(../UIImages/ui-icons_a83300_256x240.png);
}
/* positioning */
.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-datepicker {
    padding: 0;
    display: none;
    background-color: #eaeaea;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: 0;
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 0;
        width: 30px;
        bottom: 0;
    }

        .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
            display: block;
            position: absolute;
            background-image: url('../images/Calendar.png');
            background-position: left top;
            background-repeat: no-repeat;
            height: 10px;
            top: 14px;
            left: 10px;
        }

        .ui-datepicker .ui-datepicker-prev span {
            background-position: left -10px;
        }

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 0;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 0;
    right: auto;
}

    .ui-datepicker-rtl .ui-datepicker-prev:hover, .ui-datepicker-rtl .ui-datepicker-next:hover {
        background-color: rgba(0,0,0,0.3);
        border: none;
    }

.ui-datepicker .ui-datepicker-title {
    margin: 0px;
    text-align: center;
    padding: 10px 5px;
    font-size: 15px;
    background-color: #1ba7e5;
    color: white;
}

    .ui-datepicker .ui-datepicker-title select {
        font-size: 11px;
        margin: 1px 0;
    }

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.ui-datepicker table {
    border-collapse: collapse;
    margin: 0 5px 5px;
}

.ui-datepicker th {
    padding: 5px;
    text-align: center;
    font-weight: 300;
    border: 0;
    color: #777;
    font-size: 11px;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

    .ui-datepicker td span, .ui-datepicker td a {
        display: block;
        padding: 5px 5px 4px;
        text-align: center;
        text-decoration: none;
        width: 45px;
    }

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: 5px;
    width: auto !important;
    font-size: 13px;
    padding: 2px 10px;
    font-weight: normal;
    border: 1px solid #eaeaea;
    box-shadow: none;
}

    .ui-datepicker .ui-datepicker-buttonpane button:hover {
        background-color: #1ba7e5;
        color: white;
        border-color: #1ba7e5;
    }

.ui-datepicker-trigger {
    cursor: pointer;
    border-radius: 4px;
}

.ui-datepicker .ui-datepicker-close:hover {
    background: #cf0404;
}
/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
    z-index: 50000 !important;
}

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right;
        background-color: #e0e0e0;
        display: table;
        width: 100%;
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left;
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: right;
                opacity: 1; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            }

    .ui-datepicker-rtl .ui-datepicker-group {
        float: right;
    }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }

    .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px;
    }