@font-face {
    font-family: 'Khand-Bold';
    src: url('fonts/Khand-Bold.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}
/*@font-face{
    font-family:'sans';
}*/
body {
    font-family: Khand-Bold;
    font-size: medium;
    font-weight: bold;
    direction: rtl;
    background-color: #0c1f4c;
    overflow: hidden; /* Hide scrollbars */
}

::placeholder, input, button, select {
    font-family: Khand-Bold;
    font-size: medium;
    font-weight: bold;
}


.Products {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px 14px;
    width: 300px;
    border-radius: 22px;
    background-color: #ffc400;
    color: #0c1f4c;
    cursor: pointer;
    transition: 0.6s;
}


.Master {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    margin: auto
}

    .Master h1 {
        color: #ffffff;
        margin: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid gray;
    }

    .Master h2 {
        color: #ffffff;
        margin: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid gray;
    }

    .Master h3 {
        color: #ffffff;
        margin: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid gray;
    }

    .Master input[type="text"], input[type="tel"] {
        margin: 5px;
        padding: 10px 14px;
        width: 300px;
        border-radius: 22px;
        background-color: #ffffff;
        transition: 0.5s;
    }

    .Master button {
        margin: 5px;
        padding: 10px 14px;
        width: 250px;
        border-radius: 22px;
        background-color: #fff200;
        color: #000000;
        cursor: pointer;
    }

.login {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    margin: auto
}

    .login button {
        margin: 20px;
        padding: 10px 14px;
        width: 250px;
        border-radius: 22px;
        background-color: #fff200;
        color: #000000;
        cursor: pointer;
    }

    .login img {
        margin: 5px; 
        width: 95px;
        height:55px;
        border-top-left-radius: 0px;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 0px;
        cursor: pointer;
    }

    .login h1 {
        color: #ffffff;
        margin: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid gray;
    }

    .login input[type="text"], input[type="tel"], select {
        margin: 5px;
        padding: 10px 14px;
        width: 300px;
        border-radius: 22px;
        background-color: #ffffff;
        transition: 0.5s;
    }

    .login input[id="USER_CellPhone"]{
        margin: 5px;
        width: 190px;
        border-top-left-radius: 22px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 22px;
        background-color: #ffffff;
        transition: 0.5s;
    }

    .login input[id="SendMobileCaptcha"], span[id="countdown"] {
        margin: 5px;
        width: 95px;
        height: 45px;
        border-top-left-radius: 0px;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 0px;
        cursor: pointer;
        background-color: #ffc400;
        color: #0c1f4c;
    }




    .login  input[id="SendMobile_Captcha"] {
        margin: 5px;
        padding: 10px 0px;
        width: 330px;
        border-radius: 22px;
        background-color: #ffc400;
        color: #0c1f4c;
        cursor: pointer;
        transition: 0.6s;
    }


    .login input[type="submit"] {
        margin: 20px;
        padding: 10px 14px;
        width: 318px;
        border-radius: 22px;
        background-color: #ffc400;
        color: #0c1f4c;
        cursor: pointer;
        transition: 0.6s;
    }

        .login input[type="submit"]:hover {
            background-color: #ffc400;
            color: #ffffff;
        }

    .login input[type="text"]:focus, input[type="tel"]:focus {
        background-color: #ffc400;
    }

    .login ul {
        list-style: none outside none;
    }

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            right: -9999px;
        }



    tr {
        margin: 0 0 1rem 0;
        border: 1px solid;
    }

        tr:nth-child(odd) {
            background: #fff;
        }

    td {
        /* Behave  like a "row" */
        /*border: 1px solid;*/
        position: relative;
        padding-right: 50%;
    }

        td:after {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            right: 6px;
            width: 45%;
            padding-left: 10px;
            white-space: nowrap;
        }

        /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
        td:nth-of-type(1):after {
            content: "ردیف";
        }

        td:nth-of-type(2):after {
            content: "شناسه";
        }

        td:nth-of-type(3):after {
            content: "نام محصول";
        }

        td:nth-of-type(4):after {
            content: "سایز";
        }

        td:nth-of-type(5):after {
            content: "بارکد";
        }

        td:nth-of-type(6):after {
            content: "شماره فاکتور";
        }

        td:nth-of-type(7):after {
            content: "تاریخ فاکتور";
        }

        td:nth-of-type(8):after {
            content: "تاریخ ثبت";
        }
}