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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

/*---------------------- /Reset Style --------------------*/

body {
    background: #f7f7f7;
    direction: rtl;
    margin: 0;
    padding: 0;
}

* {
    font-family: IRANSans, Open_Sans;
    outline: none !important;
    /*text-decoration: none !important;*/
}

*, :after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    text-decoration: none !important;
}

body.account-page {
    height: 100vh;
    /*min-height: 700px;*/
}

.page--account-box {
    justify-content: center;
    display: flex;
}

.page--account-wrap {
    margin-top: 20px;
    max-width: 400px;
}

    .page--account-wrap .o-wrap {
        overflow: hidden;
        margin-top: 100px;
        width: 400px;
    }

    .page--account-wrap .footer {
        /* margin-top: 15px; */
    }

        .page--account-wrap .footer .right {
            width: calc(100% - 78px);
            float: right;
        }

            .page--account-wrap .footer .right span {
                padding: 11px;
                color: #8a8888;
                display: block;
                font-size: 13px;
            }

        .page--account-wrap .footer .link {
            width: 68px;
            /*display: inline-block;*/
            height: 50px;
            vertical-align: middle;
            margin-top: -5px;
            background: #fff;
            margin-left: 10px;
            float: left;
            border-radius: 0 0 5px 5px;
            text-align: center;
            transition: all 0.35s ease;
        }

            .page--account-wrap .footer .link:hover {
                margin-top: 0px;
            }

            .page--account-wrap .footer .link a, .page--account-wrap .footer .link span {
                color: #666;
                font-size: 13px;
                position: relative;
                top: 13px;
            }

    .page--account-wrap .logo {
        display: inline-block;
        max-width: 110px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
    }

        .page--account-wrap .logo img {
            width: 100%;
        }

.account-box {
    background: #fff;
    /* padding: 15px; */
    position: relative;
    font-size: 13px;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, .1);
}

    .account-box .headline {
        font-size: 18px;
        font-weight: 400;
        padding: 10px 30px;
        border-bottom: 1px solid #ccc;
        /* margin-bottom: 10px; */
    }

    .account-box .content {
        padding: 10px 20px;
    }

.message {
    padding: 10px;
    position: relative;
    font-size: 14px;
    border-radius: 5px;
    margin-bottom: 10px;
}

    .message ul {
        list-style: none;
        font-size: 12px;
    }

.message-success {
    background-color: #eeffdf;
    border: 1px solid #b7ecb8;
    color: #518541
}

.message-info {
    background-color: #fffde4;
    border: 1px solid #f6e8a1;
    color: #a37731
}

.message-error {
    background-color: #fff9fa;
    border: 1px solid #ffc1c5;
    color: #ef5662
}

.account-form {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.account-form--label {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
}

.account-form--forgotpassword {
    font-size: 12px;
    position: absolute;
    color: #1ca2bd;
    left: 0;
}

    .account-form--forgotpassword::after {
        content: "";
        left: 0;
        bottom: -3px;
        position: absolute;
        right: 0;
        border-bottom: 1px dashed #1ca2bd;
    }

.account-form--input {
    position: relative;
    width: 100%;
    display: inherit;
    /* overflow: hidden; */
}

    .account-form--input input {
        padding: 10px 35px 10px 10px;
        border: 1px solid #e8ecec;
        display: inline-block;
        overflow: visible;
        position: relative;
        border-radius: 5px;
        width: 100%;
    }

.account-form--validation {
    margin-top: 7px;
    font-size: 11px;
    color: #fb4b56;
    display: block;
}

.account-agreement {
    margin-bottom: 15px;
}

    .account-agreement checkbox {
    }

.account-agreement--label {
    line-height: 30px;
}

    .account-agreement--label a {
        position: relative;
        color: #1ca2bd;
    }

        .account-agreement--label a::after {
            position: absolute;
            left: 0;
            content: '';
            border-bottom: 1px dashed;
            right: 0;
            bottom: -3px;
        }

.account-action {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
}

.account-action--submit {
    display: block;
    background: #d2d2d2;
    border-radius: 50px;
    border: 1px solid #e5e5e5;
    color: #fff;
    padding: 8px 20px;
    width: 100%;
    transition: all 0.35s ease;
    cursor: pointer;
    font-size: 14px;
}

    .account-action--submit:not([disabled]):hover {
        background: #77b3fb
    }

.account-action--btn {
    border-radius: 50px;
    border: 3px solid #fff;
    color: #fff;
    overflow: hidden;
    position: relative;
}

    .account-action--btn:not([disabled]):active, .account-action--btn.active:not([disabled]) {
        border-color: #318bf7;
        color: #fff;
    }

    .account-action--btn:not([disabled]):hover, .account-action--btn.active:not([disabled]) {
        background: #77b3fb;
    }

    .account-action--btn:before {
        position: absolute;
        height: 100%;
        font-size: 125%;
        font-family: icomoon;
        line-height: 2.5;
        color: #fff;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .account-action--btn:active:before {
        /* color: #17954c; */
    }

/* Button 4a */
.account-action--btn-a:before {
    left: 130%;
    top: -2px;
}

.account-action--btn-a:not([disabled]):hover:before, .account-action--btn-a.active:not([disabled]):before {
    left: 80%;
}

.hide {
    display:none;
}

/* ----------------------------------- Icomoon -------------------------- */
.icon-envelope:before {
    content: "\e000";
}

.icon-cart:before {
    content: "\e007";
}

.icon-cart-2:before {
    content: "\e008";
}

.icon-heart:before {
    content: "\e009";
}

/* Filled heart */
.icon-heart:after,
.icon-heart-2:before {
    content: "\e00a";
}

.icon-star:before {
    content: "\e00b";
}

/* Filled star */
.icon-star:after,
.icon-star-2:before {
    content: "\e00c";
}

/*.icon-arrow-right:before {
    content: "\e00d";
}*/

.icon-arrow-left:before {
    content: "\e003";
}

.icon-truck:before {
    content: "\e00e";
}

.icon-remove:before {
    content: "\e00f";
}

.icon-cog:before {
    content: "\e010";
}

.icon-plus:before,
.icon-plus:after {
    content: "\e011";
}

.icon-minus:before {
    content: "\e012";
}

.bh-icon-smiley:before {
    content: "\e001";
}

.bh-icon-sad:before {
    content: "\e002";
}

.icon-file:before {
    content: "\e004";
}

.icon-remove-2:before {
    content: "\e005";
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
    .page--account-wrap {
        max-width: 100%;
    }

        .page--account-wrap .o-wrap {
            width: 95%;
            margin: 100px auto 0;
        }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}