@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face
{
    font-family:  'Shabnam';
    src: url('../fonts/shabnam-font-v2.4.0/Shabnam-Bold.woff');
    /* src: url('../fonts/shabnam-font-v2.4.0/Shabnam-Light.woff'); */
}
@font-face
{
    font-family: 'vazir';
    src: url('../fonts/vazir-font-v18.0.0/Vazir-Bold.woff');
    /* src: url('../fonts/vazir-font-v18.0.0/Vazir-Light.woff'); */
}

body
{
    font-family: Shabnam !important;
    background-color: #efefef !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
{
    margin-bottom: 0 !important;
}

dl, ol, ul
{
    margin-bottom: 0 !important;
}

*
{
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
    transition: all 0.3s linear;

    /* Colors*/
    --color--main: #5078f2;
    --color-black: #000;
    --color-white: #fff;
    --color-p: #9b9b9b;
    --color-green: #44d78b;
}

ul,li
{
    list-style: none;
}

a
{
    text-decoration: none;
}

section.navbar
{
    padding: 1rem 2%;
}

.navbar
{
    background-color: var(--color--main);
}


.navbar-nav .dropdown-menu
{
    position: absolute !important;
    float: none;
}

.dropdown, .dropleft, .dropright, .dropup
{
    z-index: 100;
}

.dropdown-toggle::after
{
    content: none !important;
}

.nav-link
{
    padding: 10px 20px !important;
    background-color: #ffffff30;
    color: white;
    border-radius: 50px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.nav-link:hover
{
    color: #fff;
    background-color: #ffffff20;
}

.dropdown-menu
{
    margin: 0.5rem 0 0 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    font-family: Shabnam;
    font-weight: 500;
}


section.main
{
    padding: 0rem 15%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    bottom: 45px;
}

.main .header
{
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 15px;
}

.main .header .shaparak img
{
    width: 70px;
}

.main .header .title h1
{
    font-family: shabnam;
    font-weight: bold;
    font-size: 1.1rem;
    color: #555;
}

.main .header .logo img
{
    width: 70px;
}

.main .box-container
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.main .box-container .merchant
{
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 15px;
    width: 40%;
    height: 705px;
}

.main .box-container .merchant .time
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    background-color: #5078f22e;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.main .box-container .merchant .time h3
{
    font-size: 14px;
}

.main .box-container .merchant .merchant-name
{
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
    direction: rtl;
    margin-bottom: 1rem;
}

.main .box-container .merchant .merchant-name i
{
    color: #9b9b9b;
    font-size: 1.2rem;
}

.main .box-container .merchant .merchant-name ul li span
{
    color: var(--color-p);
    font-size: 13px;
}

.main .box-container .merchant .merchant-name ul li h2
{
    font-size: 1.5rem;
}

.main .box-container .merchant .money
{
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
    direction: rtl;
    margin-bottom: 1rem;
}

.main .box-container .merchant .money i
{
    color: #9b9b9b;
    font-size: 1.2rem;
}

.main .box-container .merchant .money ul li span
{
    color: var(--color-p);
    font-size: 13px;
}

.main .box-container .merchant .money ul li h2
{
    font-size: 1.5rem;
}

.main .box-container .merchant .terminal-number
{
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
    direction: rtl;
    margin-bottom: 1rem;
}

.main .box-container .merchant .terminal-number i
{
    color: #9b9b9b;
    font-size: 1.2rem;
}

.main .box-container .merchant .terminal-number ul li span
{
    color: var(--color-p);
    font-size: 13px;
}

.main .box-container .merchant .terminal-number ul li h2
{
    font-size: 13px;
}

.main .box-container .merchant .website
{
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
    direction: rtl;
    margin-bottom: 1rem;
}

.main .box-container .merchant .website i
{
    color: #9b9b9b;
    font-size: 1.2rem;
}

.main .box-container .merchant .website ul li span
{
    color: var(--color-p);
    font-size: 13px;
}

.main .box-container .merchant .website ul li h2
{
    font-size: 13px;
}

.main .box-container .merchant .diver
{
    border: 0.5px solid #f0f0f0;
    margin: 0.5rem 0 0.5rem 0;
}


.main .box-container .card-info
{
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 15px;
    width: 60%;
}

.main .box-container .card-info .card-validation
{
    padding: 20px 20px 0px 20px;
}

.main .box-container .card-info .card-validation .value
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.main .box-container .card-info .card-validation h4
{
    text-align: right;
    font-size: 13px;
    padding-bottom: 0.3rem;
}

.main .box-container .card-info .card-validation input
{
    width: 100%;
    padding: 0.5rem;
    color: #495057;
    background-color: #fbfbfb;
    border: 1px solid #ced4da;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

.main .box-container .card-info .card-validation i
{
    position: absolute;
    padding-left: 20px;
    color: var(--color--main);
    font-size: 1.2rem;
}

.main .box-container .card-info .expire-date
{
    padding: 20px 20px 0px 20px;
}

.main .box-container .card-info .expire-date .value
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.main .box-container .card-info .expire-date h4
{
    text-align: right;
    font-size: 13px;
    padding-bottom: 0.3rem;
}

.main .box-container .card-info .expire-date input
{
    width: 100%;
    padding: 0.5rem;
    color: #495057;
    background-color: #fbfbfb;
    border: 1px solid #ced4da;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

.main .box-container .card-info .capture
{
    padding: 20px 20px 0px 20px;
}

.main .box-container .card-info .capture .value
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.main .box-container .card-info .capture .value img
{
    width: 120px;
}

.main .box-container .card-info .capture .value .input
{
    width: 100%;
    display: flex;
    align-items: center;
}

.main .box-container .card-info .capture h4
{
    text-align: right;
    font-size: 13px;
    padding-bottom: 0.3rem;
}

.main .box-container .card-info .capture input
{
    width: 100%;
    padding: 0.5rem;
    color: #495057;
    background-color: #fbfbfb;
    border: 1px solid #ced4da;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

.main .box-container .card-info .capture i
{
    position: absolute;
    padding-left: 20px;
    color: var(--color--main);
    font-size: 1.2rem;
}

.main .box-container .card-info .pin2
{
    padding: 20px 20px 0px 20px;
}

.main .box-container .card-info .pin2 .value
{
    display: flex;
    align-items: center;
    gap: 20px;
}

.main .box-container .card-info .pin2 .value img
{
    width: 120px;
}

.main .box-container .card-info .pin2 .value .input
{
    width: 100%;
    display: flex;
    align-items: center;
}

.main .box-container .card-info .pin2 h4
{
    text-align: right;
    font-size: 13px;
    padding-bottom: 0.3rem;
}

.main .box-container .card-info .pin2 input
{
    width: 100%;
    padding: 0.5rem;
    color: #495057;
    background-color: #fbfbfb;
    border: 1px solid #ced4da;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

.main .box-container .card-info .pin2 i
{
    position: absolute;
    padding-left: 20px;
    color: var(--color--main);
    font-size: 1.2rem;
}

.main .box-container .card-info .pin2 .btn
{
    width: 36%;
    padding: 0px;
    cursor: pointer;
}

.main .box-container .card-info .pin2 .btn a
{
    background-color: var(--color--main);
    padding: 12px 20px;
    border-radius: 10px;
    color: var(--color-white);
    font-size: 12px;
    text-decoration: none;
}

.main .box-container .card-info .pin2 .btn a:hover
{
    background-color: var(--color-green);
}

.main .box-container .card-info .save-card
{
    display: flex;
    gap: 10px;
    align-items: center;
    direction: rtl;
    padding: 20px 20px 0px 20px;
}

.main .box-container .card-info .save-card input
{
    width: 16px;
    height: 16px;
}

.main .box-container .card-info .save-card h5
{
    font-size: 13px;
}

.main .box-container .card-info .pay
{
    text-align: center;
    background: var(--color-green);
    margin-top: 2.5rem;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 93%;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
}

.main .box-container .card-info .pay:hover
{
    background-color: var(--color--main);
}

.main .box-container .card-info .pay p
{
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    padding: 5px !important;
    margin-bottom: 0px !important;
}

.main .box-container .card-info .cancel-btn
{
    text-align: center;
    border: 1px solid #eaeaea;
    margin-top: 2rem;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 93%;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
}

.main .box-container .card-info .cancel-btn:hover
{
    border: 1px solid red;
}

.main .box-container .card-info .cancel-btn a
{
    color: red;
    text-decoration: none;
    font-size: 14px;
}


.main .box-container .card-info .message-pay #demo
{
    text-align: center;
    font-size: 14px;
    color: var(--color-green);
}

.main .box-container .card-info .message-pay button
{
    background-color: none;
    outline: none;
    border: none;
}

.main .box-container .card-info .cancel-pay #demo2
{
    text-align: center;
    font-size: 14px;
    direction: rtl;
}




/* Search Ajax */
#result
{
    position: absolute;
    width: 36%;
    cursor: pointer;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 1001;
}

.link-class:hover
{
    background-color:#f1f1f1;
}

.list-group-item
{
   position: relative;
   display: flex;
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #fff;
   border: 1px solid #ddd;
   align-items: center;
   justify-content: space-between;
}

.number
{
     font-size: 13px;
     font-weight: 600;
     color: var(--color-black);
     letter-spacing: 4px;

}

.text-muted
{
     font-size: 13px;
     font-weight: 600;
}

.list-group-item
{
    display: flex !important;
}

.form-control
{
    text-align: center;
    font-size: 1rem !important;
    background-color: #fbfbfb !important;
    border-radius: 10px !important;
}

.card-number
{
    padding: 0px 20px 0px 20px;
}

.custom-placeholder::placeholder
{
    color: #b8b8b8 !important;
}

.card-info .card-number h4
{
    text-align: right;
    font-size: 13px;
    padding-bottom: 0.3rem;
}

.card-info .card-number .cards
{
    display: flex;
    align-items: center;
}

.card-info .card-number .cards i
{
    position: absolute;
    padding-left: 20px;
    color: var(--color--main);
    font-size: 1.2rem;
}

.main .box-container .message
{
    background-color: var(--color-white);
    margin-bottom: 1rem;
    border-radius: 15px;
}

.main .box-container .message h3
{
    background-color: #5078f22e;
    padding: 15px;
    border-radius: 10px;
    text-align: right;
    font-size: 14px;
}

.main .box-container .message .time h3
{
    font-size: 14px;
}

#timer
{
    font-size: 14px !important;
    line-height: 0px;
}


.notice
{
    background-color: var(--color-white);
    padding: 20px;
    text-align: right;
    border-radius: 15px;

}

.notice h3
{
    background-color: #5078f22e;
    padding: 15px;
    border-radius: 10px;
    text-align: right;
    font-size: 14px;
    direction: rtl;
    margin-bottom: 1rem !important;
    color: var(--color-black);
}

.notice p
{
    font-size: 14px;
    padding: 0px 15px 0px 15px;
    direction: rtl;
}

section.footer
{
    padding: 2rem 2%;
}

.footer
{
    background-color: var(--color--main);

}

.footer p
{
    text-align: center;
    margin: 0px;
    color: var(--color-white);
    font-size: 14px;
    direction: rtl;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -0%);
    width: 70%;
}

.footer p a
{
    color: var(--color-green);
    text-decoration: none;
}


@media screen and (max-width:1200px)
{
    section.main
    {
        padding: 0rem 12%;
    }
    .main .box-container .card-info .pin2 .btn
    {
        width: 42%;
    }
    .footer p
    {
        width: 85%;
    }
}

@media screen and (max-width:768px)
{
    section.main
    {
        position: inherit;
        padding: 1rem 3%;
    }
    .main .box-container .card-info .pin2 .btn
    {
        width: 70%;
    }
}


@media screen and (max-width:450px)
{
    section.main
    {
        position: initial;
        padding: 1rem 3%;
    }
    .main .header .shaparak img
    {
        width: 55px;
    }
    .main .header .title h1
    {
        font-size: 1rem;
    }
    .main .header .logo img
    {
        width: 65px;
    }
    .main .box-container
    {
        flex-wrap: wrap;
    }
    .main .box-container .merchant
    {
        width: 100%;
        height: auto;
    }
    .main .box-container .card-info
    {
        width: 100%;
    }
    .main .box-container .card-info .pin2 .value
    {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .main .box-container .card-info .pin2 .btn
    {
        width: 100%;
        background-color: var(--color--main);
        padding: 10px;
        border-radius: 10px;
    }
    .main .box-container .card-info .pin2 .btn a:hover
    {
        background-color: transparent;
    }
    .notice p
    {
        font-size: 12px;
    }
    section.footer
    {
        padding: 2rem 0%;
    }
    .footer p
    {
        font-size: 12px;
        width: 92%;
    }
}

@media screen and (max-width:375px)
{
    .main .header .shaparak img
    {
        width: 50px;
    }
    .main .header .title h1
    {
        font-size: 0.8rem;
    }
    .main .header .logo img
    {
        width: 60px;
    }
    .main .box-container .card-info .capture .value
    {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .main .box-container .card-info .capture .value img
    {
        width: 200px;
    }
}