@charset "UTF-8";

html, body {
    background: #ffffff url("../../../assets/img/login-bg.jpg") no-repeat center center !important;
    background-size: cover !important;
}


.dashboard {
    text-align: center;
}

.panel-content {
    min-height: 368px;
}

.dashboard .archive-url {
    display: inline-block;
    padding: 8px 27px;
    margin: 10px 10px;
    background-color: #f0f0f0;
    border-radius: 50px;
    color: #000000;
    font: bold 15px 'IRANSansBold';
}

.dashboard .m-ar {
    background-color: #23d655;
    color: #ffffff;
}

.dashboard .s-ar {
    background-color: #FF5722;
    color: #ffffff;
}

.dashboard h1 {
    font: bold 24pt 'IRANSansBlack';
    color: #000000;
}

.dashboard .span-expire-vip {
    display: inline-block;
    padding: 5px 10px;
    margin: 15px 0;
    background-color: #4CAF50;
    color: #ffffff;
    border-radius: 5px;
}

.dashboard .span-expire-vip.ex {
    background-color: #ff0000;
}

.vip-expire-date {
    margin: 30px 0 15px 0;
}

.time-expire {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #23d655;
    color: #ff5722;
    border-radius: 50px;
    font: bold 17px 'IRANSansBold';
}

.time-expire span {
    color: #23d655;
}

.loader-overly {
    opacity: 0.3;
    pointer-events: none;
}

.panel-auth-content {
    width: 41%;
    background-color: #ffffff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 7px auto 15px auto;
    text-align: center;
    padding: 15px 25px;
    box-shadow: 0 15px 50px #f0f0f0;
}

.panel-auth-header {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.panel-auth-header h1 {
    margin: 25px 0 10px 0;
    font: bold 26px 'IRANSansBlack';
    color: #000000;
}

.panel-auth-header a {
    display: inline-block;
    padding: 5px 16px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    margin: 10px 0;
    color: #212121;
}

.panel-auth-header a:hover {
    background-color: #f0f0f0;
}

.not-signup {
    display: inline-block;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin: 0 0 17px 0;
}

.not-signup p {
    font-size: 15px;
    color: #212121;
    text-align: right;
}

.not-signup p a {
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    background-color: #36ce3c;
    color: #ffffff;
    border-radius: 3px;
    margin: 0;
    float: left;
}

.panel-auth-content input {
    width: 100% !important;
    margin: 10px 0 !important;
}

.panel-auth-content button {
    display: inline-block;
    float: left;
    border: none;
    background-color: #36ce3c;
    padding: 6px 24px;
    color: #ffffff;
    margin: 10px 0 0 0;
    border-radius: 50px;
}

.panel-auth-content button:hover, .panel-auth-content button:focus {
    background-color: #36ce3c;
    box-shadow: 0 5px 15px #36ce3c;
    transform: scale(1.1);
}

.panel-auth-footer {
    clear: both;
    margin: 21px 0 0 0;
    display: inline-block;
    width: 100%;
    border-top: 1px solid #f0f0f0;
}

.panel-auth-footer a {
    display: inline-block;
    margin: 6px -1px;
    font: 300 14px 'IRANSans';
    color: #000000;
    padding: 7px 10px;
    width: 113px;
    border-radius: 50px;
}

.panel-pagination a, .panel-pagination span {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 4px 15px;
    border-radius: 3px;
    color: #000000;
    margin: 15px 5px 0 0;
}

.panel-pagination span.current {
    background-color: #282938;
    color: #ffffff;
}

/* User Panel Style */

.panel-wrapper {
    /*margin: 25px 0;*/
}

.panel-box {
    display: block;
    width: 60%;
    background-color: #ffffff;
    padding: 15px;
    font: 400 12pt 'IRANSans';
    color: #000000;
    margin: 0 auto 25px auto;
    -webkit-box-shadow: 0 90px 55px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0 90px 55px rgba(0, 0, 0, 0.13);
    box-shadow: 0 90px 55px rgba(0, 0, 0, 0.13);
    -webkit-border-radius: 0 0 15px 15px;
    -moz-border-radius: 0 0 15px 15px;
    border-radius: 0 0 15px 15px;
}

.panel-sidebar {
    background-color: #282938;
}

.panel-sidebar ul {
    margin: 0;
}

.panel-sidebar ul li {
    margin: 0;
}

.panel-sidebar ul li a {
    color: #ffffff;
    font: bold 12pt 'IRANSansBold';
    padding: 8px 10px;
    display: inline-block;
    width: 100%;
    position: relative;
}

.panel-sidebar ul li a span {
    float: left;
    background-color: #ffffff;
    display: inline-block;
    width: 30px;
    height: 25px;
    color: #000000;
    text-align: center;
    border-radius: 3px;
    padding: 3px 0 0 0;
    font-size: 14px;
}

.panel-sidebar .active a:before {
    content: "";
    border-top: 7px solid transparent;
    border-right: 7px solid #ffe63d;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    position: absolute;
    right: 0;
    top: 15px;
}

.panel-sidebar ul li:last-child a {
    border-radius: 0 0 10px 10px;
}

.panel-sidebar ul li a:hover, .panel-sidebar ul li.active a {
    background-color: #2f3041;
    padding-right: 20px;
}

.user-visitor {
    width: 60%;
    display: block;
    padding: 15px;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    margin: 27px auto 0 auto;
    border-radius: 15px 15px 0 0;
}

.user-visitor img {
    margin: 0;
    border-radius: 50px;
}

.user-visitor h1 {
    margin: 22px 0 0;
    font: bold 24px 'IRANSansBlack';
    color: #000000;
    display: inline-block;
    width: 100%;
}

.panel-header .visitor-menu {
    display: block;
    width: 60%;
    padding: 10px;
    background-color: #ffffff;
    margin: 0 auto 0 auto;
    text-align: center;
}

.panel-header .visitor-menu li {
    display: inline-block;
    margin: 0 3px;
}

.panel-header .visitor-menu li a {
    display: inline-block;
    font-weight: 300;
    font-size: 15px;
    color: #000000;
    padding: 6px;
}

.panel-header .visitor-menu li a:hover, .panel-header .visitor-menu li.active a {
    color: #d89736;
}

.panel-header .visitor-menu li a span {
    float: left;
    margin: 0 9px 0 0;
    text-align: center;
    border-radius: 3px;
    background-color: #ffffff;
}

.tab-pane .alert {
    margin: 9px;
}

.panel-content {
    padding: 20px;
}

.edit-account h1 {
    margin: 0 0 15px 0;
    font: bold 25px 'IRANSansBlack';
    text-align: center;
    color: #000000;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 0 17px 0;
}

.edit-account label {
    display: inline-block;
    width: 100%;
    padding: 5px;
    color: #000000;
    font: bold 17px 'IRANSansBold', arial;
}

.edit-account label em {
    padding: 2px 7px;
    background-color: #f0f0f0;
    border-radius: 3px;
    margin: 0 10px 0 0;
}

.edit-account input {
    width: 100% !important;
    margin: 0 !important;
}

.edit-account input, .edit-account textarea {
    width: 100%;
    margin: 0;
}

.edit-account .profile-message label[for="show_change_password"] {
    margin: 3px 0 0 0 !important;
}

.edit-account input[type="submit"] {
    width: 170px !important;
    padding: 8px;
    margin: 10px 0 0 0 !important;
    float: left;
    background: #56ab2f;
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
    background: linear-gradient(to bottom, #a8e063, #56ab2f);
    border: 0;
    color: #ffffff;
    -webkit-box-shadow: 0 2px 7px #5bae32;
    -moz-box-shadow: 0 2px 7px #5bae32;
    box-shadow: 0 2px 7px #5bae32;
}

.edit-account input[type="submit"]:hover {
    -webkit-box-shadow: 0 7px 16px #99d659;
    -moz-box-shadow: 0 7px 16px #99d659;
    box-shadow: 0 7px 16px #99d659;
}

.edit-account .profile-message {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 5px 0 10px 0;
    border-radius: 5px;
    border: 1px solid #bdbdbd;
    font: bold 13px 'IRANSansBold';
    color: #000000;
}

.edit-account .profile-message.error {
    border-color: #ff0000;
    background-color: rgba(255, 0, 0, 0.17);
    color: #7b0303;
}

.edit-account .profile-message.success {
    border-color: #23d655;
    background-color: rgba(35, 214, 85, 0.34);
    color: #09581f;
}

.edit-account .profile-message.info {
    border-color: #00BCD4;
    background-color: rgba(0, 188, 212, 0.25);
    color: #103e44;
}

.edit-account .profile-message a {
    float: left;
    font: 300 12px 'IRANSans';
    color: #ffffff;
    background-color: #2f3041;
    padding: 2px 7px;
    border-radius: 5px;
}

.edit-account .profile-message input[type="checkbox"] {
    display: none;
}

.checkbox-style {
    display: inline-block;
    margin: 5px 5px 0 0;
    float: left;
}

.show-change-pass {
    float: right;
    clear: both;
    width: 100%;
    margin: 20px 0 0 0;
}

.checkbox-style label {
    display: inline-block;
    float: right;
    padding: 3px 7px;
    background-color: #d4d4d4;
    width: 45px;
    text-align: center;
    cursor: pointer;
    font: 300 14px 'IRANSans';
}

.checkbox-style label:first-child {
    border-radius: 0 5px 5px 0;
}

.checkbox-style label:last-child {
    border-radius: 5px 0 0 5px;
}

.checkbox-style .check-on {
    background-color: #82bd62;
    color: #ffffff;
}

.checkbox-style .check-off {
    background-color: #F44336;
    color: #ffffff;
}

.panel-not-found {
    text-align: center;
}

.panel-not-found h1 {
    font: bold 30pt 'IRANSansBold';
}

.panel-not-found h1 small {
    display: inline-block;
    width: 100%;
}

.panel-not-found h3, .panel-not-found h4, .panel-not-found h5 {
    font: 400 14pt 'IRANSans';
    color: #b7b7b7;
}

.panel-not-found h5 a {
    display: inline-block;
    padding: 7px 15px;
    margin: 5px 0;
    background-color: #f0f0f0;
    border-radius: 50px;
    color: #000000;
}

.vip-plan-content img {
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 auto 0 auto;
    display: block;
}

.vip-plan-content h1 {
    text-align: center;
    padding: 15px;
    margin: 30px 0;
    font: bold 17pt 'IRANSansBlack';
    box-shadow: 0 28px 21px rgba(0, 0, 0, 0.04);
}

.vip-plan-box {
    padding: 20px;
    margin: 20px 0 0 0;
    background-color: #ffffff;
    border: 4px solid #000000;
    border-radius: 10px;
    text-align: right;
    font: 400 15pt 'IRANSans';
}

.vip-plan-box span {
    margin: 5px 0 0 25px;
    display: inline-block;
    float: right;
    font: bold 13pt 'IRANSansBold';
    color: #000000;
}

.vip-plan-box .discount {
    display: inline-block;
    font-size: 15px;
    margin: 10px 0 0 0;
    color: #ff0000;
}

.vip-plan-box a {
    float: left;
    background-color: #ffffff;
    padding: 7px 13px;
    font: bold 11pt 'IRANSans';
    border-radius: 10px;
    color: #000000;
}

.vip-plan-box a:hover {
    background-color: #000000;
    color: #ffffff;
}

.vip-plan-box.vip-gold {
    border-color: #f8d752;
}

.vip-plan-box.vip-gold:hover {
    box-shadow: 0 0 30px #f8d752;
}

.vip-plan-box.vip-silver {
    border-color: #d2d2d2;
}

.vip-plan-box.vip-silver:hover {
    box-shadow: 0 0 30px #d2d2d2;
}

.vip-plan-box.vip-bronze {
    border-color: #FF5722;
}

.vip-plan-box.vip-bronze:hover {
    box-shadow: 0 0 30px #ff5722;
}

.plan-panel-buy .note {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
    background-color: #f0f0f0;
    margin: 9px 0;
}

.plan-panel-buy .note span {
    background-color: #ffffffff;
    padding: 4px 10px;
    border-radius: 5px;
}

.plan-panel-buy .note span del {
    color: #adadad;
}

.plan-panel-buy .note strong {
    margin: 10px 0;
    display: inline-block;
}

.plan-panel-buy .discount {
    display: inline-block;
    font-size: 14px;
    background-color: #ff0000;
    color: #ffffff;
    padding: 4px 7px;
    border-radius: 5px;
    margin: 0 7px;
}

.zarinpal-payment, .payir-payment {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 10px;
    border-radius: 10px;
}

.zarinpal-payment .payment_method_dis, .payir-payment .payment_method_dis {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0 0 0;
}

.zarinpal-payment .payment_method_dis p, .payir-payment .payment_method_dis p {
    margin: 0;
}

label {
    cursor: pointer;
}

label[for="payment_method"]:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    float: right;
    background: #f0f0f0;
    border-radius: 5px;
    margin: 0 10px;
}

input#payment_method {
    display: none;
}

input[value="zarinpal"]:checked ~ label[for="payment_method"]:before {
    background: #f0f0f0 url("../../../assets/img/zp-logo.png") no-repeat center center !important;
}

input[value="payir"]:checked ~ label[for="payment_method"]:before {
    width: 60px !important;
    background: #f0f0f0 url("../../../assets/img/payir-logo.png") no-repeat center center !important;
}

.payment-wrapper .action-wrapper input {
    float: left;
    border: none;
    padding: 9px 15px;
    background: #FF5F6D;
    background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D);
    background: linear-gradient(to right, #FFC371, #FF5F6D);
    color: #ffffff;
}

.footer-panel-content {
    display: block;
    width: 60%;
    margin: 0 auto 25px auto;
    text-align: center;
    clear: both;
}

.footer-panel-content a {
    display: inline-block;
    padding: 9px 17px;
    font-size: 15px;
    color: #000000;
    background-color: #ffffff;
    margin: 10px 0;
    border-radius: 4px;
}

.footer-panel-content a.h {
    float: right;
}

@media screen and (max-width: 900px) {
    .panel-auth-content {
        width: 100%;
    }

    .user-visitor, .panel-header .visitor-menu, .panel-box, .footer-panel-content {
        width: 100%;
    }
}

@media screen and (max-width: 650px) {
    .panel-header .visitor-menu li, .panel-header .visitor-menu li a {
        width: 100%;
        border: none;
        margin: 4px 0;
        text-align: center;
    }

    .user-visitor, .panel-header .visitor-menu, .panel-box, .footer-panel-content {
        width: 100%;
    }
}
