/******************************************************************************
 * Webzi Site Builder                                                         *
 *                                                                            *
 * Copyright (c) 2014-2017 Webzi Team                                         *
 * ************************************************************************** *
 * This is bundled with this package in the file LICENSE.txt                  *
 *                                                                            *
 * If you did not receive a copy of the license and are unable to             *
 * obtain it through the world-wide-web, please send an email                 *
 * to license@webzi.ir so we can send you a copy immediately.                 *
 * ************************************************************************** *
 * @Author: Masoud Sabaghi <masoud.sabaghi@gmail.com>                         *
 * @Copyright: 2014-2017                                                      *
 ******************************************************************************/

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family : IranSans;
    font-style  : normal;
    font-weight : bold;
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Bold.eot');
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
    font-family : IranSans;
    font-style  : normal;
    font-weight : 500;
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot');
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
    font-family : IranSans;
    font-style  : normal;
    font-weight : 300;
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot');
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
    font-family : IranSans;
    font-style  : normal;
    font-weight : 200;
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family : IranSans;
    font-style  : normal;
    font-weight : normal;
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum).eot');
    src         : url('../fonts/iransans/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
    margin     : 0px;
    padding    : 0px;
    box-sizing : border-box;
}

body, html {
    height      : 100%;
    font-family : 'IranSans', IranSans, sans-serif;
    direction   : rtl;
    text-align  : right;
}

/*---------------------------------------------*/
a {
    font-family        : 'IranSans', IranSans;
    font-size          : 14px;
    line-height        : 1.7;
    color              : #666666;
    margin             : 0px;
    transition         : all 0.4s;
    -webkit-transition : all 0.4s;
    -o-transition      : all 0.4s;
    -moz-transition    : all 0.4s;
}

a:focus {
    outline : none !important;
}

a:hover {
    text-decoration : none;
    color           : #6a7dfe;
    color           : -webkit-linear-gradient(left, #21d4fd, #b721ff);
    color           : -o-linear-gradient(left, #21d4fd, #b721ff);
    color           : -moz-linear-gradient(left, #21d4fd, #b721ff);
    color           : linear-gradient(left, #21d4fd, #b721ff);
}

/*---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin : 0px;
}

p {
    font-family : 'IranSans', IranSans;
    font-size   : 14px;
    line-height : 1.7;
    color       : #666666;
    margin      : 0px;
}

ul, li {
    margin          : 0px;
    list-style-type : none;
}

/*---------------------------------------------*/
input {
    outline : none;
    border  : none;
}

textarea {
    outline : none;
    border  : none;
}

textarea:focus, input:focus {
    border-color : transparent !important;
}

input:focus::-webkit-input-placeholder {
    color : transparent;
}

input:focus:-moz-placeholder {
    color : transparent;
}

input:focus::-moz-placeholder {
    color : transparent;
}

input:focus:-ms-input-placeholder {
    color : transparent;
}

textarea:focus::-webkit-input-placeholder {
    color : transparent;
}

textarea:focus:-moz-placeholder {
    color : transparent;
}

textarea:focus::-moz-placeholder {
    color : transparent;
}

textarea:focus:-ms-input-placeholder {
    color : transparent;
}

input::-webkit-input-placeholder {
    color : #adadad;
}

input:-moz-placeholder {
    color : #adadad;
}

input::-moz-placeholder {
    color : #adadad;
}

input:-ms-input-placeholder {
    color : #adadad;
}

textarea::-webkit-input-placeholder {
    color : #adadad;
}

textarea:-moz-placeholder {
    color : #adadad;
}

textarea::-moz-placeholder {
    color : #adadad;
}

textarea:-ms-input-placeholder {
    color : #adadad;
}

/*---------------------------------------------*/
button {
    outline    : none !important;
    border     : none;
    background : transparent;
}

button:hover {
    cursor : pointer;
}

iframe {
    border : none !important;
}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
    font-family : 'IranSans', IranSans;
    font-size   : 13px;
    color       : #666666;
    line-height : 1.5;
}

.txt2 {
    font-family : 'IranSans', IranSans;
    font-size   : 13px;
    color       : #333333;
    line-height : 1.5;
}

/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
    width  : 100%;
    margin : 0 auto;
}

.container-login100 {
    width           : 100%;
    min-height      : 100vh;
    display         : -webkit-box;
    display         : -webkit-flex;
    display         : -moz-box;
    display         : -ms-flexbox;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : center;
    padding         : 15px;
    background      : #f2f2f2;
    position        : relative;
}

.message {
    background : #18a689;
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    color      : #fff;
    padding    : 10px;
    text-align : center;
}

.wrap-login100 {
    width              : 390px;
    background         : #fff;
    border-radius      : 10px;
    overflow           : hidden;
    padding            : 77px 55px 77px 55px;

    box-shadow         : 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow    : 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow : 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow      : 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow     : 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    position: relative;
}

/*------------------------------------------------------------------
[ Form ]*/

.login100-form {
    width : 100%;
}

.login100-form-title {
    display     : block;
    font-family : 'IranSans', IranSans;
    font-size   : 30px;
    color       : #333333;
    line-height : 1.2;
    text-align  : center;
}

#logo {
    width   : 120px;
    display : block;
    margin  : 30px auto 50px;
}

#logo .cls-1 {
    fill : #18a689;
}

#logo .cls-2 {
    fill : #a7a9ac;
}

/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
    width         : 100%;
    position      : relative;
    border-bottom : 2px solid #adadad;
    margin-bottom : 37px;
}

.input100 {
    font-family : 'IranSans', IranSans;
    font-size   : 15px;
    color       : #555555;
    line-height : 1.2;

    display     : block;
    width       : 100%;
    height      : 45px;
    background  : transparent;
    padding     : 0 5px;
}

/*---------------------------------------------*/
.focus-input100 {
    position       : absolute;
    display        : block;
    width          : 100%;
    height         : 100%;
    top            : 0;
    right          : 0;
    pointer-events : none;
}

.focus-input100::before {
    content            : "";
    display            : block;
    position           : absolute;
    bottom             : -2px;
    right              : 0;
    width              : 0;
    height             : 2px;

    -webkit-transition : all 0.4s;
    -o-transition      : all 0.4s;
    -moz-transition    : all 0.4s;
    transition         : all 0.4s;

    background         : #18a689;

}

.focus-input100::after {
    font-family        : 'IranSans', IranSans;
    font-size          : 15px;
    color              : #999999;
    line-height        : 1.2;

    content            : attr(data-placeholder);
    display            : block;
    width              : 100%;
    position           : absolute;
    top                : 16px;
    right              : 0px;
    padding-right      : 5px;

    -webkit-transition : all 0.4s;
    -o-transition      : all 0.4s;
    -moz-transition    : all 0.4s;
    transition         : all 0.4s;
}

.input100:focus + .focus-input100::after {
    top : -15px;
}

.input100:focus + .focus-input100::before {
    width : 100%;
}

.has-val.input100 + .focus-input100::after {
    top : -15px;
}

.has-val.input100 + .focus-input100::before {
    width : 100%;
}

/*---------------------------------------------*/
.btn-show-pass {
    font-size          : 15px;
    color              : #999999;

    display            : -webkit-box;
    display            : -webkit-flex;
    display            : -moz-box;
    display            : -ms-flexbox;
    display            : flex;
    align-items        : center;
    position           : absolute;
    height             : 100%;
    top                : 0;
    left               : 0;
    padding-left       : 5px;
    cursor             : pointer;
    -webkit-transition : all 0.4s;
    -o-transition      : all 0.4s;
    -moz-transition    : all 0.4s;
    transition         : all 0.4s;
}

.btn-show-pass:hover {
    color : #18a689;

}

.btn-show-pass.active {
    color : #18a689;

}

/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
    display         : -webkit-box;
    display         : -webkit-flex;
    display         : -moz-box;
    display         : -ms-flexbox;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    padding-top     : 13px;
}

.wrap-login100-form-btn {
    width         : 100%;
    /*display       : block;*/
    /*position      : relative;*/
    /*z-index       : 1;*/
    /*border-radius : 25px;*/
    /*overflow      : hidden;*/
    /*margin        : 0 auto;*/
}

.login100-form-bgbtn {
    /*position           : absolute;*/
    /*z-index            : -1;*/
    width              : 300%;
    /*height             : 100%;*/
    /*background         : #18a689;*/

    /*top                : 0;*/
    /*right              : -100%;*/

    /*-webkit-transition : all 0.4s;*/
    /*-o-transition      : all 0.4s;*/
    /*-moz-transition    : all 0.4s;*/
    /*transition         : all 0.4s;*/
}

.container-login100-form-btn:hover .login100-form-bgbtn {
    background : #148870;
}

.login100-form-btn {
    font-family     : 'IranSans', IranSans;
    font-size       : 15px;
    color           : #fff;
    line-height     : 1.2;
    text-transform  : uppercase;

    display         : -webkit-box;
    display         : -webkit-flex;
    display         : -moz-box;
    display         : -ms-flexbox;
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 0 20px;
    width           : 100%;
    height          : 50px;
}

.wrap-login100-form-btn:hover .login100-form-bgbtn {
    right : 0;
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width : 576px) {
    .wrap-login100 {
        padding : 77px 15px 33px 15px;
    }
}

/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
    position : relative;
}

.alert-validate::before {
    content            : attr(data-validate);
    position           : absolute;
    max-width          : 100%;
    background-color   : #fff;
    border             : 1px solid #ee5951;
    border-radius      : 2px;
    padding            : 4px 10px 4px 25px;
    top                : 50%;
    -webkit-transform  : translateY(-50%);
    -moz-transform     : translateY(-50%);
    -ms-transform      : translateY(-50%);
    -o-transform       : translateY(-50%);
    transform          : translateY(-50%);
    left               : 0px;
    pointer-events     : none;
    z-index            : 99;

    font-family        : 'IranSans', IranSans;
    color              : #ee5951;
    font-size          : 13px;
    line-height        : 1.4;
    text-align         : right;

    visibility         : hidden;
    opacity            : 0;

    -webkit-transition : opacity 0.4s;
    -o-transition      : opacity 0.4s;
    -moz-transition    : opacity 0.4s;
    transition         : opacity 0.4s;
}

.alert-validate::after {
    content           : "\f1f1";
    font              : normal normal normal 16px/1 'Material-Design-Iconic-Font';

    color             : #ee5951;
    cursor            : pointer;
    display           : block;
    position          : absolute;
    background-color  : #fff;
    top               : 50%;
    -webkit-transform : translateY(-50%);
    -moz-transform    : translateY(-50%);
    -ms-transform     : translateY(-50%);
    -o-transform      : translateY(-50%);
    transform         : translateY(-50%);
    left              : 5px;
    z-index           : 99;
}

.alert-validate:hover:before {
    visibility : visible;
    opacity    : 1;
}

@media (max-width : 992px) {
    .alert-validate::before {
        visibility : visible;
        opacity    : 1;
    }
}

.forget-container {
    text-align : center;
    padding    : 20px 0;
    margin-top: 10px;
}

.forget-container a {
    color           : #18a689;
    border-bottom   : 1px dashed #18a689;
    padding-bottom  : 3px;
    letter-spacing  : 2px;
    font-size       : 14px;
    text-decoration : none;
}




.button {
    margin: 0 auto;
    position           : relative;
    height             : 50px;
    background-image   : none;
    border             : none;
    outline            : none;
    background-color   : #18a689;
    color              : white;
    text-transform     : uppercase;
    letter-spacing     : 2px;
    cursor             : pointer;
    -webkit-transition : all 0.2s ease-out;
    -moz-transition    : all 0.2s ease-out;
    -ms-transition     : all 0.2s ease-out;
    -o-transition      : all 0.2s ease-out;
    transition         : all 0.2s ease-out;
    font-family        : 'iransans', iransans, sans-serif;
    text-transform     : uppercase;
    font-size          : 15px;
    letter-spacing     : 0;
    border-radius      : 24px;
    padding            : 13px 25px;
}

.button .spinner {
    display : none;
}

.button::after {
    content            : '';
    display            : block;
    position           : absolute;
    width              : 160px;
    height             : 40px;
    background-color   : black;
    z-index            : -1;
    left               : calc(50% - 80px);
    top                : 10px;
    opacity            : 0.3;
    filter             : blur(5px);
    -webkit-transition : all 0.2s ease-out;
    -moz-transition    : all 0.2s ease-out;
    -ms-transition     : all 0.2s ease-out;
    -o-transition      : all 0.2s ease-out;
    transition         : all 0.2s ease-out;
}

.button:hover::after {
    opacity           : 0.5;
    filter            : blur(20px);
    -webkit-transform : translatey(10px) scalex(1.2);
    -moz-transform    : translatey(10px) scalex(1.2);
    -ms-transform     : translatey(10px) scalex(1.2);
    -o-transform      : translatey(10px) scalex(1.2);
    transform         : translatey(10px) scalex(1.2);
}

.button:active {
    background-color : #18a689;
}

.button:active::after {
    opacity : 0.3;
}

.button.loading .spinner {
    display : block;
}

.button.loading .text {
    display : none;
}

.button.loading {
    border-radius : 50px;
    width         : 50px;
}

.button.loading::after {
    width         : 40px;
    left          : 5px;
    top           : 12px;
    border-radius : 100%;
}

.spinner {
    display       : block;
    width         : 34px;
    height        : 34px;
    position      : absolute;
    top           : 8px;
    left          : calc(50% - 17px);
    background    : transparent;
    box-sizing    : border-box;
    border-top    : 4px solid white;
    border-left   : 4px solid transparent;
    border-right  : 4px solid transparent;
    border-bottom : 4px solid transparent;
    border-radius : 100%;
    animation     : spin 0.6s ease-out infinite;
}

@keyframes spin {
    100% {
        -webkit-transform : rotate(360deg);
        -moz-transform    : rotate(360deg);
        -ms-transform     : rotate(360deg);
        -o-transform      : rotate(360deg);
        transform         : rotate(360deg);
    }
}