﻿/* CSS Normalize */
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}


/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}

@font-face {
    font-family: 'VazirFD';
    src: url(../Fonts/Vazir-Thin-FD.ttf);
    font-weight: 100;
}

@font-face {
    font-family: 'VazirFD';
    src: url(../Fonts/Vazir-Light-FD.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'VazirFD';
    src: url(../Fonts/Vazir-Medium-FD.ttf);
    font-weight: 500;
}

@font-face {
    font-family: 'VazirFD';
    src: url(../Fonts/Vazir-Bold-FD.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'VazirFD';
    src: url(../Fonts/Vazir-Black-FD.ttf);
    font-weight: 900;
}

body {
    background-color: white;
    direction: rtl;
    font-family: 'VazirFD';
    font-weight: 900;
    font-size: 14px;
}

    body a {
        text-decoration: none;
    }




/* کدهای بدنه اصلی */
/* //////////////// */

.divContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .divContainer .divContent {
        width: 70%;
        background-image: url(../Images/backimage3.png);
        background-repeat: repeat;
        box-shadow: rgba(0,0,0,0.4) 0px 2px 15px;
        border-radius: 5px;
        padding: 20px 20px 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }

        .divContainer .divContent .divContentLeftRight {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-around;
            flex-direction: row;
        }

            .divContainer .divContent .divContentLeftRight .divRightContent {
                /*background-color: yellowgreen;*/
                width: 40%;
                height: 90%;
                padding: 0 15px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
            }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin {
            width: 100%;
        }



            /* مربوط به نمایش لیبل هر کادر متن در بالای آن */
            /*.divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .field {
                display: flex;
                flex-flow: column-reverse;
                justify-content: center;
                align-items: center;
                width: 100%;*/
                /*margin-bottom: 1em;*/
            /*}*/


/*            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin label,
            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input {
                transition: all 0.2s;
                touch-action: manipulation;
            }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input {
                cursor: text;
            }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input:placeholder-shown + label {
                cursor: text;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transform: translate(0, 1.9rem) scale(1);
                color: rgba(0,0,0,0.4);
            }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input:focus::-webkit-input-placeholder {
                opacity: 1;
            }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input:not(:placeholder-shown) + label,
            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input:focus + label {
                transform: translate(0, 0) scale(1);
                cursor: pointer;
                color: #3d6cca;
            }

            ::-webkit-input-placeholder {
                opacity: 0;
                transition: inherit;
            }
*/
            /* پایان نمایش لیبل کادر متن در بالای آن*/




        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin form {
            border-radius: 20px;
            background-color: white;
            box-shadow: rgba(0,0,0,0.4) 0px 2px 10px;
            width: 100%;
            line-height: 20px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin span {
            color: red;
            font-weight: 500;
            font-size: 11px;
            white-space: pre-line;
            text-align: center;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .imgLogoSite {
            width: 100px;
            height: 100px;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .spanTitel1 {
            color: black;
            font-size: 18px;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .spanTitel2 {
            color: black;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 15px;
        }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .divmessageCapsLock {
                color: red;
                animation: blinker 1s linear infinite;
            }

            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }

            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input[type='submit'] {
                cursor: pointer;
            }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input[type='submit']:hover {
            background-color: #f2fc6e;
            box-shadow: rgba(0,0,0,0.4) 0px 0px 8px;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input {
            min-height: 40px;
            max-height: 40px;
            width: 80%;
            border: solid 1px #999;
            border-radius: 20px;
            /*padding-right: 10px;*/
            text-align: center;
            outline: none;
            margin-bottom: 5px;
            font-family: VazirFD;
            font-weight: 500;
            direction: ltr;
        }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin input:focus {
            background: #e8f0fe;
            border-color: #ff4931;
        }




            .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .divCaptcha {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 10px 0;
            }

        .divContainer .divContent .divContentLeftRight .divRightContent .divFormLogin .divCaptcha img {
            margin: 10px 0;
            cursor: pointer;
            height: 55px;
        }



        .divContainer .divContent .divContentLeftRight .divLeftContent {
            /*background-color: yellow;*/
            width: 60%;
            height: 90%;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
        }

        .divContainer .divContent .divContentLeftRight .divLeftContent img {
            height: 150px;
            width: 100%;
            border-radius: 5px;
            box-shadow: rgba(0,0,0,0.4) 0px 2px 5px;
            margin-bottom: 20px;
        }

        .divContainer .divContent .divContentLeftRight .divLeftContent span {
            line-height: 30px;
            text-align: justify;
            font-weight: 500;
            font-size: 18px;
            margin-top: 30px;
        }

        .divContainer .divContent .divContentLeftRight .divLeftContent ul li {
            text-align: justify;
        }

        .divContainer .divContent .divContentLeftRight .divLeftContent ul li span {
            line-height: 30px;
            text-align: justify;
            font-weight: 500;
            font-size: 14px;
        }

            .divContainer .divContent .divContentLeftRight .divLeftContent .aBackToLogin {
                min-height: 40px;
                max-height: 40px;
                width: 50%;
                border: solid 1px #999;
                border-radius: 20px;
                outline: none;
                font-family: VazirFD;
                font-weight: 500;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
                background-color: rgb(239, 239, 239);
            }

            .divContainer .divContent .divContentLeftRight .divLeftContent .aBackToLogin:hover{
                background-color: #f2fc6e;
                box-shadow: rgba(0,0,0,0.4) 0px 0px 8px;
            }

        .divContainer .divContent .divFooter {
            min-width: 65%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            border-top: 1px solid #dedede;
            padding-top: 10px;
            font-weight: 500;
            font-size: 12px;
        }

        .divContainer .divContent .divFooter div{
            margin-left: 10px;
        }



/* پایان کدهای بدنه اصلی */
/* /////////////////////// */


/* کدهای مربوط به ریسپانسیو */
/* ////////////////////////// */

/*پیش فرض استایل ها برای بیش از 1200 پیکسل است
مانیتورهای بزرگ*/

/*مانیتورهای معمولی*/
@media (max-width: 1199px) {
    .divContainer .divContent {
        width: 85%;
        /*align-items: center;*/
    }

        .divContainer .divContent .divContentLeftRight .divRightContent {
            padding: 0 20px;
        }
}

/*تبلت عرضی*/
@media (max-width: 991px) {
    .divContainer .divContent {
        width: 90%;
        /*align-items: center;*/
    }

        .divContainer .divContent .divContentLeftRight .divRightContent {
            padding: 0;
        }
}

/*تبلت عمودی*/
@media (max-width: 768px) {
    .divContainer .divContent {
        width: 100%;
        height: 100%;
        align-items: center;
    }

        .divContainer .divContent .divContentLeftRight .divRightContent {
            padding: 0;
        }

        .divContainer .divContent .divContentLeftRight .divLeftContent {
            padding-left: 0;
        }
}

/*تبلت عمودی کوچک*/
@media (max-width: 640px) {
    @media (max-height: 360px) {
        .divContainer {
            height: auto;
        }
    }
}

/*گوشی عرضی*/
@media (max-width: 640px) {
    .divContainer {
        height: auto;
    }

    .divContainer .divContent {
        flex-direction: column;
    }
        .divContainer .divContent .divContentLeftRight {
            flex-direction: column-reverse;
           align-items: center;
        }

            .divContainer .divContent .divContentLeftRight .divLeftContent {
                width: 100%;
                height: auto;
                padding: 0;
            }

                .divContainer .divContent .divContentLeftRight .divLeftContent .divFooter {
                    margin-bottom: 30px;
                }

            .divContainer .divContent .divContentLeftRight .divRightContent {
                width: 90%;
            }

        .divContainer .divContent .divFooter {
            width: 100%;
        }
}

/*گوشی عمودی*/
@media (max-width: 361px) {
    .divContainer .divContent .divContentLeftRight .divRightContent {
        width: 100% !important;
    }
}

/* پایان کدهای مربوط به ریسپانسیو */
/* ///////////////////////////////// */