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

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

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

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

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

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

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

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

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

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

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

* {
    direction: rtl;
    text-align: right;
}

a {
    text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6, input, button, label, .card-header, .navbar-brand, .alert, .dropdown-header, .dropdown-item, .navbar-text, #panel-right ul, .loading-body, th, .tooltip, .group-header, .form-control, .form-control-lg {
    font-family: 'iranyekan', iranyekan, 'roboto', roboto, "serif", "sans-serif" !important;
    font-weight: normal;
}

body {
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
    font-weight: normal;
}

.a {
    color: #007bff;
    cursor: pointer;
}

.a:hover {
    color: #0056b3;
}

.badge, .thumbnail-extension {
    font-family: 'iranyekan', iranyekan, 'roboto', roboto, "serif", "sans-serif" !important;
}

.card-header, .alert-dismissible .close, .navbar-text {
    font-size: 1rem;
}

body, .form-control, .nav-tabs .nav-link, .btn, .group-header {
    font-size: 0.875rem;
}

.dropdown-item, .dropdown-header, .tile-footer, td, .list-group-item {
    font-size: 0.8125rem;
}

.breadcrumb-item, .list-group-item small, .list-group-item .small, .tooltip-inner, .alert, .alert p, .thumbnail-extension {
    font-size: 0.75rem;
}

.status {
    font-size: 90%;
}

.dropdown-item, .dropdown-header {
    text-align: right;
}

td {
    font-weight: normal;
}

.group-header {
    font-weight: normal;
}

label, .input-group-text, .nav-tabs .nav-link.active, .group-header, .label {
    color: #474747;
}

body, .dropdown-item, .card-header > [class*="fa-"] {
    color: #606060;
}

.nav-tabs .nav-link, .order-table .order-info-toggle.active [class*='fa-'] {
    color: #858585;
}

.dropdown-header, .order-table .order-info-toggle [class*='fa-'] {
    color: #bfbfbf;
}

.group-header {
    color: #FFF;
}

.card, .head-bar {
    -moz-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -webkit-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Login */
.login {
    background-color: #f0f0f5;
}

#login-header {
    border-bottom: #ededed 1px solid;
    margin-bottom: 2rem;
}

#login-header .navbar-brand img {
    max-height: 50px;
}

#login {
    position: relative;
    width: 100%;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Style */
.pull-left {
    position: absolute;
    top: 0;
    left: 0;
}

.pull-right {
    position: absolute;
    top: 0;
    right: 0;
}

.font-iranyekan {
    font-family: 'iranyekan', iranyekan, 'roboto', roboto, "serif", "sans-serif";
}

.font-iransans {
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
}

/* Panel top */
#panel-top {
    width: 100%;
    height: 61px;
    background-color: #fff;
    border-bottom: rgba(0, 0, 0, .125) 1px solid;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 909;
    -webkit-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 5px, rgba(0, 0, 0, 0.01) 0 3px 10px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 1px 5px, rgba(0, 0, 0, 0.01) 0 3px 10px;
}

#panel-top #admin-logout {
    width: 60px;
    height: 60px;
    border-right: rgba(0, 0, 0, .125) 1px solid;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#panel-top #admin-logout [class*="fa"] {
    font-size: 1.5rem;
    color: #606060;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#panel-top #admin-logout:hover {
    background-color: #ededea;
}

#panel-top #admin-logout [class*="fa"]:active {
    font-size: 1.4rem;
}

#panel-top #dateTime {
    height: 60px;
    min-width: 130px;
    padding: 7px 15px;
    border-right: rgba(0, 0, 0, .125) 1px solid;
    direction: ltr !important;
}

#panel-top #show-date, #panel-top #show-time {
    width: 100%;
    height: 23px;
    color: #474747;
    font-size: 0.875rem;
    direction: ltr !important;
}

#panel-top #show-date [class*="fa"], #panel-top #show-time [class*="fa"] {
    margin-right: 7px;
    color: #606060;
    font-size: 0.875rem;
    margin-top: -0.09375rem;
    margin-bottom: 0.09375rem;
}

#panel-top #timer, #panel-top #calendar {
    direction: ltr !important;
}

.panel-top-btn {
    height: 60px;
    -ms-flex-align: center !important;
    align-items: center !important;
    background-color: inherit;
    border-radius: 0;
    padding: 0 1.5rem;
    vertical-align: middle;
    text-align: center;
    color: #606060;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    border-right: rgba(0, 0, 0, .125) 1px solid;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.panel-top-btn:hover {
    background-color: #ededea;
}

.panel-top-btn::after {
    display: none;
}

/* Panel Right */
#panel-right {
    width: 230px;
    height: calc(100% - 61px);
    position: absolute;
    z-index: 910;
    right: 0;
    top: 0;
    margin-top: 61px;
    overflow: auto;
    background-color: #FFF;
    border-left: rgba(0, 0, 0, 0.125) 1px solid;
    -webkit-box-shadow: rgba(0, 0, 0, 0.04) -1px 0 5px, rgba(0, 0, 0, 0.01) -3px 0 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.04) -1px 0 5px, rgba(0, 0, 0, 0.01) -3px 0 10px;
    box-shadow: rgba(0, 0, 0, 0.04) -1px 0 5px, rgba(0, 0, 0, 0.01) -3px 0 10px;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#panel-right-toggle {
    width: 66px;
    text-align: center;

    border-right: none;
    border-left: rgba(0, 0, 0, .125) 1px solid;
    font-size: 1.2rem;
}

#panel-right #admin-info {
    width: 100%;
    height: 70px;
    position: relative;
    padding: 0.75rem 64px 0.75rem 0.5rem;
    border-bottom: rgba(0, 0, 0, 0.125) 1px solid;
}

#panel-right #admin-info img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    margin-top: 13px;
    right: 0;
}

#panel-right #admin-info a {
    position: relative;
    width: 100%;
    text-decoration: none;
    font-size: 0.875rem;
    color: #606060;
    overflow: hidden;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#panel-right #admin-info a:hover {
    color: #EF5635;
}

#panel-right #admin-info p {
    position: relative;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 300;
    color: #bfbfbf;
    overflow: hidden;
}

#panel-right ul {
    width: 100%;
    height: auto;
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#panel-right ul a {
    text-decoration: none;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: normal;
    display: block;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#panel-right ul > li {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

#panel-right ul > li > a {
    padding: 0.6rem 0;
    /*border-bottom: rgba(0, 0, 0, .125) 1px solid;*/
    color: #606060;
    cursor: pointer;
}

#panel-right ul > li > a:hover {
    background-color: #ededea;
    color: #474747;
}

#panel-right ul > li > a > [class*='fa-'] {
    margin-right: 1rem;
    margin-left: 0.5rem;
    color: #1b78b2;
}

#panel-right ul > li > ul {
    height: 0;
    overflow: hidden;
    position: relative;
}

#panel-right ul > li > ul > li {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

#panel-right ul > li > ul > li > a {
    padding: 0.6rem 1.35rem 0.6rem 0;
    background-color: #ededea;
    /*border-bottom: rgba(0, 0, 0, .125) 1px solid;*/
    font-size: 0.75rem;
    color: #808080;
}

#panel-right ul > li > ul > li > a > [class*='fa-'] {
    margin: 0 0 0 0.4rem;
    color: #a0a196;
    font-size: 10px;
    -moz-transition: margin-left 0.3s;
    -webkit-transition: margin-left 0.3s;
    transition: margin-left 0.3s;
}

#panel-right ul > li > ul > li > a:hover {
    background-color: #e6e6e2;
    color: #606060;
}

#panel-right ul > li > ul > li > a:hover svg {
    margin-left: 1.25rem;
}

.scroll-menu-click.open {
    background-color: #ededea;
}

.scroll-menu-click .angle {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0.5rem;
    margin-top: 13px;
    color: #a0a196 !important;
    font-size: 0.75rem;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.scroll-menu-click.open .angle {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#panel-content {
    min-height: 100%;
    width: 100%;
    padding-top: 75px;
    padding-bottom: 5rem;
    background-color: #f0f0f5;
}

#panel-content .card-header {
    color: #2b3834;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* List Group */
.card > .list-group > .list-group-item {
    padding: 1rem 1.25rem !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Bootstrap Breadcrumb */
.breadcrumb {
    background-color: #FFF;
    margin-top: 1rem;
}

@media (max-width: 767.98px) {
    .breadcrumb {
        margin-top: 0.5rem;
    }
}

.breadcrumb-item, .breadcrumb-item a {
    color: #818181;
    font-weight: 300;
}

.breadcrumb-item.active, .breadcrumb-item.active a {
    color: #007bff;
}

.breadcrumb-item.d-flex {
    padding-bottom: 0.1rem;
}

.breadcrumb-item a {
    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #bfbfbf !important;
    content: "|";
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Head bar */
.head-bar {
    width: 100%;
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 1px;
    margin-bottom: 1rem;
    background-color: #FFF;
}

.head-title {
    display: inline-block;
    float: right;
    margin: 0 0 0 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: #474747;
}

@media (max-width: 767.98px) {
    .head-title {
        font-size: 1.25rem;
    }
}

.head-bar .breadcrumb {
    padding: 0;
    display: inline-block;
    float: right;
}

.head-bar .breadcrumb .breadcrumb-item {
    float: right;
}

.action-button {
    width: 100%;
    border-top: #EDEDED solid;
}

.action-button .btn {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .6125rem .8125rem;
}

.action-button .btn + .btn {
    margin-right: 0.5rem;
}

.btn-group .btn + .btn {
    margin-right: 0;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Bootstrap Card */
.card {
    border-radius: 1px !important;
    border-top: rgba(0, 0, 0, .50) 2px solid;
}

.card-header > [class*="fa-"] {
    margin-left: 0.4rem;
    color: #1b78b2 !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Bootstrap BTN */
.btn-text {
    margin-top: -0.0625rem;
    margin-bottom: 0.0625rem;
}

.btn [class*="fa"] + .btn-text {
    margin-right: 0.5rem;
}

.btn .btn-text + [class*="fa"] {
    margin-right: 0.5rem;
}

.btn + .btn {
    margin-right: 0.5rem;
}

.btn-info-plus {
    color: #fff;
    background-color: #21c1cb;
    border-color: #21c1cb;
}

.btn-info-plus:hover {
    color: #fff;
    background-color: #1eb0b9;
    border-color: #1ca8b1;
}

.btn-light-plus {
    color: #212529;
    background-color: #F9F9F9;
    border-color: #EEE;
}

.btn-light-plus:hover {
    color: #212529;
    background-color: #F0F0F0;
    border-color: #D5D5D5;
}

.btn-group-lg > .btn, .btn-lg {
    font-size: 1rem;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Bootstrap form */
.form-control {
    height: 38px;
}

.input-group-prepend [class*="fa"] {
    font-size: 80%;
    text-shadow: none !important;
}

.form-control:disabled, .form-control[readonly] {
    color: #A1A3A6;
    background-color: #EBEFF2;
}

.input-group-text {
    background-color: #f1f1f1;
}

.required:before {
    content: '*';
    color: #F20;
    margin-left: 0.25rem;
}

.btn, .btn.focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.form-control, input, textarea, label:before, label:after {
    outline: 0 !important;
    box-shadow: none !important;
}

::-webkit-input-placeholder {
    padding-right: 0.20rem !important;
    color: #B5B5B5 !important;
    font-size: 0.8125rem !important;
    font-weight: 300 !important;
    font-style: italic;
}

::-moz-placeholder {
    padding-right: 0.20rem !important;
    color: #B5B5B5 !important;
    font-size: 0.8125rem !important;
    font-weight: 300 !important;
    font-style: italic;
}

:-ms-input-placeholder {
    padding-right: 0.20rem !important;
    color: #B5B5B5 !important;
    font-size: 0.8125rem !important;
    font-weight: 300 !important;
    font-style: italic;
}

::placeholder {
    padding-right: 0.20rem !important;
    color: #B5B5B5 !important;
    font-size: 0.8125rem !important;
    font-weight: 300 !important;
    font-style: italic;
}

/* Select Date Input */
.input-group-calendar {
    position: relative;
}

.form-calendar {
    height: 250px;
    min-width: 256px !important;
    display: none;
    position: absolute;
    left: 0;
    bottom: -257px;
    z-index: 1;
}

.form-calendar.show {
    display: block;
}

.form-calendar-content {
    position: relative;
    background-color: #FFF;
    border-radius: 0.25rem;
    border: #ced4da 1px solid;
    padding: 0.5rem;
    -moz-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -webkit-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -o-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
}

.form-calendar-content:before {
    content: '';
    position: absolute;
    left: 13px;
    top: 0;
    margin-top: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: #ced4da 7px solid;
}

.form-calendar-content:after {
    content: '';
    position: absolute;
    left: 14px;
    top: 0;
    margin-top: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: #FFF 6px solid;
}

.form-calendar-header {
    position: relative;
    font-size: 0.8125rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

.form-calendar-body {
    position: relative;
    overflow: hidden;
}

.form-calendar-header .previous-month, .form-calendar-header .next-month {
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    z-index: 1;
    color: #AAA;
}

.form-calendar-header .next-month:hover, .form-calendar-header .previous-month:hover {
    color: #069AC2;
}

.form-calendar-header .next-month [class*='fa-'], .form-calendar-header .previous-month [class*='fa-'] {
    font-size: 0.8125rem;
}

.form-calendar-header .header-text {
    color: #069AC2;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-calendar-body .week-days {
    width: 34px;
    height: 34px;
    font-size: 0.8125rem;
    font-weight: 500;
    float: right;
    color: #474747;
}

.form-calendar-body .date-day {
    width: 34px;
    height: 34px;
    font-size: 0.8125rem;
    font-weight: 300;
    float: right;
    border-radius: 0.25rem;
    cursor: pointer;
    color: #999;
}

.form-calendar-body .date-day:hover {
    color: #069AC2;
    background: #F5F0F1;
}

.form-calendar-body .date-day.muted {
    cursor: inherit;
}

.form-calendar-body .date-day.active {
    color: #FF8507 !important;
}

.form-calendar-body .date-day:hover.muted {
    color: inherit;
    background: inherit;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Form */
#form-upload-image .input-primary {
    height: 38px;
    border: #007bff 1px solid;
    color: #0063CD;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
}

.custom-control-label-top-1:before, .custom-control-label-top-1:after {
    top: 0.1rem;
}

.w-1 {
    width: 1px;
}

.w-custom-control {
    width: 3rem;
}

.w-row-count {
    width: 3.25rem;
}

.w-sm-row-count {
    width: 1.75rem;
}

.SelectImageGroup {
    display: inline-block;
    position: relative;
    margin-left: 0.75rem;
    float: right;
}

.SelectImageBox {
    position: relative;
    width: 7rem;
    height: 7rem;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.SelectImageBox:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0.25rem;
    content: attr(data-title);
    color: #dc3545;
    text-shadow: #fff 0 2px 4px;
    font-size: 0.75rem;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.SelectImageBox.img-thumbnail {
    height: 7rem !important;
}

.SelectImageBox img {
    max-width: 100% !important;
    max-height: 100% !important;
}

.SelectImageCleanButton, .DeleteSelectImage {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.35rem;
    display: none;
    cursor: pointer;
    background-color: #dc3545;
    color: white;
    border: #dc3545 1px solid;
    border-radius: 0.25rem;
}

.SelectImageGroup:hover .SelectImageCleanButton, .SelectImageGroup:hover .DeleteSelectImage {
    display: flex;
}

.SelectImageInput {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: -1;
}

.AddImage {
    /*float: right;*/
    /*margin-left: 0.75rem;*/
}

.invalid-value {
    border-color: #E03456 !important;
}

small.form-text {
    height: 0;
    overflow: hidden;
    font-weight: 300;
    font-size: 0.75rem !important;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

small.form-text.show {
    height: 20px;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Modal */
.modal {
    padding: 0 !important;
}

.select-image-modal .modal-dialog {
    min-width: 75%;
}

.select-image-modal .select-image-id {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.select-image-modal .img-thumbnail {
    position: relative;
    overflow: hidden;
}

.select-image-modal .img-thumbnail:before {
    content: attr(data-title);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 24px;
    font-size: 0.75rem;
    font-weight: 300;
    background: #dee2e6;
    color: #4D5966;
    white-space: pre-wrap;
    text-align: center;
}

.file-list .custom-checkbox {
    padding-left: 1.5rem !important;
    overflow: hidden;
}

.file-list .custom-checkbox label {
    max-width: 100%;
    white-space: pre-wrap;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Thumbnail */
.img-thumbnail {
    position: relative;
    height: 9rem;
}

.img-thumbnail img {
    max-height: 8.375rem;
}

.thumbnail-extension {
    width: 3rem;
    height: 1.5rem;
    position: absolute;
    top: 0.5rem;
    left: 0;
    padding: 0.1rem;
    background-color: #dee2e6;
    color: #4D5966;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 0 0.25rem 0.25rem 0;
    border: #CFD5DB 1px solid;
    border-left: none;
}

.copy-to-clipboard {
    width: 3rem;
    height: 1.5rem;
    position: absolute;
    top: 2.5rem;
    left: 0;
    padding: 0.25rem 0;
    background-color: #dee2e6;
    color: #4D5966;
    font-size: 1rem;
    text-align: center;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    border: #CFD5DB 1px solid;
    border-left: none;
}

.copy-to-clipboard.down {
    background-color: #DADDE0;
    color: #373F49;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Help */
.help-text {
    font-size: 0.75rem;
    font-weight: normal;
    cursor: pointer;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Captcha */
.captcha_image {
    min-width: 75px;
    max-width: 100px;
    height: 38px;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-right: 0.5rem;
    border: 1px solid #ced4da;
}

.captcha_image img {
    max-width: 100%;
    height: 100%;
}

.captcha_refresh {
    margin-right: 0.5rem;
    padding: 0 .75rem;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Tile */
.tile {
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -moz-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -webkit-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -o-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
}

.tile + .tile {
    margin-right: 0.75rem;
}

.tile-card {
    width: 100%;
    border-radius: 1px;
    background-color: #548be6;
}

.tile-header {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: rgba(0, 0, 0, .1);
    color: #F6F6F6;
}

.tile-percent {
    display: inline-block;
    direction: ltr;
    float: left;
    -webkit-transition: color 200ms;
    -o-transition: color 200ms;
    -moz-transition: color 200ms;
    transition: color 200ms;
}

.tile-body {
    width: 100%;
    height: 6rem;
    padding: 0.5rem 0.75rem;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.tile-body [class*="fa"] {
    font-size: 4rem;
    width: 60%;
}

.tile-body [class*="fa"], .tile-body h2 {
    text-align: center;
    color: rgba(255, 255, 255, .5);
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.tile-body h2 {
    width: 40%;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0;
}

.tile-card:hover .tile-body [class*="fa"], .tile-card:hover .tile-body h2 {
    color: #f7f7f7;
}

.tile-footer {
    width: 100%;
    padding: 0.3rem 0.75rem;
    background-color: rgba(255, 255, 255, .1);
}

.tile-footer.min-h {
    min-height: 1.81875rem;
}

.tile-footer a {
    color: #eee;
}

.tile-footer a:hover {
    color: #FFF;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Tumbotron */
.jumbotron {
    padding: 1.25rem;
    background-color: rgba(0, 0, 0, 0.02);
    border: #E2E2E2 1px solid;
    -o-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 1px inset, rgba(0, 0, 0, 0.02) 0 2px 2px inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 1px inset, rgba(0, 0, 0, 0.02) 0 2px 2px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.04) 0 1px 1px inset, rgba(0, 0, 0, 0.02) 0 2px 2px inset;
    box-shadow: rgba(0, 0, 0, 0.04) 0 1px 1px inset, rgba(0, 0, 0, 0.02) 0 2px 2px inset;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Group */
.group {
    position: relative;
    width: 100%;
    padding-top: 0.9063rem;
}

.group-content {
    position: relative;
    width: 100%;
    padding: 2.4063rem 1.5rem 1.5rem;
    /*background-color: rgba(0, 0, 0, 0.015);*/
    border: rgba(0, 0, 0, 0.15) 1px solid;
    border-right-width: 2px;
    border-radius: 0.25rem;
    margin-bottom: 1.75rem;
}

.group-header {
    position: absolute;
    top: 0;
    margin-top: -0.9063rem;
    right: 0;
    margin-right: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: #FFF;
    border: rgba(0, 0, 0, 0.15) 1px solid;
    border-right-width: 2px;
    border-radius: 0.25rem;
    box-shadow: rgba(0, 0, 0, 0.10) 0 2px 5px -3px;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Text */
.text-blue-dark {
    color: #1b78b2 !important;
}

.text-blue-light {
    color: #1b78b2 !important;
}

.text-po-primary {
    color: #1b78b2 !important;
}

.font-size-xl {
    font-size: 1.25rem !important;
}

.font-size-lg {
    font-size: 1rem !important;
}

.font-size-md {
    font-size: 0.875rem !important;
}

.font-size-sm {
    font-size: 0.8125rem !important;
}

.font-size-xs {
    font-size: 0.75rem !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Dropdowns */
#panel-top .dropdown-menu {
    min-width: 12rem;
    background-color: #FFF;
    left: -1px !important;
}

.dropdown-menu {
    border-radius: 1px;
    border-color: #dfdfdf;
}

.dropdown-item {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dropdown-item, .dropdown-header {
    position: relative;
    padding: .25rem 0.75rem;
    font-weight: normal;
}

.dropdown-item-icon {
    margin-left: 0.5rem;
    color: #000;
    opacity: 0.5;
}

.dropdown-item > .badge, .dropdown-header > .badge {
    position: absolute;
    left: 0;
    margin-left: 0.75rem;
    padding: .25em .5em;
}

.dropdown-toggle .badge.pull-left, .dropdown-toggle .badge.pull-right {
    font-size: 70%;
}

.dropdown-item {
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #ededea;
}

.dropdown-item:focus {
    background-color: #ededea;
    color: inherit;
}

.dropdown-toggle {
    position: relative;
    cursor: pointer;
}

.btn-no.dropdown-toggle::after { /* Style for dropdown toggle not a button */
    margin-left: .10em !important;
    vertical-align: .10em !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #1b78b2;
    cursor: default !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Filter Area */
.filter-area .input-group-prepend .input-group-text {
    background-color: #FFF;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Table */
.table-collapse, .table-collapse tr, .table-collapse th, .table-collapse td {
    border: none !important;
}

table .btn [class*='fa-'], .table .btn [class*='fa-'] {
    margin-top: 0.15rem;
    margin-bottom: -0.15rem;
}

.table thead > tr > td, .table tbody > tr > td {
    vertical-align: middle;
}

.table > thead[class*="bg-"] + tbody > tr:first-child td { /* Delete border top wen use bg color for table head */
    border-top: none !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.table-collapse-toggle {
    cursor: pointer;
    padding: 0.2rem 0.6rem;
}

.table-collapse-toggle [class*='fa-'] {
    -moz-transition: all 100ms ease-in-out;
    -webkit-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
}

.table-collapse-toggle.active [class*='fa-'] {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.order-table .order-info .collapse, .contactUs-table .contactUs-info .collapse {
    border-top: rgba(0, 0, 0, 0.055) 1px dashed;
}

.order-table tr.active, .order-table tr.active + .order-info, .contactUs-table tr.active, .contactUs-table tr.active + .contactUs-info {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.table th, .table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Tooltip */
.tooltip-inner {
    border-radius: 1px;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Row */
.row-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Pagination */
.pagination {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Status */
.status {
    display: inline-block;
    padding: 2px 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid;
    border-right-width: 2px;
    border-left-width: 2px;
    font-size: 0.75rem;
    font-weight: normal;
}

.status-default {
    border-color: #e5e5e5;
    color: #666;
}

.status-disable {
    color: #d9534f;
    border-color: #d43f3a;
}

.status-enable {
    color: #55c351;
    border-color: #43b63f;
}

.status-waiting-for-confirmation {
    color: sandybrown;
    border-color: #e79b5b;
}

.status-confirmed {
    color: darksalmon;
    border-color: #d88b71;
}

.status-preparing {
    color: #459DBD;
    border-color: #3e8daa;
}

.status-designing {
    color: #C4488C;
    border-color: #b44281;
}

.status-packed {
    color: #9845BC;
    border-color: #893ea9;
}

.status-sent {
    color: #5B45BD;
    border-color: #513da8;
}

.status-at-the-final-review {
    color: rosybrown;
    border-color: #ab8282;
}

.status-error {
    color: #D8524F;
    border-color: #c34a47;
}

.status-ready-for-delivery {
    color: #4573BD;
    border-color: #3d66a8;
}

.status-delivered {
    color: #55c351;
    border-color: #59B259;
}

.status-success {
    color: #55c351;
    border-color: #59B259;
}

.status-danger {
    color: #DB5B5D;
    border-color: #CC6666;
}

.status-cancelled {
    color: #DB5B5D;
    border-color: #AAA;
}

/* [GLOBAL ALERT] --------------------------------------------------------------------------------------------------- */
.global-alert {
    width: 100%;
}

.alert {
    width: 100%; /* because parent tag display is flex */
    border-right-width: 6px;
}

.alert p, .alert .p {
    margin-bottom: 0;
}

.alert .alert-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.96rem 0.75rem;

}

.alert-dismissible .close {
    padding: 0.85rem 0.75rem !important;
    text-shadow: inherit !important;
    color: rgba(150, 150, 150, 0.6) !important;
    opacity: 1 !important;
}

.alert-dismissible .close:hover {
    color: rgba(150, 150, 150, 1.0) !important;
}

.alert-dismissible.rtl p {
    text-align: right;
}

.alert-dismissible.ltr p {
    text-align: left;
}

.alert-danger {
    color: #dc3545;
    background-color: #fff;
    border-color: #dc3545;
}

.alert-success {
    color: #28a745;
    background-color: #fff;
    border-color: #28a745;
}

.alert-warning {
    color: #ECB100;
    background-color: #fff;
    border-color: #ffc107;
}

.alert-info {
    color: #17a2b8;
    background-color: #fff;
    border-color: #17a2b8;
}

.alert-primary {
    color: #007bff;
    background-color: #fff;
    border-color: #007bff;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Chart */
#visitStatistics {
    min-height: 350px;
}

.chart {
    width: 100%;
    height: 20rem;
    display: block;
    position: relative;
    padding-bottom: 22px;
    box-sizing: border-box;
    direction: ltr;
    overflow: auto;
}

.chart-body {
    width: 100%;
    min-width: 600px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: #646464 2px solid;
    background-color: #F9F9F9;
    border-radius: 1px;
}

.chart-body-stat, .chart-left-nav ul {
    width: 100%;
    height: 100%;
    position: relative;
}

.chart-body-stat {
    background-repeat: repeat-x;
    padding: 15px 0 0 0;
}

.chart-body-stat li {
    height: 100%;
    position: relative;
    float: left;
}

.chart-body-stat li > div.visits {
    width: 40%;
    position: absolute;
    left: 0;
    margin-left: 10%;
    bottom: 0;
    border-radius: 1px 1px 0 0;
}

.chart-body-stat li > div.users {
    width: 40%;
    position: absolute;
    left: 0;
    margin-left: 50%;
    bottom: 0;
    border-radius: 1px 1px 0 0;
}

.chart-left-nav {
    width: 22px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-bottom: 22px;
    box-sizing: border-box;
}

.chart-left-nav ul > li {
    width: 100%;
    height: 20%;
    position: relative;
}

.chart-left-nav ul > li > p {
    position: absolute;
    top: -6px;
    right: 4px;
    font-size: 10px;
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
    color: #323232;
}

.chart-bot-nav {
    width: 100%;
    min-width: 600px;
    height: 22px;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
}

.chart-bot-nav-menu {
    width: 100%;
    height: 100%;
    position: relative;
}

.chart-bot-nav-menu li {
    height: 100%;
    line-height: 20px;
    float: left;
    text-align: center;
    font-size: 10px;
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
    color: #323232;
}

.chart-info {
    padding: 0 10px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px;
    margin-right: 10px;
    z-index: 10;
    line-height: 22px;
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
    font-size: 10px;
    color: #333;
    text-align: right;
    direction: rtl;
    background-color: rgba(255, 255, 255, .7);
    border: #fff 1px solid;
    border-radius: 1px;
}

.chart-info p {
    margin-bottom: 0;
}

.chart-info p > [class*="fa "] {
    margin-left: 5px;
}

.chart-show-value {
    opacity: 0;
    padding: 3px 7px 0;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 100;
    font-family: 'IRANSans', IRANSans, "serif", "sans-serif";
}

.chart .theme-1 div.visits {
    background-color: #7859C2;
}

.chart .theme-1 .chart-show-value {
    color: #375096;
    background-color: #E3DEF3;
    border: #A692D7 1px solid;
}

.chart .theme-1 .visitInfo {
    color: #7859C2;
}

.chart .theme-1 div.users {
    background-color: #6CAAC9;
}

.chart .theme-1 .userInfo {
    color: #6CAAC9;
}

.chart div.visits, .chart div.users {
    -webkit-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.chart div.visits:hover, .chart div.users:hover {
    box-sizing: border-box;
    background-color: #555;
}

.chart div.visits:hover:after, .chart div.users:hover:after {
    content: '▼';
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: -9px;
    text-align: center;
    color: #333;
    font-size: 0.5rem;
}

#chart-stat-day, #chart-stat-week, #chart-stat-month {
    width: 100%;
    height: 100%;
}

#chart-stat-week, #chart-stat-month {
    display: none;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Grid */
.width-fluid {
    width: 100% !important;
}

.dire-rtl {
    direction: rtl !important;
}

.dire-ltr {
    direction: ltr !important;
}

.normal-col-30, .normal-col-30 li {
    width: 3.333%;
}

.normal-col-7, .normal-col-7 li {
    width: 14.285714%;
}

.normal-col-12, .normal-col-12 li {
    width: 8.333%;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Color */
.bg-pink {
    background-color: #e83e8c !important;
}

.bg-violet {
    background-color: #b21d90 !important;
}

.bg-orange {
    background-color: #ff751f !important;
}

.bg-info-plus {
    background-color: #21c1cb !important;
}

.text-pink {
    color: #e83e8c !important;
}

.text-violet {
    color: #b21d90 !important;
}

.text-orange {
    color: #ff751f !important;
}

.text-info-plus {
    color: #21c1cb !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* Drop file box */
.drop-file-box {
    width: 100%;
    height: 200px;
    border: rgba(0, 0, 0, 0.3) 2px dashed;
    color: rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.drop-file-box.drop-over {
    border-color: rgba(0, 0, 0, 0.7);
}

.h-12r {
    height: 12rem !important;
}

.h-14r {
    height: 14rem !important;
}

/* [HELP ALERT] ----------------------------------------------------------------------------------------------------- */
.help-alert {
    /*display: none;*/
    min-height: 28px;
    max-height: 56px;
    position: absolute;
    z-index: 1070;
    padding: 0.25rem 0.5rem 0.25rem 36px;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: normal;
    font-family: 'iranyekan', iranyekan, 'roboto', roboto, "serif", "sans-serif";
}

.help-alert:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: 0;
    margin-bottom: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
}

.help-alert.danger {
    color: #dc3545;
    background-color: rgba(255, 255, 255, 1.0);
    border: #dc3545 1px solid;
}

.help-alert.danger:after {
    border-top-color: #dc3545;
}

.help-alert .help-close {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    margin-top: -1px;
    left: 0;
    margin-left: -1px;
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.15);
}

.help-alert .help-close [class*='fa-'] {
    opacity: 0.9;
}

/* [Autocomplete] --------------------------------------------------------------------------------------------------- */
.AutoCompleteGroup {
    position: relative;
}

.Autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    max-height: 402px; /* 2px is border */
    overflow: hidden;
    background-color: #FFF;
    border: #ced4da 1px solid;
    border-radius: 0.25rem;
    -moz-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -webkit-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    -o-box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
    box-shadow: rgba(0, 0, 0, .30) 0 2px 6px -3px;
}

.AutocompleteList {
    max-height: 400px;
    overflow: auto;
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.AutocompleteItem {
    width: 100%;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: normal;
    color: #909090;
}

.AutocompleteItem:hover {
    background-color: #F7F8FA;
    border-color: #F0F1F2;
    color: #069AC2;
}

.AutocompleteItem.Disabled {
    border: none;
    color: #AAA;
    cursor: inherit;
}

.AutocompleteItem.Disabled:hover {
    background-color: inherit;
    border-color: inherit;
    color: #AAA;
}

/* [LOADING] -------------------------------------------------------------------------------------------------------- */
.loading {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url("../../Image/background_line.png");
}

.loading.show {
    display: block;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 76px;
    height: 27px;
    background: #FFF;
    border: #e5e5e5 1px solid;
    border-radius: 1px;
}

.lds-ellipsis div {
    position: absolute;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1b78b2;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 12px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 12px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 51px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(19px, 0);
    }
}

.border-x {
    border-right: #eee 1px solid;
    border-left: #eee 1px solid;
}

.table .border-x, table .border-x {
    border-color: #dee2e6;
}

.table-fram-borderd {
    border: #dee2e6 1px solid;
}

.table-bg-static {
    background-color: #F0F2F2;
}

.page-link {
    color: #4cb370;
    background-color: #fff;
    border: 1px solid #dee6e0;
}

.page-link:hover {
    color: #45a359;
    background-color: #e9efeb;
    border-color: #dee6e0;
}

.page-link:focus {
    box-shadow: none;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #4cb370;
    border-color: #4cb370;
}

.page-item.disabled .page-link {
    color: #6c7d71;
    background-color: #fff;
    border-color: #dee6e0;
}

.scal-60 {
    max-height: 60px;
    min-width: 60px;
}

.ContactInfoContent {
    display: none;
}

.fram {
    padding: 0.75rem;
    border: #dee6e0 1px solid;
}

.form-group .fram {
    border-radius: 0.25rem;
    border-color: #ced4da;
}

.dire-ltr-all, .dire-ltr-all * {
    direction: ltr;
    text-align: left;
}

.footer {
    margin-top: 4rem;
    font-size: 1rem;
    font-weight: 500;
    color: #888;
    font-family: 'iranyekan', iranyekan, "serif", "sans-serif";
}

.footer img {
    padding-bottom: 5px;
}

.footer .text {
    border: none;
}

.c-p {
    cursor: pointer !important;
}

.select-image-modal {
    z-index: 1500;
}

.alert-mb0 .alert {
    margin-bottom: 0 !important;
}

.ap-modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.3);
    overflow-x: hidden;
    overflow-y: auto;
}

.ap-modal-dialog {
    display: flex;
    margin: 1.5rem auto;
}

.ap-modal-body {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
}

/* XS */
#login {
    padding: 0 15px;
}

#panel-content {
    padding-right: 0;
}

#panel-right {
    margin-right: -240px;
    transform: scaleX(0);
}

#panel-right.show {
    margin-right: 0 !important;
    transform: scaleX(1);
}

.action-button {
    border-top-width: 1px;
    padding-top: 0.75rem;
}

#form-upload-image .input-primary {
    width: 100%;
}

#renderVisualProduct {
    border-right: none;
    border-bottom: #dee2e6 1px solid;
}

.table-cell-fw-lg {
    width: 200px !important;
    max-width: 200px !important;
}

@media (min-width: 576px) {
    /* sm */
    #login {
        padding: 0 15px;
    }

    #panel-content {
        padding-right: 0;
    }

    .action-button {
        border-top-width: 1px;
        padding-top: 0.75rem;
    }

    #form-upload-image .input-primary {
        width: 100%;
    }

    #renderVisualProduct {
        border-right: none;
        border-bottom: #dee2e6 1px solid;
    }

    .table-cell-fw-lg {
        width: 300px !important;
        max-width: 300px !important;
    }
}

@media (min-width: 768px) {
    /* md */
    #login {
        padding: 0 10%;
    }

    #panel-content {
        padding-right: 0;
    }

    .action-button {
        border-top-width: 1px;
        padding-top: 0.75rem;
    }

    #form-upload-image .input-primary {
        width: 230px;
    }

    #renderVisualProduct {
        border-right: none;
        border-bottom: #dee2e6 1px solid;
    }

    .table-cell-fw-lg {
        width: 450px !important;
        max-width: 450px !important;
    }

    .drop-file-box {
        font-size: 1.25rem;
    }
}

@media (min-width: 992px) {
    /* lg */
    #login {
        padding: 0 25%;
    }

    #panel-content {
        padding-right: 229px;
    }

    #panel-right {
        margin-right: 0;
        transform: scaleX(1);
    }

    .action-button {
        border-top-width: 0;
        padding-top: 0;
    }

    #form-upload-image .input-primary {
        width: 230px;
    }

    #renderVisualProduct {
        border-right: #dee2e6 1px solid;
        border-bottom: none;
    }

    .table-cell-fw-lg {
        width: 500px !important;
        max-width: 500px !important;
    }
}

@media (min-width: 1200px) {
    /* xl */
    #login {
        padding: 0 30%;
    }

    #panel-content {
        padding-right: 229px;
    }

    .action-button {
        border-top-width: 0;
        padding-top: 0;
    }

    #form-upload-image .input-primary {
        width: 230px;
    }

    #renderVisualProduct {
        border-right: #dee2e6 1px solid;
        border-bottom: none;
    }

    .table-cell-fw-lg {
        width: 700px !important;
        max-width: 700px !important;
    }

    .drop-file-box {
        font-size: 1.5rem;
    }
}

#cke_12, #cke_29, #cke_30, #cke_31, #cke_32, #cke_44, #cke_1_toolbar_collapser {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.cke_chrome {
    box-shadow: none !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    overflow: hidden !important;
}

.comment-info {
    position: relative;
    margin-bottom: 1.25rem;
    border-radius: 0.25rem;
}

.comment-info:hover:before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    left: -8px;
    bottom: -8px;
    background-color: #f5f5f7;
    border: #f0f0f2 1px solid;
    border-radius: 0.25rem;
}

.comment-info .comment-actions {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    z-index: 1000;
}

.comment-info .comment-actions .btn {
    padding: 2px 5px;
    font-size: 0.8125rem;
    font-weight: normal;
}

.comment-info .comment-title {
    font-weight: 500;
    margin-bottom: 0.75rem;
    padding-right: 0.75rem;
    padding-left: 120px;
    position: relative;
    display: inline-block;
}

.comment-info .comment-title:before {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    width: 3px;
    height: 80%;
    border-radius: 1px;
    background-color: #1b78b2;
}

.comment-info .content {
    line-height: 1.5rem;
    opacity: 0.8;
}

.tick-primary, .tick-success {
    padding-right: 1.5rem;
    position: relative;
    line-height: 1.5rem;
    margin-bottom: 2.25rem;
    color: rgba(0, 0, 0, 0.55);
}

.tick-primary:before, .tick-success:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 2px;
}

.tick-primary:before {
    background-color: #3D82CC;
}

.tick-success:before {
    background-color: #3ECF90;
}

.tick-primary .attachment, .tick-success .attachment {
    display: inline-block;
    margin-top: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
    border: #eee 1px solid;
    background-color: rgba(0, 0, 0, 0.01);
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 0.8125rem;
}

.tick-primary .attachment:hover, .tick-success .attachment:hover {
    color: rgba(0, 0, 0, 0.55);
}

.accordion-btn {
    padding: 0.75rem 1rem;
    background-color: #F0F3F7;
    cursor: pointer;
    border-radius: 0.25rem;
    color: #4A4B4C;
    -webkit-box-shadow: rgba(37, 38, 38, 0.15) 0 1px 1px;
    box-shadow: rgba(37, 38, 38, 0.15) 0 1px 1px;
}

.accordion-btn h6 {
    color: #4A4B4C;
    font-size: 1rem;
}

.accordion-btn svg {
    font-size: 70%;
    opacity: 0.75;
    color: #4A4B4C;
}

.page-question .table-hover tbody tbody tr {
    background-color: inherit !important;
}

.page-question .question-info .item {
    padding: 0 0.5rem;
}

.page-question .question-info .item:first-child {
    padding-right: 0;
}

.page-question .question-info .item + .item {
    border-right: rgba(0, 0, 0, 0.15) 1px solid;
}

.page-question .question-info .item span {
    display: inline-flex;
}

.page-question .question-info .item span + span {
    margin-right: 0.25rem;
}

.page-question .question-text, .page-question .question-answer {
    white-space: normal;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5rem;
}

.page-question > form > .table-responsive > table > tbody > tr {
    border-top-width: 4px !important;
}

.page-question .labeld {
    position: relative;
    padding-right: 1.5rem;
    min-height: 3rem;
}

.page-question .labeld:before {
    position: absolute;
    top: 10px;
    right: -10px;
    content: attr(data-label);
    transform: rotate(-90deg);
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    color: #99AECC;
    font-weight: 300;
}

.question-product .hidden {
    display: none;
}

.question-product .select-btn {
    color: #67BBE6;
    border-bottom: #67BBE6 1px dashed;
    cursor: pointer;
}

.question-product .product {
    background-color: #F5F8FA;
    padding: 2px 10px 4px;
    border-radius: 3px;
}

.question-product .product .title {
    color: #6585E3;
    font-weight: 500;
    margin-right: 0.5rem;
}

.question-product .edit-btn {
    color: #67BBE6;
    border-bottom: #67BBE6 1px dashed;
    cursor: pointer;
}

.question-product .delete-btn {
    color: #F16C9C;
    border-bottom: #F16C9C 1px dashed;
    cursor: pointer;
}

.calculated-length {
    display: inline-flex;
    height: 17px;
    position: absolute;
    left: 19px;
    bottom: 1px;
    font-size: 0.6875rem;
    font-weight: 300;
    background-color: #fff;
}

.modal-select-product .pro-tab-menu .nav-item {
    border: #f5f5f5 1px solid;
    border-radius: 3px;
    overflow: hidden;
}

.modal-select-product .pro-tab-menu .nav-item a {
    padding: 0 10px;
}

.question-product-item {
    position: relative;
    padding: 0.25rem;
    background-color: #fafafa;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.question-product-item .img {
    height: 50px;
    width: 62px;
    padding-left: 12px;
}

.question-product-item .img img {
    max-width: 100%;
}

.question-product-item .title {
    padding-left: 12px;
    width: calc(100% - 62px);
}

.question-product-item .title h6 {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: normal;
    line-height: 1.85;
}

.custom-control-label {
    padding-top: 3px;
}

.pro-tab-menu ul li {
    display: inline-block;
    margin-right: 1.25rem;
    line-height: 2;
}

.btn-xs {
    font-weight: 300;
    font-size: 0.8125rem;
    padding: .125rem .25rem;
}