@import url('/package/css/shadow.css');
@import url('/package/font/iranSANS/font.css');
@import url('/package/font/Brush-Script-Std/font.css');
@import url('/package/font/fontawesome/font.css');
@import url('/package/font/G-OpenSans/font.css');
@import url('/package/font/MaterialIcons/material-icons.css');
body, html {
    min-height: 100%;
}
html.error-page, html.error-page body {
    height: 100%;
}
body {
    position: relative;
    margin: 0;
    padding: 0 0 0;
    font-family: iransans, sans-serif;
    background-color: #ECF0F6;
    direction: rtl;
    overflow-y: scroll;
}
[lang="en"]{
    font: 12px OpenSans-Light !important;
}
[lang="en"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font: 12px OpenSans-Light !important;
}
[lang="en"]::-moz-placeholder { /* Firefox 19+ */
    font: 12px OpenSans-Light !important;
}
[lang="en"]:-ms-input-placeholder { /* IE 10+ */
    font: 12px OpenSans-Light !important;
}
[lang="en"]:-moz-placeholder { /* Firefox 18- */
    font: 12px OpenSans-Light !important;
}


.token{
    font-family: Monospace, serif;
    letter-spacing: 1px;
}

body.disable-scroll{
    overflow: hidden;
}

input {
    font-family: iransans, sans-serif;
}

* {
    box-sizing: border-box;
}
*:focus{
    outline: none;
}
input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

@-webkit-keyframes spinner-border {
    to { transform: rotate(360deg); }
}
@-moz-keyframes spinner-border {
    to { transform: rotate(360deg); }
}
@-o-keyframes spinner-border {
    to { transform: rotate(360deg); }
}
@keyframes spinner-border {
    to { transform: rotate(360deg); }
}
@-webkit-keyframes spinner-grow {
    0% {transform: scale(0);}
    50% {opacity: 1;}
}
@-moz-keyframes spinner-grow {
    0% {transform: scale(0);}
    50% {opacity: 1;}
}
@-o-keyframes spinner-grow {
    0% {transform: scale(0);}
    50% {opacity: 1;}
}
@keyframes spinner-grow {
    0% {transform: scale(0);}
    50% {opacity: 1;}
}
@-webkit-keyframes flash_color_black {
    0%, 50%, 100% {
        color: rgba(0,0,0,1);
    }

    25%, 75% {
        color: rgba(0,0,0,0);
    }
}
@keyframes flash_color_black {
    0%, 50%, 100% {
        color: rgba(0,0,0,1);
    }

    25%, 75% {
        color: rgba(0,0,0,0);
    }
}
.right{
    display: inline-block;
    float: right;
}
.left{
    display: inline-block;
    float: left;
}
br{
    font-size: 12px;
}
.center-center{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
}
.center-center .full-line{
    margin: auto;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    display: inline-block !important;
    min-width: unset !important;
    max-width: unset !important;
    vertical-align: top;
}
.col-1 {
    width: 8.33333333% !important;
    --width:8.33333333%;
    width: var(--width) !important;
}
.col-2 {
    width: 16.66666667% !important;
    --width:16.66666667%;
    width: var(--width) !important;
}
.col-3 {
    width: 25% !important;
    --width:25%;
    width: var(--width) !important;
}
.col-4 {
    width: 33.33333333% !important;
    --width:33.33333333%;
    width: var(--width) !important;
}
.col-5 {
    width: 41.66666667% !important;
    --width:41.66666667%;
    width: var(--width) !important;
}
.col-6 {
    width: 50% !important;
    --width:50%;
    width: var(--width) !important;
}
.col-7 {
    width: 58.33333333% !important;
    --width:58.33333333%;
    width: var(--width) !important;
}
.col-8 {
    width: 66.3% !important;
    --width:66.3%;
    width: var(--width) !important;
}
.col-9 {
    width: 75% !important;
    --width:75%;
    width: var(--width) !important;
}
.col-10 {
    width: 83.33333333% !important;
    --width:83.33333333%;
    width: var(--width) !important;
}

.col-11 {
    width: 91.66666667% !important;
    --width:91.66666667%;
    width: var(--width) !important;
}
.col-12 {
    width: 100% !important;
    --width:100%;
    width: var(--width) !important;
}


.col-1.mRight,
.col-2.mRight,
.col-3.mRight,
.col-4.mRight,
.col-5.mRight,
.col-6.mRight,
.col-7.mRight,
.col-8.mRight,
.col-9.mRight,
.col-10.mRight,
.col-11.mRight,
.col-12.mRight {
    --mRight:8px;
    margin-right: calc(var(--mRight)) !important;
    width: calc(var(--width) - var(--mRight)) !important;
}

.col-1.mLeft,
.col-2.mLeft,
.col-3.mLeft,
.col-4.mLeft,
.col-5.mLeft,
.col-6.mLeft,
.col-7.mLeft,
.col-8.mLeft,
.col-9.mLeft,
.col-10.mLeft,
.col-11.mLeft,
.col-12.mLeft {
    --mLeft:8px;
    margin-left: calc(var(--mLeft)) !important;
    width: calc(var(--width) - var(--mLeft)) !important;
}

pre{
    font-size: 12px;
}

.full-line {
    display: block !important;
}



.form {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 0;
}

.form form{
    display: block;
    width: 100%;
}
.form > .head {
    position: relative;

    display: -o-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    width: 100%;
    padding: 18px;
    background: #F3F3F5;
    border-radius: 6px 6px 0 0;
    margin-bottom: 24px;
    justify-content: space-between;
}

.form > .head .title {
    font: 16px iransans_Medium;
    display: inline-block;
    vertical-align: middle;
    color: #48465b;
}
.form button,
.insert,
.save ,
.--button {
    position: relative;
    font: 12px iransans_light;
    display: inline-block;
    float: left;
    border: none;
    background: #3F4CF4;
    color: #fff;
    padding: 9px;
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    text-decoration: none;
    direction: ltr;
    margin-right: 8px;
    margin-bottom: 8px;
    line-height: 24px;
}

.form button.right,
.insert.right,
.save.right ,
.--button.right{
    float: right;
}
.form button.left,
.insert.left,
.save.left ,
.--button.left{
    float: left;
}
.form button:focus,
.insert:focus,
.save:focus ,
.--button:focus,
.form button:active,
.insert:active,
.save:active ,
.--button:active{
    box-shadow: 0 0 0 4px rgba(63, 76, 244,0.3);

}
.form button.danger,
.insert.danger,
.save.danger ,
.--button.danger{
    background: #d32f2f;
}

.form button.danger:focus,
.insert.danger:focus,
.save.danger:focus ,
.--button.danger:focus,
.form button.danger:active,
.insert.danger:active,
.save.danger:active ,
.--button.danger:active{
    box-shadow: 0 0 0 4px rgba(211, 47, 47,0.3);
}
.form button.success,
.insert.success,
.save.success ,
.--button.success{
    background: #28a745;
}

.form button.success:focus,
.insert.success:focus,
.save.success:focus ,
.--button.success:focus,
.form button.success:active,
.insert.success:active,
.save.success:active ,
.--button.success:active{
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.3);
}
.form button.gray,
.insert.gray,
.save.gray ,
.--button.gray{
    background: #9e9e9e;
}
.form button.gray:focus,
.insert.gray:focus,
.save.gray:focus ,
.--button.gray:focus,
.form button.gray:active,
.insert.gray:active,
.save.gray:active ,
.--button.gray:active{
    box-shadow: 0 0 0 4px rgba(158, 158, 158,0.3);

}
.form button[dir="rtl"],
.insert[dir="rtl"],
.save[dir="rtl"] ,
.--button[dir="rtl"]{
    direction: rtl;
}
.form button.disable,
.insert.disable,
.save.disable ,
.--button.disable{
    cursor: no-drop;
}
.form button.gray,
.insert.gray,
.save.gray ,
.--button.gray{
    background: #bfc0c8;
    color: #000;
}
.form button[disabled],
.insert[disabled],
.save[disabled] ,
.--button[disabled]{
    opacity: 0.5;
    cursor: no-drop;
}
button.active.Processing:after,
button.Processing.active:after,
.Processing button.active:after{
    content: '';
    background: url("/account/package/_images/loading.svg") no-repeat center / 24px;
    background-color: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    top: 0;
    left: 0;
}
button.black.active.Processing:after,
button.black.Processing.active:after,
.Processing button.black.active:after{
    background: url("/account/package/_images/loading_b.svg") no-repeat center / 24px;
    background-color: inherit;
}

.form button:hover,
.insert:hover ,
.--button:hover ,
.save:hover {
    opacity: 0.9;
}
.insert img,
.--button img,
.save img,
.form button img,
.insert i,
.--button i,
.save i,
.form button i {
    width: 20px;
    font-size: 20px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}
.insert[dir='rtl'] img,
.--button[dir='rtl'] img,
.save[dir='rtl'] img,
.form[dir='rtl'] button img,
.insert[dir='rtl'] i,
.--button[dir='rtl'] i,
.save[dir='rtl'] i,
.form[dir='rtl'] button i{
    margin-right: 0;
    margin-left: 6px;
}
.form button.vip,
.insert.vip,
.save.vip ,
.--button.vip{
    background: goldenrod;
}
.form button.vip:hover,
.insert.vip:hover,
.save.vip:hover ,
.--button.vip:hover{
    background: #e2ad20;
}
.form button.vip:focus,
.insert.vip:focus,
.save.vip:focus ,
.--button.vip:focus{
    box-shadow: 0 0 0 4px rgba(226, 173, 32, 0.3);
}
.form button:focus {
    outline: none;
}

.form > .head button:invalid {

}

.form > .head .title span {
    color: #74788d;
    font: 12px iransans_Light;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 8px;
}

.form .item {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 6px;
    vertical-align: top;
    text-align: right;
}

.form .item > .title {
    position: relative;
    font: 12px openSans-Regular,iransans_Light, sans-serif;
    display: block;
    width: 100%;
    text-align: right;
    padding: 0;
    vertical-align: top;
    color: #000;
}
.form .item > .title img{
    display: inline-block;
    vertical-align: text-bottom;
    width: 24px;
}
.form .item > .title span{
    font: 13px iransans_Light;
    word-spacing: -1px;
}
.form .item > .title *{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    text-decoration: none;
    color: inherit;
}
small{
    font: 10px iransans_UltraLight;
    font-weight: unset;

}
.form .item > .title .delete-img{
    float: left;
    display: inline-block;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form .item > .title .delete-img label{
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
.form .item > .title .img-tooltip{
    font: 10px iransans_UltraLight;

}


.AHATreeList [data-folder="true"].show > ul:empty{
    display: none;
}
.img-tooltip{
    display: inline-block;
    position: relative;
    cursor: zoom-in;
}
.img-tooltip:before{
    content: '';
    position: absolute;
    width: 250px;
    height: 100px;
    background: var(--img) no-repeat center / contain  , url(/panel/package/images/panel/bg-img.png) repeat center / 100px;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0,0.2), inset 0 0 0 5px #dfdfdf;
    border-radius: 3px;
    margin-bottom: 12px;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    z-index: 99999999999999999;

}
.img-tooltip:after{
    content: '';
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 8px solid #dfdfdf;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0,0.2));
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-bottom: 4px;
    z-index: 2;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 99999999999999999;

}

.img-tooltip:hover:after,
.img-tooltip:hover:before{
    visibility: visible;
    opacity: 1;
}
.form .item .crop {
    display: inline-block;
    position: absolute;
    margin-right: 24px;
    right: 8px;
    top: 36px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.form .item.disable-title .crop{
    top: 18px;

}
.form .item .crop > i {
    font-size: 20px;
    cursor: pointer;
    position: relative;
    background: #fff;
    z-index: 8;

}

.form .item .crop:hover > i {
    color: #F99E1E;
}


.form .item .crop > .container {
    display: block;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.99);
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 9000000000999;
    overflow: auto;
}

.form .item .crop > .container .croppie-container {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


}

.form .item .crop > .container .croppie-container .cr-boundary{
    background: url("/panel/package/croppie/bg-crop.png") repeat center / 150px;
}
.form .item .crop > .container .croppie-container .cr-slider{
    direction: ltr;
}
.form .item .crop > .container .croppie-container .cr-slider-wrap{
    position: relative;
}
.form .item .crop > .container .croppie-container .cr-slider-wrap:after{
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 24px;
    height: 24px;
    background: url("/panel/package/croppie/pic.svg") no-repeat center / 100%;
    margin-left: 12px;
}
.form .item .crop > .container .croppie-container .cr-slider-wrap:before{
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 18px;
    height: 18px;
    background: url("/panel/package/croppie/pic.svg") no-repeat center / 100%;
    margin-right: 12px;


}
.form .item .crop.disable > .container {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.form .item .crop.enable > .container {
    visibility: visible;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.form .item .crop .close-btn {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    font-size: 32px;
}

.form .item.list{
    counter-reset: list-counter;
}
.form .item .input {
    position: relative;
    display: block;
    width: 100%;
    vertical-align: top;
    padding: 8px 0 14px;
}
.form .item.list .input{
    counter-increment: list-counter;
    padding-right: 48px;
}
.form .item.list .input:before{
    content: counter(list-counter);
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    height: 39px;
    width: 39px;
    text-align: center;
    color: #000000;
    font: 12px openSans-Light, iransans_Light;
    line-height: 40px;
    background: #f1f1f1;
    border-radius: 4px;
}
.form .item.list .input.temp{
    /*display: none;*/
}
.form .item.list .input:hover .del-item{
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    height: 39px;
    width: 39px;
    text-align: center;
    color: #fff;
    font: 12px openSans-Light, iransans_Light;
    line-height: 40px;
    background: #f1f1f1 url(/panel/package/icon/cross.svg) no-repeat center center / 18px;
    border-radius: 4px;
    cursor: pointer;
}
.form .item.list .input:nth-child(2):last-child .del-item{
    display: none;
}
.form .item .input {
    position: relative;
    display: block;
    width: 100%;
    vertical-align: top;
    padding: 8px 0 14px;
    font-size: 0;

}
.form .item .input > *{
    font: 12px iransans_Light;

}
.form .item .input > .gallery{
    display: block;
    position: relative;
    width: 100%;
    font-size: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form .item .input > .gallery .item{
    position: relative;
    display: inline-block;
    width: 23%;
    padding: 4px;
    background: #F4F4FB !important;
    border-bottom: 1px solid #e2e5ec;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
    margin: 1%;
    border-radius: 8px;
    max-width: 119px;
}
.form .item .input > .gallery .item .handle{
    opacity: 0;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    transition: opacity 250ms;
}
.form .item .input > .gallery .item:hover .handle{
    opacity: 1;

    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: url("/panel/package/icon/drag-handle.png") no-repeat center / 100%;
}
.form .item .input > .gallery .item img{
    display: block;
    width: 100%;
}
.form .item .input > .gallery .item .remove{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    bottom: 4px;
    background: #E7E7EE;
    color: #DF153E;
    border-radius: 0 100px 0 0;
}
.form .item .input > .gallery .item .remove:after{
    content: 'delete_forever';
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}

.form .item .input select,
.form .item .input textarea,
.form .item .input input {
    border: 1px solid #bfc0c8;
    padding: 10px 10px;
    width: 100%;
    display: inline-block;
    border-radius: 3px;
    background: none 0 0 / auto repeat scroll padding-box padding-box rgb(255, 255, 255);
    font: 12px iransans_Light;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
    height: 40px;
}
.form .item .input input.centerText{
    text-align: center;
}

.form .item .input input.centerText::-moz-placeholder {
    text-align: center;
}
.form .item .input input.centerText:-ms-input-placeholder {
    text-align: center;
}
.form .item .input input.centerText:-moz-placeholder {
    text-align: center;
}
.form .item .input input.centerText::-webkit-input-placeholder {
    text-align: center;
}
.form .item .input input.ltr::-moz-placeholder {
    text-align: left;
    direction: ltr;
}
.form .item .input input.ltr:-ms-input-placeholder {
    text-align: left;
    direction: ltr;
}
.form .item .input input.ltr:-moz-placeholder {
    text-align: left;
    direction: ltr;
}
.form .item .input input.ltr::-webkit-input-placeholder {
    text-align: left;
    direction: ltr;
}


.form .item .input textarea{
    height: auto;
    min-height: 40px;
}
.form .item .input .captcha{

    position: absolute;
    top: 16px;
    left: 8px;
    border-radius: 4px;
    cursor: pointer;
}
.form .item .input .captcha + input{
    padding-left: 85px;
}
.form .item .input select option{
    color: #000;
}
.form .item .input .label{
    position: relative;
    width: 100%;
    display: inline-block;
    background: transparent;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
}
.form .item .input .label .search-loader{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1px);
    cursor: wait;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.form .item .input .label .search-loader.active{
    visibility: visible;
    opacity: 1;
}
.form .item .input .label .search-loader img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    max-width: 100%;
}
.form .item .input input[type='color']{
    padding: 0;
    height: 39px;
}

.form .item .input input.tagify{
    display: none;
}
.form .item .input > .tagify{
    border: 1px solid #bfc0c8;
    padding: 2px 8px;
    width: 100%;
    border-radius: 3px;
    background: none 0 0 / auto repeat scroll padding-box padding-box rgb(255, 255, 255);
    background: transparent;
    font: 12px openSans-Light, iransans_Light;
    max-width: 100%;
    min-width: 100%;
}
.form .item .input > .tagify.tagify--focus{
    outline: none;
    border-color: #9aabff;
}
.form .item .input > .tagify .tagify__tag{
    max-width: 100%;
}

.form .item .input > .tagify .tagify__tag > div{
    overflow: hidden;
    width: 100%;
    position: relative;
    display: inline-block;
    padding: .3em 1.7em 0.4em .5em;
}
.form .item .input > .tagify .tagify__input{
    min-width: 160px;
}
.form .item .input > .tagify .tagify__tag > div:before{
    box-shadow: 0 0 0 500em #e5e5e5 inset;
    box-shadow: 0 0 0 500em var(--tag-bg) inset;
}
.form .item .input > .tagify .tagify__tag__removeBtn:hover + div:before {
    box-shadow: 0 0 0 500em rgba(211,148,148,.3) inset!important;
    transition: .2s;
}
.form .item .input > .tagify .tagify__tag > div > * {
    text-overflow: ellipsis;
    overflow: unset;
    display: block;
}
.form .item .input > .tagify .tagify__tag__removeBtn{
    font: 14px/14px openSans-Light;
}
.tagify__dropdown {
    position: absolute;
    z-index: 999;
    background: #fff;
    max-height: 300px;
    overflow: auto;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    border-radius: 3px;
}
.tagify__dropdown  .tagify__dropdown__item--active {
    background: #f8f8f8;
}



.form .item .input textarea{
}

.form .item .input select[disabled],
.form .item .input textarea[disabled],
.form .item .input input[disabled],
.form .item .input select:disabled,
.form .item .input textarea:disabled,
.form .item .input input:disabled{
    background: #f8f8f8;
    cursor: no-drop;
    border: 1px solid #e7e7e7;

}

.form .item .input input[type="file"] {
    padding: 8.4px;
}

.form .item .input select:focus,
.form .item .input textarea:focus,
.form .item .input input:focus {
    outline: none;
    border-color: #9aabff;
}

.form .item .input select ~ .feedback,
.form .item .input textarea ~ .feedback,
.form .item .input input ~ .feedback {
    /*display: none;*/
    font-size: 0;
}

.form .item .input select ~ .feedback .isset,
.form .item .input textarea ~ .feedback .isset,
.form .item .input input ~ .feedback .isset {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 3px;
    font: 10px iransans_Light;
}

.form .item .input select.isset_valid ~ .feedback .isset.success,
.form .item .input textarea.isset_valid ~ .feedback .isset.success,
.form .item .input input.isset_valid ~ .feedback .isset.success {
    color: #53c68c;
    display: inline-block;
}

.form .item .input select.isset_invalid ~ .feedback .isset.danger,
.form .item .input textarea.isset_invalid ~ .feedback .isset.danger,
.form .item .input input.isset_invalid ~ .feedback .isset.danger {
    color: #fd397a;
    display: inline-block;
}

.form .item .input select ~ .feedback .isset.warning,
.form .item .input textarea ~ .feedback .isset.warning,
.form .item .input input ~ .feedback .isset.warning {
    color: #F9B47E;
    display: inline-block;
}

.form .item .input select ~ .alert,
.form .item .input textarea ~ .alert,
.form .item .input input ~ .alert {
    display: block;
    color: #74788d !important;
    padding: 3px;
    position: relative;
    display: block;
    width: 100%;
    font: 11px iransans_Light;
}
.form .item .input select ~ .alert.invalid,
.form .item .input textarea ~ .alert.invalid,
.form .item .input input ~ .alert.invalid {
    color: #fd397a !important;
}



.form .item ._tags {
    display: block;
    color: #74788d !important;
    position: relative;
    display: block;
    font-size: 0;
    width: 100%;
}
.form .item ._tags ._tag{
    display: inline-block;
    font: 12px iransans_Light;
    margin: 0 0 8px 8px;
    padding: 4px 12px;
    background: #E5E5E5;
    border-radius: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.form .item .input > input.invalid + .tagify,
.form .item .input select.invalid,
.form .item .input textarea.invalid,
.form .item .input input.invalid {
    border-color: #fd397a;
    background: #fff url(/account/package/icon/input/error.svg) no-repeat 7px center/ 20px;
    padding-left: 32px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}




.form .item .input .cke.invalid{
    box-shadow: 0 0 0 1px #fd397a;
}
.form .item .input select.isset_invalid,
.form .item .input textarea.isset_invalid,
.form .item .input input.isset_invalid {
    border-color: #fd397a;
    background: #fff url(/account/package/icon/input/disable.svg) no-repeat 7px center/ 20px;
    padding-left: 32px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.form .item .input select.isset_valid,
.form .item .input textarea.isset_valid,
.form .item .input input.isset_valid {
    border-color: #0ABB87;
    background: #fff url(/account/package/icon/input/ok.svg) no-repeat 7px center/ 20px;
    padding-left: 32px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}
.form .item .input textarea.isset_valid,
.form .item .input textarea.isset_invalid,
.form .item .input textarea.invalid,
.form .item .input textarea:focus.full:invalid,
.form .item .input textarea:not(:focus).full:invalid{
    background-position: 7px 7px;
}



.form .item .input select:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.form .item .input select:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid ,
.form .item .input textarea:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.form .item .input textarea:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid ,
.form .item .input input ~ .tagify.valid,
.form .item .input input:not(.loading):not(.isset_valid):not(.isset_invalid):focus.full:valid,
.form .item .input input:not(.loading):not(.isset_valid):not(.isset_invalid):not(:focus).full:valid {
    border-color: #e2e5ec;
    background: none;
    padding-left: 10px;
}

.form .item .input select.loading,
.form .item .input textarea.loading,
.form .item .input input.loading {
    border-color: #e2e5ec;
    background: #fff url(/account/package/icon/input/loading.gif) no-repeat 7px center/ 20px;
    padding-left: 32px;
    box-shadow: none;
}

.form .item .input select.invalid ~ .feedback,
.form .item .input select:focus.full:invalid ~ .feedback,
.form .item .input select:not(:focus).full:invalid ~ .feedback,
.form .item .input textarea.invalid ~ .feedback,
.form .item .input textarea:focus.full:invalid ~ .feedback,
.form .item .input textarea:not(:focus).full:invalid ~ .feedback,
.form .item .input input.isset_invalid ~ .feedback,
.form .item .input input.invalid ~ .feedback,
.form .item .input input:focus.full:invalid ~ .feedback,
.form .item .input input:not(:focus).full:invalid ~ .feedback {
    color: #fd397a;
    padding: 3px;
    display: block;
    width: 100%;
    font-size: 10px;
}

.form .item .input select:focus.full:valid ~ .feedback,
.form .item .input select:not(:focus).full:valid ~ .feedback,
.form .item .input textarea:focus.full:valid ~ .feedback,
.form .item .input textarea:not(:focus).full:valid ~ .feedback,
.form .item .input input ~ .tagify.valid ~ .feedback,
.form .item .input input:focus.full:valid ~ .feedback,
.form .item .input input:not(:focus).full:valid ~ .feedback {
    /*display: none;*/
    font-size: 0;
}

.form .item .input select option{
    padding: 6px ;
}
.form .item .input select::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
    position: relative;
    top: -2px;
}

.form .item .input select::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}

.form .item .input select:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}

.form .item .input select:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}
.form .item .input input::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}

.form .item .input input:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}

.form .item .input input:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}
.form .item .input input::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}
.form .item .input textarea::-webkit-input-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
    position: relative;
    top: -2px;
}
.form .item .input textarea::-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}
.form .item .input textarea:-ms-input-placeholder {
    color: #aeaeae;
    direction: rtl;
    text-align: right !important;
    font: 11px iransans_UltraLight;
}
.form .item .input textarea:-moz-placeholder {
    color: #aeaeae;
    direction: rtl !important;
    text-align: right;
    font: 11px iransans_UltraLight;
}
.form .item .input input::-webkit-textfield-decoration-container {
}
.form .item .input input[type="number"]{
    direction: rtl;
}

.form .item .input input[type="number"][dir='ltr']{
    direction: ltr;
}


.form .item .input input::-webkit-inner-spin-button{
    margin-right: 8px;
}


.middle{
    display: block !important;
    display: -o-flex !important;
    display: -ms-flex !important;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: flex !important;
    width: 100% !important;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.middle .item{
    margin: auto !important;
}
.middle .item .title,
.middle .item .input{
    margin: auto !important;
}





.table_container {
    position: relative;
    display: block;
    width: 100%;
    overflow: auto;
}
.table {
    position: relative;
    display: table;
    width: 100%;
    border-spacing: 0 10px;
    border-collapse: collapse;
    border-spacing: 0;
    counter-reset: table-counter;
    z-index: 9;
    table-layout: auto;
}
.table .row {
    display: table-row;
    background: #fff;
}
@-webkit-keyframes fadeOut-deleted {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut-deleted {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;

    }
}

.table .row.deleted{
    /*-webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOut-deleted;
    animation-name: fadeOut-deleted;*/
    background: #FFEBEE !important;
    box-shadow: 4px 0 0 0 #E53935 !important;
    cursor: no-drop;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table .row.deleted td:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;

}
.table .row.deleted .item.checkbox:after{
    content: 'delete';
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #C62828;
    height: auto;
    width: auto;
    top: auto;
    left: auto;
    position: relative;
}
.table .row.deleted .item.checkbox *{
    display: none;
}


.table .row.head {
    background: #ecf0f6  !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.table .row.selected:not(.head){
    background: #F7F8FA;
}
.table .row.selected:not(.head) td:first-child{
    box-shadow: 4px 0 0 0 #D4D8DD;
}

.table .row:nth-of-type(even) {
    /*background: #FAFAFC;*/
}
.table .row.active:not(.head),
.table .row:not(.head):hover {
    background: #F7F8FA;
}
.table .row.isparent{
    background: #f1f1f1;
}
.table.dragged .row:hover {
    background: transparent;
}

.table .row:not(.head){
    counter-increment: table-counter;
    box-shadow: 0 1px 0 0 #f0f3ff inset;
}
.table .row:not(.head):last-child{
    box-shadow: none;
}
.table .dragged .row{
    outline: 2px dashed #cdcdcd;
    outline-offset: -4px;
    background: #F7F8FA !important;
}



.sortable-fallback{
    opacity: 0 !important;
}


.table .modal{
    display: table-row;
    border-bottom: 1px solid #f0f3ff;
}
.table .deleted + .modal{
    display: none;
}
.table .modal:nth-child(4n + 2) + .row{
    /*background: #FAFAFC;*/
}
.table .modal:nth-child(4n + 2) + .row + .modal{
    /*box-shadow: inset 0 0 0 11px #FAFAFC, inset 0 0 40px #ddd;*/
    /*background: #FAFAFC;*/
}

.table .modal > .container{
    display: none;
    vertical-align: middle;
    font: 12px openSans-Light,iransans_Light;
    float: none;

}
.table .row + .modal > .container.active{
    display: table-cell;
}

.table .modal ._container{
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 32px ;
    background: #e6eaf0;
    COLOR: #000;
}
.table .modal ._container > .title{
    position: relative;
    display: block;
    font: 16px iransans_Medium;
    margin-bottom: 4px;
}
.table .modal ._container > .title:after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #485971;
    border-radius: 100%;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: 8px;
    z-index: 2;
}
.table .modal ._container > .title:before{
    content: '';
    position: absolute;
    width: 24px;
    height: 20px;
    background: #E6EAF0;
    top: 0;
    left: 100%;
    z-index: 1;
}
.table .modal ._container > .description{
    position: relative;
    display: block;
    font: 12px iransans_Light;
    margin-bottom: 24px;
}






.table .row.head{
    border-radius: 12px 12px 0 0;
}
.table .row.head .item:first-of-type {
    border-top-right-radius: 12px;
    box-shadow: 1px 0 0 0 #DDE1E7;
}
.table .row.head .item:last-of-type {
    border-top-left-radius: 12px;
}

.table .row .item {
    display: table-cell;
    padding: 12px;
    vertical-align: middle;
    font: 12px iransans_Light,openSans-Light;
    float: none;
    position: relative;
}
.table .row .item.inline{
    white-space: nowrap;
}
.table .row .item .times{
    display: block;
    position: relative;
    text-align: right;
}
.table .row .item .times div{
    display: block;
    font: 12px iransans_Light;
}
.table .row .item .times div div:first-child{
    display: inline-block;
    color: #3b3b3b;
    min-width: 50px;
}
.table .row .item .times div div:last-child{
    display: inline-block;
    direction: ltr;
    min-width: 100px;
    text-align: left;
}
.table .row .item .sub{
    display: block;
}
.table .row .item a{

    color: #000;
    text-decoration: none;


}
.table .row .item .link{
    display: inline-block;
    background: #ddd;
    border-radius: 4px;
    padding-right: 6px;
    font: 12px OpenSans-Light;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.table .row .item .link:before{
    content: 'insert_link';
    display: inline-block;
    font-family: 'Material Icons', serif;
    vertical-align: middle;
    font-size: 20px;
    height: 24px;
    background: #ccc;
    padding: 0 4px;
    line-height: 24px;
    border-radius: 4px 0 0 4px;
    margin-right: 4px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.table .row .item.center{
    text-align: center;
}
.table .row .item.inline{
    white-space: nowrap;
}
.table .row .item.left{
    text-align: left;
    float: none;
}
.table .row .item.right{
    text-align: right;
}
.table .row .item .icon{
    display: inline-block;
    position: relative;
    width: 28px;
    height: 28px;
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;
    vertical-align: middle;
    color: #5D78FF;
    line-height: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table .row .item .icon:hover{
    background: #cfd8ff;
}
.table .row .item .icon:hover{
}
.table .row .item .icon img{
    width: 100%;
}
.table .row .item.id {
    width: 1px;
    text-align: center;
    font: 12px openSans-Light, iransans_Light;
}
.table .row .item.num {
    width: 1px;
    text-align: center;
    font: 12px openSans-Light, iransans_Light;
}
.table .row:not(.head) .item.checkbox label{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    background: #D7DCDE;
    border-radius: 4px;
}
.table .row:not(.head) .item.checkbox label:before{
    content: counter(table-counter);
    display: block;
    color: #a0a0a0;
    font: 12px openSans-Light, iransans_Light;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.table .row:not(.head) .item.checkbox input:checked + label:before{
    display: none;
}
.table .row .item.checkbox {
    width: 1px;
    text-align: center;
    font: 12px openSans-Light, iransans_Light;
}
.table .row .item .user{
    position: relative;
    display: block;
    font-size: 0;

}
.table .row .item .user .img{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    vertical-align: top;
    z-index: 2;
}
.table .row .item .user .img .id{
    background: #F8CA08;
    font: 9px openSans-Bold;
    min-width: 18px;
    height: 18px;
    color: #000;
    position: absolute;
    top: 100%;
    left: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-100%,-100%);
    border-radius: 100%;
    text-align: center;
    line-height: 16px;
    opacity: 0.85;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.table .row .item .user .img img{
    display: block;
    width: 100%;
    padding: 3px;

}
.table .row .item .user .info{
    font: 10px iransans_Light;
    display: block;
    direction: rtl;
    padding: 0;
    list-style: none;
    margin: 0;

}
.table .row .item .user .info li{
    display: block;
    white-space: nowrap;
}
.table .row .item .user .info li span:first-child{
    color: #a4a4a4;
    min-width: 50px;
    display: inline-block;
}
.table .row .item .user .info li span:last-child{
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    margin-right: 5px;
}
.table .row .item .user .container{
    position: relative;
    display: inline-block;
    font-size: 12px;
    width: 100%;
    margin-right: -50px;
    padding-right: 60px;
    vertical-align: middle;

}
.table .row .item .user .name{
    display: block;
    font-size: 12px;
    text-align: right;
    direction: rtl;
    margin-bottom: 4px;
}
.table .row .item .user .container .username{
    display: block;
    direction: ltr;
    text-align: right;
}
.table .row .item .user .container .id{
    font: 12px openSans-Light;
    color: #a4a4a4;
}
.table .row .item .user .container .id span{
    font: 12px openSans-Regular;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    color: #000;
}
.table .row .item .img-box{
    position: relative;
    display: block;
    font-size: 0;

}
.table .row .item .img-box .img{
    position: relative;
    display: inline-block;
    width: 40px;
    overflow: hidden;
    vertical-align: middle;
    z-index: 2;
    border-radius: 3px;
    margin: 3px 3px 3px 8px;

}
.table .row .item .img-box .img img{
    display: block;

    width: 100%;


}
.table .row .item .img-box .container{
    position: relative;
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;

}
.table .row .item .img-box .container .name{
    display: block;
}
.table .row .item .img-box .container .username{
    display: block;
    direction: ltr;
    text-align: right;
}


.table .row .item .token{
    display: block;
    white-space: nowrap;
    position: relative;
    font: 12px OpenSans-Light;
    padding: 0 14px;
}
.table .row .item .token span{
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    text-align: center;
    margin: auto auto 4px auto;
    background: #ccc;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    vertical-align: middle;
}
.table .row .item .token b{
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    font: 12px OpenSans-Light;
}
.table .row .item .token b:before{
    content: 'schedule';
    display: inline-block;
    font-family: 'Material Icons', serif;
    width: 20px;
    height: 20px;
    line-height: 20px;
    vertical-align: text-bottom;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

}
.table .row .item .token.A span,
.table .row .item .token.Y span,
.table .row .item .token.N span,
.table .row .item .token.J span,
.table .row .item .token.E span,
.table .row .item .token.F span{background: #ffdbdb;color: #ff6b6b}
.table .row .item .token.G span,
.table .row .item .token.C span,
.table .row .item .token.I span,
.table .row .item .token.R span,
.table .row .item .token.K span{background: #ffdbf7;color: #ff6bd1}
.table .row .item .token.L span,
.table .row .item .token.M span,
.table .row .item .token.H span,
.table .row .item .token.O span,
.table .row .item .token.P span{background: #dbe7ff;color: #6897ff}
.table .row .item .token.D span,
.table .row .item .token.X span,
.table .row .item .token.S span,
.table .row .item .token.T span,
.table .row .item .token.U span{background: #f7ecc9;color: #fbc921}
.table .row .item .token.V span,
.table .row .item .token.W span,
.table .row .item .token.B span,
.table .row .item .token.Q span,
.table .row .item .token.Z span{background: #d4f5ea;color: #3fd2a0}







.table .row .item .priority{
    color: #fff;
    display: inline-block;
    background: #a0a0a0;
    padding: 2px 8px;
    border-radius: 5px;
    text-align: center;
    min-width: 50px;
}
.table .row .item .priority.priority_0{
    color: #fff;
    background: #5C6BC0;
}
.table .row .item .priority.priority_1{
    color: #634d00;
    background: #ffc600;
}
.table .row .item .priority.priority_2{
    color: #ffffff;
    background: darkred;
}
.table .row .item .details{
    position: relative;
    display: inline-block;
    border: 1px solid #3599cd;
    color: #3599cd;
    cursor: pointer;
    font-size: 12px;
    padding: 1px 6px ;
    border-radius: 4px;
    transition: all 150ms;

    text-decoration: none;
}







.table .row:not(.head) .item.id:before {
    content: '#';
}
.table .row:not(.head) .item.id span{
    display: block;
    white-space: nowrap;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.table tr .handle img{
    cursor: grab;
}
.table tr .handle:focus,
.table tr .handle:active{
    cursor: grabbing;
}
.table-footer{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 24px 12px;
}
.table-footer .sort{
    position: relative;
    display: inline-block;
    font: 12px iransans_Light;
}
.users{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
}
.users ._u_{
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.users ._u_item{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
    background: #ddd;
    vertical-align: middle;
    font-size: 24px;
    box-shadow: 0 0 0 3px #fff;
    margin-left: -14px;
}
.users ._u_item:last-child{
    margin-left: 0;
}
.users ._u_item img{
    display: block;
    width: 100%;
    padding: 3px;
}
.users .content{
    display: inline-block;
    vertical-align: middle;
    list-style: none;
    padding: 0;
    margin: 0 8px 0 0;
}
.users > .content li{
    display: block;
    font-size: 12px;
}
.table .row:not(.head):hover .users ._u_item{

    box-shadow: 0 0 0 3px #F7F8FA;
}



.Error{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 100%;
    padding: 0 24px;
}
.Error > .container{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1170px;
    font-size: 0;
    margin: auto;
    direction: ltr;
}
.Error > .container .image{
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}
.Error > .container .image img{
    display: block;
    width: 100%;
}
.Error > .container .content{
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    font-size: 12px;
    direction: rtl;
}
.Error > .container .content .title{
    display: block;
    font: 20px iransans_Bold;
    margin-bottom: 12px;
}
.Error > .container .content .description{
    display: block;
    font: 12px iransans_Light, sans-serif;
    margin-bottom: 13px;
}
.Error > .container .content ._description{
    display: block;
    font: 12px iransans_UltraLight;
    margin-bottom: 12px;
}
.Error > .container .buns{
    position: relative;
    display: block;
    width: 100%;
}
.Error > .container .buns .btn{
    position: relative;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    background: #0043B2;
    text-decoration: none;
    color: #fff;
    margin-left: 12px;
}

.header{
    position: relative;
    top: 0;
    display: block;
    width: 100%;
    padding: 0 24px;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.24);
    font-size: 0;
    z-index: 999;
}
.header > .container{
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    --height: 55px;
    padding: 0;
    gap: 24px;
}

.header .logo{
    position: relative;
    width: 64px;
    /*height: 100%;*/
    display: inline-block;
    vertical-align: middle;
    border-left: 1px solid #ddd;
    z-index: 2;
    padding: 4px;
}
.header .logo img{
    display: block;
    margin: auto;
    height: var(--height);
    max-width: 100%;
    object-fit: contain;
}



.header .menu{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    min-height: var(--height);

    line-height: var(--height);
    text-align: right;
    font-size: 0;
    z-index: 1;
    text-align: right;
}
.header .menu > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
}
.header .menu ul{
    position: relative;
    display: block;
    height: 100%;
    padding:0;
    margin: 0;
    list-style:none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header .menu ul li{
    position: relative;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin: 0 0;
    padding: 0 12px;
    font-size: 12px;
    font-family: iransans_Light, sans-serif;
    white-space: normal;
    z-index: 1;
}
.header .menu ul li:hover{
    z-index: 2;
}
.header .menu ul li > ul{
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    height: auto;
    line-height: 0;
    background: rgb(255, 255, 255);
    text-align: right;
    padding: 12px 0;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24));
    border-radius: 5px;
    margin-top: 12px;
    display: none;
}
.header .menu ul li > ul:before{
    content: '';
    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);*/
    position: absolute;
    bottom: 100%;
    right: 24px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 10px solid rgb(255, 255, 255);
    z-index: -1;

}
.header .menu ul li > ul:after{
    content: '';
    position: absolute;
    bottom: 100%;
    right:0;
    width: 100%;
    height: 14px;

}
.header .menu ul li:hover > ul{
    display: block;
}
.header .menu ul li > ul li{
    width: 100%;
    margin: 0;
    padding: 10px 10px;
    height: auto;
}
.header .menu ul li > ul li:focus,
.header .menu ul li > ul li:active,
.header .menu ul li > ul li:hover{
    background-color: #f6f9fc;
}

.header .menu ul li > ul li i.fas{

}
.header .menu ul li a{
    color: #5d5d5d;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
    line-height: 0;
}

.header .menu ul li:hover > a{
    color: #000;
    font-family: iransans_Bold, sans-serif;
}
.header .menu ul li a i{
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-left: 5px;
    color: #cacaca;
    vertical-align: middle;
    transition: all 150ms;

}
.header .menu ul li:hover > a i{
    color: #767676;
}
.header .menu ul li a img{
    width: 24px;
    vertical-align: middle;
    transition: all 150ms;
    margin-left: 5px;
}
.header .menu ul li a img:first-of-type{
    visibility: hidden;
    opacity:0;
    position: absolute;
}
.header .menu ul li:hover > a img:first-of-type{
    visibility: visible;
    opacity:1;
}

.header .menu ul li.active:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    right: 0;
    top: 100%;
    background: rgb(0, 67, 178);
}
.header .menu ul li.active > a{
    color: #000;
    font-weight: bold;
}
.header .menu ul li.active > a i{
    color: #000;
}
.header .menu ul li.active > a img{
    visibility: visible;
    opacity:1;
}

.header .nav {
    position: relative;
    display: inline-block;
    width: 200px;
    text-align: left;
    z-index: 2;
}
.header .nav .user{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font: 12px iransans_Light;
    cursor: pointer;
    max-width: 128px;


}
.header .nav .user > a{
    display: block;
    color: #000;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0;
    direction: ltr;
}
.header .nav .user > a > img{
    width: 32px;
    border-radius: 100%;
    height: 32px;
    box-shadow: 0 0 0 0 #dee1e0;
    background: #dee1e0;
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.header .nav .user > a > span{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-left: -32px;
    padding-left: 40px;
    font: 12px iransans_Light;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.header .nav .user > a > span i{
    display: inline-block;
    float: right;
    margin-left: 4px;
}
.header .nav .user > a > b{
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    background: #ccc;
    border-radius: 100px;
    font: 24px/32px OpenSans-Light;
    vertical-align: middle;
    direction: rtl;
}
.header .nav .user > .list{
    position: absolute;
    width: 180px;
    top: 100%;
    left: 0;
    border: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24));
    background: #fff;
    z-index: 2;
    padding: 5px 0;
    border-radius: 8px;
    display: none;
    margin-top: 14px;
    text-align: right;
    direction: rtl;
    line-height: 0;
}
.header .nav .user > .list:before{
    content: '';
    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);*/
    position: absolute;
    bottom: 100%;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 12px solid rgb(255, 255, 255);
    z-index: -1;

}
.header .nav .user.showList > .list{
    display: block;
}
.header .nav .user.showList .list:after{
    content: '';
    position: absolute;
    top: -14px;
    width: 100%;
    height: 30px;
    left: 0;
}
.header .nav .user > .list li{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.header .nav .user > .list li a{
    display: inline-block;
    width: 100%;
    padding: 5px 14px;
    font: 12px iransans_Light, sans-serif;
    color: #000;
    text-decoration: none;
}
.header .nav .user > .list li:focus,
.header .nav .user > .list li:active,
.header .nav .user > .list li:hover{
    background-color: #f6f9fc;
}

.header .nav .notification{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 20px;
    min-width: 24px;
    text-align: center;
}

.header .nav .notification > span{
    font: 12px iransans;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: 5px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background: rgba(0, 67, 178, 0.73);
    color: #fff;
    text-align: center;
    border-radius: 100%;
    font-size: 10px;
    line-height: 20px;
    margin-left: -10px;
    z-index: 1;
}
.header .nav .notification .item{
    display:  block;
    width: 100%;
    padding: 8px;
    font-size: 0;
    border-bottom: 1px solid #eeeeee;
}
.header .nav .notification .item:last-child{
    border-bottom: none;
}
.header .nav .notification li{
    margin-bottom: 0;
}
.header .nav .notification li a{
    padding: 0;
    font-size: 0;
    text-decoration: none;
    color: #000;
    display: block;
    width: 100%;
}
.header .nav .notification .item .ico{
    display: inline-block;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    background: #ddd;
    vertical-align: top;
}
.header .nav .notification .item.info .ico{
    background: #90B8F8 url("/account/package/_images/notification/info.svg") no-repeat center center / 100%;
}
.header .nav .notification .item.warning .ico{
    background: #F9B47E url("/account/package/_images/notification/warning.svg") no-repeat center center / 100%;
}
.header .nav .notification .item.ok .ico{
    background: #9FE25E url("/account/package/_images/notification/ok.svg") no-repeat center center / 100%;
}
.header .nav .notification .item.error .ico{
    background: #FC7C6E url("/account/package/_images/notification/error.svg") no-repeat center center / 100%;
}
.header .nav .notification .item .content{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -40px;
    padding-right: 54px;
    font: 11px/22px iransans_Light, sans-serif;
    vertical-align: top;
}

.header .nav .notification .item .content .title{
    display: block;
    max-height: 48px;
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}
.header .nav .notification .item .content .time{
    display: block;
    direction: ltr;
    text-align: left;
    margin-top: 8px;
    color: #848484;
}
.header .nav .notification .item .content .time:before{
    content: 'schedule';
    display: inline-block;
    font-family: 'Material Icons', serif;
    width: 20px;
    height: 20px;
    line-height: 20px;
    vertical-align: text-bottom;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;


}

.dropdown-viewport{
    position: relative;
}

.dropdown-viewport > .container{
    position: absolute;
    width: 250px;
    min-height: 100px;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24));
    background: #fff;
    z-index: 2;
    padding: 0;
    border-radius: 8px;
    display: none;
    margin-top: 14px;
    text-align: right;
    direction: rtl;
    line-height: 0;

}

.dropdown-viewport > .container:before {
    content: '';
    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);*/
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 12px solid rgb(255, 255, 255);
    z-index: -1;
}
.dropdown-viewport > .container:after{
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 40%;
    height: 32px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.dropdown-viewport[data-position='left'] > .container:after{
    left: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport[data-position='left'] > .container:before{
    left: 24px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport[data-position='left'] > .container{
    left: -24px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport[data-position='right'] > .container:after{
    left: auto;
    right: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport[data-position='right'] > .container:before{
    left: auto;
    right: 24px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport[data-position='right'] > .container{
    left: auto;
    right: -24px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.dropdown-viewport:hover > .container{
    display: block;
}
.clickable_list{
    cursor: pointer;
}
.clickable_list.dropdown-viewport:hover > .container{
    display: none;
}
.clickable_list.dropdown-viewport.showList > .container{
    display: block;
}
.dropdown-viewport > .container ul{
    margin: 0;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;

}
.dropdown-viewport > .container > .head {
    position: relative;
    background: #FAFAFA;
    display: inline-block;
    width: 100%;
    text-align: left;
    color: #0043B2;
    border-radius: 8px 8px 0 0 ;
    padding: 12px 0;
}
.dropdown-viewport > .container > .head span,
.dropdown-viewport > .container > .head a {
    display: inline-block;
    float: left;
    text-decoration: none;
    color: #000;
    font: 12px iransans_Light, sans-serif;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.dropdown-viewport > .container > .head span{
    float: right;
    font-family: iransans, serif;
    margin-right: 8px;
}
.dropdown-viewport > .container > .head a i {
    display: inline-block;
    vertical-align: middle;
}
.dropdown-viewport > .container > .head a:hover{
    font-weight: bold;
}

.header .nav .user:hover .list:after{
    content: '';
    position: absolute;
    top: -14px;
    width: 100%;
    height: 30px;
    left: 0;
}
.dropdown-viewport > .container li{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}
.dropdown-viewport > .container li a{
    display: inline-block;
    width: 100%;
    padding: 5px 14px;
    font: 12px iransans_Light, sans-serif;
    color: #000;
    text-decoration: none;
}
.dropdown-viewport > .container li:last-child{
    border-radius: 0 0 8px 8px;
}
.dropdown-viewport > .container li:focus,
.dropdown-viewport > .container li:active,
.dropdown-viewport > .container li:hover{
    background-color: #f6f9fc;
}
.block{
    position: relative;
    display: block;
    width: 100%;
    margin: 40px auto;
    text-align: center;
}
.block > .container{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    text-align: right;
    background: #fff;
    border-radius: 8px;

}
.block > .head{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1500px;
    margin: auto auto 12px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    text-align: right;
}

.block > .head .container{
    display: inline-block;
    font-size: 0;
    vertical-align: middle;

}
.block > .head  .container > .title{
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    font: 20px iransans_Bold;
    vertical-align: middle;
}
.block > .head .container .sub{
    position: relative;
    display: block;
    width: 100%;
    font: 12px iransans_Light, sans-serif;
    color: #EC8E27;
}
.block > .head > .icon{
    width: 48px;
    height: 48px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    position: relative;
    vertical-align: middle;
}
.block > .head  > .icon img{
    display: block;
    width: 100%;
}
.block > .head > .icon + .container{
    margin-right: -48px;
    padding-right: 60px;
}

.block > .head .left{
    position: relative;
    display: inline-block;
    float: left;
    line-height: 50px;
}
.block > .head .left > .item{
    display: inline-block;
    vertical-align: middle;
    font: 12px iransans_Light, sans-serif;
    text-decoration: none;
    color: #000;
    border-radius: 4px;
    padding: 6px 8px;
}

.block > .head .left > .item.Rounded{
    background: rgba(0, 0, 0, 0.1);
}
.block > .head .left > .item > img{
    width: 24px;
    display: inline-block;
    vertical-align: text-bottom;
    opacity: 0.5;
}
.block ._search{
    position: relative;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    direction: ltr;
}
.block ._search .container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    direction: rtl;

}
.block ._search .container input{
    position: relative;
    display: inline-block;
    padding: 8px 32px 8px 8px;
    width: 300px;
    vertical-align: middle;
    border: none;
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    color: #BFC0C8;
    outline: none;
}
.block ._search .container input:focus{
}
.block ._search .container input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: inherit;
}
.block ._search .container input::-moz-placeholder { /* Firefox 19+ */
    color: inherit;
}
.block ._search .container input:-ms-input-placeholder { /* IE 10+ */
    color: inherit;
}
.block ._search .container input:-moz-placeholder { /* Firefox 18- */
    color: inherit;
}
.block ._search .container *:focus{
    outline: none;
}
.block ._search .container button{
    position: absolute;
    width: 32px;
    text-align: center;
    background: transparent;
    border: none;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #BFC0C8;
    cursor: pointer;
}
.block ._search .container button img{
    display: block;
    width: 100%;

}
.block ._search .filter {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 12px;
    background: #fff;
    border-radius: 5px;
    font-size: 0;
    color: #BFC0C8;
    outline: none;
    height: 35px;
    line-height: 0;
}
.block ._search .filter *:focus{
    outline: none;
}
.block ._search .filter .item{
    text-decoration: none;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    color: inherit;
    height: 35px;
    min-width: 35px;
    line-height: 35px;
    top: 0;
    cursor: pointer;
    border-right: 1px solid #d8d8d8;
    text-align: center;
}
.block ._search .filter .item:active,
.block ._search .filter .item:focus,
.block ._search .filter .item:hover{
}
.block ._search .filter .item.material-icons-outlined,
.block ._search .filter .item.material-icons{
    padding: 5px;
    line-height: 24px;
    font-size: 18px;
}
.block ._search .filter .item:last-child{
    border-right: none;
    border-radius: 0 5px 5px 0;
}
.block ._search .filter .item:first-child{
    border-radius: 5px 0 0 5px;

}
.block ._search .filter .item > *{
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.block ._search .filter .item .ico{
    max-height: 24px;
    max-width: 20px;
    display: inline-block;
    vertical-align: middle;
}
.block ._search .filter .item label .ico{
    cursor: none;
}

.block ._search .filter .item > select{
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: none;
    font: 12px iransans_Light, sans-serif;
    color: inherit;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    height: 35px;
}
.block ._search .filter .item > select *{
    font: 12px iransans_Light, sans-serif;
}
.block ._search .filter .item > select:focus{

    font-family: iransans_Bold, sans-serif;
    color: #767676;
}

.block ._search .filter .item > select:focus *{
    font: 12px iransans_Light, sans-serif;
}
.not-found{
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 40px auto;
}
.not-found img{
    display: block;
    width: 85px;
    margin: auto;
}
.not-found .title{
    display: block;
    width: 100%;
    text-align: center;
    font: 16px iransans;
    color: #D6D6D6;
}
.notification-page{
    position: relative;
    display: block;
    width: 100%;
}
.notification-page table{
    position: relative;
    display: table;
    width: 100%;
    border-spacing: 0 14px;
    counter-reset: table-counter;
    table-layout: auto;
}
.notification-page table tr{
    counter-increment: table-counter;
    border: 2px dashed transparent;
    border-top: none;
    border-bottom: none;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.notification-page table tr td{
    display: table-cell;
    padding: 14px;
    vertical-align: middle;
    font: 12px iransans;
    float: none;
    background: #fff;
    position: relative;
    white-space: nowrap;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.notification-page table tr:hover td{

    background: #e0e6ee;
}
.notification-page table tr td:first-child{
    /*border-radius: 0 8px 8px 0;*/
    padding-left: 0;
}
.notification-page table tr td:last-child{
    /*border-radius: 8px 0 0 8px;*/
}
.notification-page table tr td:first-child:before{
    content: /*counter(table-counter)*/'';
    display: inline-block;
    vertical-align: middle;
    color: #2a2a2a;
    font: 12px openSans-Light, iransans_Light;
    position: relative;
    width: 40px;
    height: 40px;
    background: #cbcbcb;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
}

.notification-page table tr.info td:first-child:before{
    background: #90B8F8 url("/account/package/_images/notification/info.svg") no-repeat center center / 100%;
}
.notification-page table tr.warning td:first-child:before{
    background: #F9B47E url("/account/package/_images/notification/warning.svg") no-repeat center center / 100%;
}
.notification-page table tr.ok td:first-child:before{
    background: #9FE25E url("/account/package/_images/notification/ok.svg") no-repeat center center / 100%;
}
.notification-page table tr.error td:first-child:before{
    background: #FC7C6E url("/account/package/_images/notification/error.svg") no-repeat center center / 100%;
}
.notification-page table tr td.tools a{
    text-decoration: none;
    color: #fff;
    background: #61A0F8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
}
.notification-page table tr td.tools a:hover{
    opacity: 0.9;
}

.notification-page table tr td.title .description{
    display: block;
    margin-top: 8px;
    font: 12px iransans_UltraLight;
}

.notification-page table tr td.date img{
    display: inline-block;
    vertical-align: text-bottom;
    width: 24px;
    opacity: 0.6;
}

.notification-page table tr td.viewed{
    color: #c7c7c7;
}
.notification-page table tr td.viewed .Not-observed{
    color: #2d2d2d;
}
.notification-page .message{
    display: block;
    width: 100%;
    padding: 24px;
    background: #F9F9F9;
    border-radius: 8px;
    font: 12px/32px iransans_Light, sans-serif;
    white-space: pre-line;
}



.pagination{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 24px;

}
.pagination .paging{
    position: relative;
    display: block;
    width: 100%;
    list-style: none;
    margin: auto;
    background: #fff;
    padding: 8px;
    border-radius: 100px;
}
.pagination .paging li{
    display: inline-block;
    font-size: 14px;
    margin: 0 9px;
    transition: all 250ms;

}
.pagination .paging li:hover{

    font-weight: bold;

}
.pagination .paging li a{
    text-decoration: none;
    color: #000;
    min-width: 25px;
    height: 25px;
    display: block;
    line-height: 25px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.pagination .paging li:hover a,
.pagination .paging .current-page a {
    background: #0043B2;
    border-radius: 100px;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 67, 178, 0.17);
}
.pagination .paging .prev{
    font-size: 12px;
    float: left;
    margin: 0;
    display: none;
}
.pagination .paging .next{
    font-size: 12px;
    float: right;
    margin: 0;
    display: none;
}
.pagination .paging .next a,
.pagination .paging .prev a{
    line-height: 20px;
}
.pagination .paging .get_first_page,
.pagination .paging .get_last_page{
    display: none;
}
.pagination .paging li i{
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px;
    height: 10px;
    color: #a3a3a3;
    line-height: normal;
}

.Error-page {
    max-width: 520px;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    display: block;
    margin: 100px auto;
}

.Error-page .Error-404 {
    position: relative;
    height: 240px;
}

.Error-page .Error-404 h1 {
    font-family: 'OpenSans-ExtraBold', sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 252px;
    font-weight: 900;
    color: #262626;
    text-transform: uppercase;
    letter-spacing: -40px;
    margin: 0 0 0 -20px;
}

.Error-page .Error-404 h1>span {
    text-shadow: -8px 0 0 #fff;
}

.Error-page .Error-404 h3 {
    font-family: 'iransans_Medium', sans-serif;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #262626;
    margin: 0;
    letter-spacing: 0;
    padding-left: 6px;
}

.Error-page h2 {
    font-family: 'iransans_Light', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    margin-top: 0;
    margin-bottom: 25px;
}

@media only screen and (max-width: 767px) {
    .Error-page .Error-404 {
        height: 200px;
    }
    .Error-page .Error-404 h1 {
        font-size: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .Error-page .Error-404 {
        height: 162px;
    }
    .Error-page .Error-404 h1 {
        font-size: 162px;
        height: 150px;
        line-height: 162px;
    }
    .Error-page h2 {
        font-size: 16px;
    }
}
.Error-page ._BTN_ {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
    background: #0043B2;
    text-decoration: none;
    padding: 4px 8px 6px;
    border-radius: 8px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    margin-right: 8px;
}

.sk-fading-circle {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

.page{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    margin-bottom: 24px;

}
.page > .head{
    position: relative;
    width: 100%;
    min-height: 170px;
    background: #D4D8DD;
    border-bottom: 1px solid #ececec;
    display: block;
    color: #000;
}
.page > .head > .container{
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    width: 95%;
    max-width: 1500px;
    margin: auto;
    direction: ltr;
    font-size: 0;
}
.page > .head > .container ._container{
    position: relative;
    display: inline-block;
    max-width: 100%;
    direction: rtl;
    padding: 40px 0;
    margin: 0 0 40px 0;
    vertical-align: bottom;
    flex: 1 1 auto;
}
/*
.page > .head > .container ._container:nth-last-child(2):first-child ~ ._container,
.page > .head > .container ._container:nth-last-child(2):first-child{
    width: 50%;
}
.page > .head > .container ._container:nth-last-child(3):first-child ~ ._container,
.page > .head > .container ._container:nth-last-child(3):first-child{
    width: 33.33%;
}
.page > .head > .container ._container:nth-last-child(4):first-child ~ ._container,
.page > .head > .container ._container:nth-last-child(4):first-child{
    width: 25%;
}
*/

.page > .head > .container ._container .content{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    /*min-height: 100%;*/
    z-index: 1;
    direction: rtl;
    margin-left: -350px;
    padding-left: 364px;
}
.page > .head > .container ._container .title{
    display: block;
    position: relative;
    font: 20px iransans_Bold;
}

.page > .head > .container ._container .description{
    position: relative;
    display: inline-block;
    width: 100%;
    font: 12px iransans_Light, sans-serif;
}
.back{
    position: relative;
    display: inline-block;
    float: left;
    text-decoration: none;
    background: #9E9E9E;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    padding: 6px 12px 6px 24px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.back:hover{
    background: #757575;
}
.back:after {
    content: 'chevron_left';
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #ccc;
}




#GET_STEP{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    width: 350px;
    /*min-height: 100%;*/
    padding: 0;
    z-index: 2;
    direction: rtl;
    font-size: 0;
}
#GET_STEP .container{
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
}
#GET_STEP .item{
    display: inline-block;
    text-align: center;
    width: 16.66%;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}
#GET_STEP .item.deactive,
#GET_STEP .item.disable{
    cursor: no-drop;
    opacity: 0.5;
    appearance: none;
}

#GET_STEP .item .img{
    position: relative;
    display: block;
    margin: auto auto 4px;
    width: 100%;
    height: 24px;
}
#GET_STEP .item .img:after{
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #b3b3b3;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 0;
}
#GET_STEP .item.active .img:after{
    border-bottom: 1px solid #0043B2;
}
#GET_STEP .item:last-of-type .img:after,
#GET_STEP .item:first-of-type .img:after{
    content: '';
    width: 50%;
}
#GET_STEP .item:last-of-type .img:after{
    left: auto;
    right: 0;
}
#GET_STEP .item .img img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 24px;
    z-index: 1;
}

#GET_STEP .item .img img:first-of-type{
    opacity: 0;
}
#GET_STEP .item .img img:last-of-type{
    opacity: 1;
}
#GET_STEP .item:not(.disable):hover .img img:first-of-type,
#GET_STEP .item.active .img img:first-of-type{
    opacity: 1;
}
#GET_STEP .item:not(.disable):hover .img img:last-of-type,
#GET_STEP .item.active .img img:last-of-type{
    opacity: 0;
}

#GET_STEP .item .title{
    display: block;
    font: 10px iransans_Light;
}

#GET_STEP select{
    position: relative;
    display: block;
    width: 100%;
    font: 12px iransans_Light;
    background: #BDBDBD;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    -moz-appearance: none;

}
#GET_STEP select option{
    background: #fff;
    cursor: pointer;
    font: 12px iransans_Light;
}
#GET_STEP select option[disabled=''],
#GET_STEP select option[disabled],
#GET_STEP select option:disabled{
    cursor: no-drop;
    color: #000;
    background: #ddd;
}
.page > .container{
    position: relative;
    display: block;
    display: -o-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    width: 95%;
    max-width: 1500px;
    margin: auto auto;
    background: #fff;
    border-radius: 12px;
    min-height: 440px;
}
.page > .container.columns{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.page > .head + .container{
    margin-top: -60px;
}
.page > .container > .SBox{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 8px;
    display: inline-block;
    vertical-align: top;
    width: 350px;
    min-height: 100%;
    padding: 0;
    z-index: 2;
    direction: rtl;
}
@supports (-ms-ime-align:auto) {
    .page > .container > .SBox{
        position: relative;
    }
}

.page > .container > .SBox > .container{
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    height: 100%;
    max-height: 535px;
    max-height: 74vh;
    max-height: calc(100vh - 185px);
    margin: 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    padding: 14px 14px 24px;
}
.page > .container > .SBox > .container::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: #f5f7fa
}
.page > .container > .SBox > .container::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #fff
}
.page > .container > .SBox > .container::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #bec4cb
}

@supports (-ms-ime-align:auto) {
    .page > .container > .SBox > .container{
        position: relative;
        top: 0;
    }
}


.page > .container > .SBox .info-list{
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 12px;
    background: #fff;
    border-radius: 12px;
    height: 100%;
    max-height: 535px;
    max-height: 74vh;
    max-height: calc(100vh - 185px);
    padding: 0 0 24px;
}
.page > .container > .SBox .info-list > .container{
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
}
@supports (-ms-ime-align:auto) {
    .page > .container > .SBox .info-list{
        position: relative;
    }
}
.page > .container > .SBox .info-list .title{
    border-radius: 12px 12px 0 0;
    padding: 16px 12px;
    display: block;
    width: 100%;
    font: 14px iransans_Medium;
    background: #f7f7f7;
    color: #000;
}
.page > .container > .SBox .info-list ol,
.page > .container > .SBox .info-list ul{
    display: block;
    width: 100%;
    font: 12px iransans_Light;
    overflow: auto;
    height: 100%;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.page > .container > .SBox .info-list ol::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f5f7fa
}
.page > .container > .SBox .info-list ol::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #fff
}
.page > .container > .SBox .info-list ol::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #bec4cb
}
.page > .container > .SBox .info-list ol li,
.page > .container > .SBox .info-list ul li{
    width: 100%;
    margin-bottom: 12px;
    line-height: 24px;

}
.page > .container > .SBox .info-list ol b,
.page > .container > .SBox .info-list ul b{
    font-family: iransans_Bold, sans-serif;
}
.page > .container > .SBox .info-list .title .ico{
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: sub;
}
.page > .container > .BBox{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 8px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    min-height: 100%;
    /*margin-left: -350px;
    padding-left: 364px;*/
    z-index: 1;
    direction: rtl;
}
@supports (-ms-ime-align:auto) {
    .page > .container > .BBox{
        position: relative;
    }
}
.page > .container[dir='ltr'] > .BBox{
    /*margin-right: -350px;
    padding-right: 364px;*/
    margin-left: 0;
    padding-left: 0;
}
.page > .container > .SBox + .BBox{
    margin-right: -350px;
    padding-right: 314px;
    margin-left: 0;
    padding-left: 0;
}
.page > .container[dir='ltr'] > .SBox + .BBox{
    margin-right: 0;
    padding-right: 0;
    margin-left: -350px;
    padding-left: 364px;
}
.SBox .copyright{
    position: relative;
    font: 18px OpenSans-Bold;
    color: #e1e1e1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    text-align: center;
    margin-top: -18px;
    background: #fff;
    padding-top: 3px;

}
.SBox .copyright:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}
.page > .container > .BBox > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    background:#fff;
    border-radius: 12px;
    height: 100%;
    direction: rtl;
}


.page > .container .list{
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #f3f3f3;
    margin: 0 0 14px;
}
.page > .container .list li{
    display: inline-block;
    font-size: 12px;
    margin: 0;
    padding: 0;
    position: relative;

}
.page > .container .list li:first-child a{
    border-radius: 0 12px 0 0;
}
.page > .container .list li:last-child a{
    border-radius: 12px 0 0 0;
}
.page > .container .list li a{
    text-decoration: none;
    color: #000;
    padding: 19px 14px;
    position: relative;
    display: block;
}
.page > .container .list li.active a{
    font-family: iransans_Bold, sans-serif;
    color: #0043B2;
    background: rgba(0,0,0,0.014);
}
.page > .container .list li.active a:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 2px solid #0043B2;
    bottom: -1px;
    left: 0;

}
.page > .container .list ~ .table_container .table .row.head{
    border-radius: 0;
}
.page > .container .list ~ .table_container .table .row.head .item:first-of-type {
    border-top-right-radius: 0;
}
.page > .container .list ~  .table_container .table .row.head .item:last-of-type {
    border-top-left-radius: 0;
}






.page ._search{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 0;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    direction: ltr;
}
.page ._search > *{
    margin-left: 8px;
}
.page ._search .--button{
    padding: 7px 12px;
}
.page ._search .--button.ico{
    padding: 1px;
    width: 39px;
    height: 39px;
}
.page ._search .--button.ico img{
    width: 28px;
    display: block;
    margin:  auto;
}
.page ._search > *:first-child{
    margin-left: 0;
}
.page ._search .container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    direction: rtl;

}
.page ._search .container input{
    position: relative;
    display: inline-block;
    padding: 10px 32px 10px 10px;
    width: 300px;
    vertical-align: middle;
    border: none;
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    color: #5e5f66;
    outline: none;
}
.page ._search .container input:focus{
}
.page ._search .container input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: inherit;
}
.page ._search .container input::-moz-placeholder { /* Firefox 19+ */
    color: inherit;
}
.page ._search .container input:-ms-input-placeholder { /* IE 10+ */
    color: inherit;
}
.page ._search .container input:-moz-placeholder { /* Firefox 18- */
    color: inherit;
}
.page ._search .container *:focus{
    outline: none;
}
.page ._search .container button{
    position: absolute;
    width: 32px;
    text-align: center;
    background: #fff;
    border: none;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}
.page ._search .container button img{
    display: block;
    width: 100%;

}
.page ._search .filter {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 12px;
    background: #fff;
    border-radius: 5px;
    font-size: 0;
    color: #5e5f66;
    outline: none;
    height: 39.2px;
    line-height: 0;
}
.page ._search .filter *:focus{
    outline: none;
}
.page ._search .filter .item{
    text-decoration: none;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    color: inherit;
    height: 39.2px;
    min-width: 35px;
    line-height: 39.2px;
    top: 0;
    cursor: pointer;
    border-right: 1px solid #D4D8DD;
    text-align: center;
    direction: rtl;
}
.page ._search .filter .item:active,
.page ._search .filter .item:focus,
.page ._search .filter .item:hover{
}
.page ._search .filter .item.material-icons-outlined,
.page ._search .filter .item.material-icons{
    padding: 5px;
    line-height: 24px;
    font-size: 18px;
}
.page ._search .filter .item:last-child{
    border-right: none;
    border-radius: 0 5px 5px 0;
}
.page ._search .filter .item:first-child{
    border-radius: 5px 0 0 5px;

}
.page ._search .filter .item > *{
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.page ._search .filter .item .ico{
    max-height: 24px;
    max-width: 20px;
    display: inline-block;
    vertical-align: middle;
}
.page ._search .filter .item label .ico{
    cursor: none;
}

.page ._search .filter .item > select{
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: none;
    font: 12px iransans_Light, sans-serif;
    color: inherit;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    height: 35px;
    -moz-appearance: none;
}
.page ._search .filter .item > select *{
    font: 12px iransans_Light, sans-serif;
}
.page ._search .filter .item > select:focus{

    font-family: iransans_Bold, sans-serif;
    color: #767676;
}

.page ._search .filter .item > select:focus *{
    font: 12px iransans_Light, sans-serif;
}
























.page.setting-page > .container{
    background: transparent;
}

.setting-page > .container .info{
    width: 300px;
    height: 100%;
    display: inline-block;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 8px;
    background: #fff;
    border-radius: 12px;
    padding: 24px 0;
    text-align: center;
    z-index: 2;
}
@supports (-ms-ime-align:auto) {
    .setting-page > .container .info{
        position: relative;
    }
}
.setting-page > .container .info .avatar{
    position: relative;
    display: block;
    margin: auto;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
    font: 85px OpenSans-Light, sans-serif;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    background: rgba(219,219,219,1);
    background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(245,245,245,1)));
    background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#f5f5f5', GradientType=0 );

}
.setting-page > .container .info .avatar b{
    font-weight: normal;
}
.setting-page > .container .info .avatar img{
    display: block;
    width: 100%;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
}
.setting-page > .container .info .avatar.loading:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    backdrop-filter: blur(3px);
}
.setting-page > .container .info .avatar.loading .sk-fading-circle{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
    z-index: 2;
    margin: 0;

}
.setting-page > .container .info .avatar.loading .sk-fading-circle{
    display: block;
}
.setting-page > .container .info .avatar .upload-avatar{
    position: absolute;
    top: 100%;
    left: 100%;
    -webkit-transform: translate(-50%,-100%);
    -moz-transform: translate(-50%,-100%);
    -ms-transform: translate(-50%,-100%);
    -o-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
    z-index: 3;
}
.setting-page > .container .info .avatar .upload-avatar .btn{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: #4164E3 url("/account/package/_images/upload-avatar-ico.svg") no-repeat center / 50%;
    z-index: 9;
    box-shadow: 0 0 0 8px #fff;
    cursor: pointer;
}
.setting-page > .container .info .avatar .sk-fading-circle{
    display: none;
}
.setting-page > .container .info .avatar.loading .sk-fading-circle{
    display: block;
}

.setting-page > .container .info .name{
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font: 14px iransans_Medium;
    margin-top: 12px;
}
.setting-page > .container .info .username{
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font: 14px OpenSans-Light, sans-serif;
    letter-spacing: 1px;
    direction: ltr;
    margin-top: 8px;
    color: #7f7f7f;
}
.setting-page > .container .info .token{
    display: inline-block;
    position: relative;
    text-align: center;
    font: 12px iransans_UltraLight, sans-serif;
    letter-spacing: 1px;
    direction: rtl;
    margin-top: 8px;
    background: #eee;
    padding: 4px 12px;
    border-radius: 4px;
    vertical-align: middle;
}
.setting-page > .container .info .token span{
    font: 12px OpenSans-Light, sans-serif;
    display: inline-block;
    vertical-align: middle;
    direction: ltr;
}
.setting-page > .container .info ul{
    display: block;
    width: 100%;
    padding: 14px 0;
    margin: 0;
    list-style: none;
}

.setting-page > .container .info ul li{
    position: relative;
    display: block;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #ECECEC;
}

.setting-page > .container .info ul li .title{
    display: inline-block;
    width: auto;
    vertical-align: middle;
    width: 50%;
    font-size: 12px;
    text-align: right;
    font: 12px iransans_Light;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setting-page > .container .info ul li .val{
    display: inline-block;
    width: auto;
    vertical-align: middle;
    width: 50%;
    font: 12px iransans_Medium;
    text-align: left;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #7E8E9F;

}

.setting-page > .container .info .see-profile{
    position: relative;
    display: inline-block;
    padding: 8px 14px;
    margin: 8px auto;
    text-decoration: none;
    font: 12px OpenSans-Bold;
    border-radius: 4px;
    background: #fcfcfc;
    border: 1.3px dashed #e1e1e1;
    direction: ltr;
    cursor: pointer;
}
.setting-page > .container .info .see-profile input{
    background: transparent;
    border: none;
    padding: 0;
    color: #6581E9;
    cursor: pointer;

}
.setting-page > .container .info .see-profile input::-moz-selection { /* Code for Firefox */
    color: #6581E9;
    background: transparent;
    font: 12px OpenSans-ExtraBold;
}
.setting-page > .container .info .see-profile input::selection {
    color: #6581E9;
    background: transparent;
    font: 12px OpenSans-ExtraBold;
}
.setting-page > .container .info .see-profile input:focus{
    outline: none;
}
.setting-page > .container .info .see-profile:after{
    content: 'Copy';
    font: 12px OpenSans-Regular;
    color: #000;
    border-left: 1.3px dashed #e1e1e1;
    padding: 8px 0 8px 14px;
    margin-left: 14px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.setting-page > .container .info .see-profile.messageSend:after{
    color: transparent;
}
.setting-page > .container .info .see-profile:before{
    content: 'content_copy';
    position: absolute;
    right: 18px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.setting-page > .container .info .see-profile.messageSend:before{
    opacity: 1;
}
.setting-page > .container .info .copyright{
    display: block;
    font: 12px iransans_Light, sans-serif;
    color: #e1e1e1;
    text-align: center;
    margin-bottom: -8px;
    margin-top: 14px;
}

.setting-page > .container .form{
    position: relative;
    display: inline-block;
    position: -webkit-sticky;
    position: sticky;
    top: 8px;
    vertical-align: top;
    width: 100%;
    min-height: 100%;
    height: auto;
    margin-right: -300px;
    padding-right: 314px;
    z-index: 1;
}
@supports (-ms-ime-align:auto) {
    .setting-page > .container .form{
        position: relative;
    }
}
@supports (-ms-ime-align:auto) {
    .setting-page > .container .form{
        position: relative;
    }
}
.setting-page > .container .form > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    text-align: right;
    min-height: 100%;
    height: 100%;
}

.setting-page .Error-page{
    margin-bottom: 0;
}
.copy-link{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #000;
    text-decoration: none;
}
.copy-link > input{
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    border: none;
    color: transparent;
    z-index: -99999999;
    opacity: 0;

}
.copy-link > input:focus{
    outline: none;
}
._I_image{cursor: pointer}
.M_I_image{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8) url("/account/package/icon/tool/close.svg") no-repeat 99% 99% / 32px;
    backdrop-filter: blur(12px);
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 9999999;

}
.M_I_image img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.t-tag{
    display: inline-block;
    vertical-align: middle;
    min-width: 85px;
    padding: 4px 12px;
    margin-left: 8px;
    border-radius: 4px;
    background: #ccc;
    color: #444;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
a.t-tag{
    cursor: pointer;
}
.t-tag.-w{
    min-width: unset;
    padding: 4px ;

}
.t-tag img{
    height: 20px;
    width: 20px;
    display: inline-block;
    margin: 0 4px;
    vertical-align: middle;
}
.t-tag img:first-child:last-child{
    margin:0;
}
.t-tag:last-child{
    margin-left: 0;
}
.t-tag.warning{
    color: #343a40!important;
    background-color: #ffc107!important;
}
.t-tag.success{
    color: #fff !important;
    background-color: #28a745;
}
.t-tag.danger {
    color: #fff !important;
    background-color: #dc3545!important;
}
.t-tag.primary {
    color: #fff !important;
    background-color: #007bff!important;
}
[data-title]{
    position: relative;
    display: inline-block;
}
.t-tag.loading{
    background-image: url("/account/package/_images/loading.svg") ;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    background-size: 12px;
}
[data-title]:after {
    content: attr(data-title);
    font: 12px iransans_Light;
    max-width: 200px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    background: #212121;
    border-radius: 6px;
    color: #fff;
    display: none;
    left: 50%;
    margin-top: 5px;
    text-align: center;
    padding: 4px 8px 8px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
}
[data-title][data-multipletLine]:after{
    white-space: pre-line;
    width: 200px;
}
[data-title][dir='lrt']:after{
    direction: ltr;
}
[data-title]:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 14px solid #212121;
    display: none;
}
[data-title][title-position="top"]:after {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 5px;
}
[data-title][title-position="top"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}

[data-title][title-position="top-e"]:after {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 5px;
    left: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
[data-title][title-position="top-e"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}
[data-title][title-position="top-f"]:after {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 5px;
    left: auto;
    right: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
[data-title][title-position="top-f"]:before {
    bottom: 100%;
    top: auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #212121;
    border-bottom: none;
}

[data-title]:hover:before,
[data-title]:hover:after {
    display: block;
}
.chane-password{
    position: relative;
    display: block;
    width: 100%;
    padding: 24px;
}
.chane-password .bg{
    position: relative;
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 300px;
    object-fit: cover;
}
.chane-password .bg:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}
.chane-password .bg img{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}
.submit-support{
    position: relative;
    display: block;
    width: 100%;
    padding: 24px;
    font-size: 0;
}
.submit-support > .form{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.supportMessage{
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 12px;
}
.supportMessage.full{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.supportMessage.load:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.14) url("/account/package/_images/loading_b.svg") no-repeat center / 100px;
    top: 0;
    left: 0;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    z-index: 9999;
}
.supportMessage > .container{
    position: relative;
    display: inline-block;
    text-align: right;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    border-radius: 8px;
}
@media only screen and (max-width: 968px) {
    .supportMessage > .container{
        position: fixed;
        box-shadow: none;
        border-radius: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}
.supportMessage .info{
    position: relative;
    display: inline-block;
    float: right;
    width: 350px;
    height: 100%;
    border-left: 1px solid #F8F8FB;
    z-index: 2;

}
@media only screen and (max-width: 968px) {
    .supportMessage .info{
        display: none;
    }
}
.supportMessage .info .head{
    background: #F9F9FA;
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 24px 24px 0 ;
    text-align: center;
    border-radius: 0 8px 0 0;
}

.supportMessage .info .head .icon{
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 14px;
    font: 22px openSans-Bold;
    line-height: 60px;
    margin-bottom: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;

    background: rgba(219,219,219,1);
    background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(245,245,245,1)));
    background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#f5f5f5', GradientType=0 );
}

.supportMessage .info .head .icon img{
    width: 100%;
    height:100%;
    display: block;

}
.supportMessage .info .head .icon.A,
.supportMessage .info .head .icon.Y,
.supportMessage .info .head .icon.N,
.supportMessage .info .head .icon.J,
.supportMessage .info .head .icon.E,
.supportMessage .info .head .icon.F{background: #ffdbdb;color: #ff6b6b}
.supportMessage .info .head .icon.G,
.supportMessage .info .head .icon.C,
.supportMessage .info .head .icon.I,
.supportMessage .info .head .icon.R,
.supportMessage .info .head .icon.K{background: #ffdbf7;color: #ff6bd1}
.supportMessage .info .head .icon.L,
.supportMessage .info .head .icon.M,
.supportMessage .info .head .icon.H,
.supportMessage .info .head .icon.O,
.supportMessage .info .head .icon.P{background: #dbe7ff;color: #6897ff}
.supportMessage .info .head .icon.D,
.supportMessage .info .head .icon.X,
.supportMessage .info .head .icon.S,
.supportMessage .info .head .icon.T,
.supportMessage .info .head .icon.U{background: #f7ecc9;color: #fbc921}
.supportMessage .info .head .icon.V,
.supportMessage .info .head .icon.W,
.supportMessage .info .head .icon.B,
.supportMessage .info .head .icon.Q,
.supportMessage .info .head .icon.Z{background: #d4f5ea;color: #3fd2a0}

.supportMessage .info .head .title{
    font: 14px iransans_Bold;
    margin-bottom: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 90%;
    overflow: hidden;
}
.supportMessage .info .head .token{
    font:12px OpenSans-Light;
    letter-spacing: 3px;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.supportMessage .info .head .tabs{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: right;
}
.supportMessage .info .head .tabs .tab{
    display: inline-block;
    width: 50%;
    float: right;
    text-align: center;
    padding: 0 0 8px;
    cursor: pointer;
}
.supportMessage .info .head .tabs .tab.active{
    border-bottom: 2px solid #939393;
}
.supportMessage .content{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;

}
.supportMessage .content ul{
    padding:14px 24px 0 0;
    margin: 0;
    list-style:none;

}

.supportMessage .content ul:last-of-type{
    padding-bottom: 14px;
}
.supportMessage .content ul .title{
    font: 12px iransans_Bold;
    color: #D5DAE2;
    margin-bottom: 14px;
}

.supportMessage .content ul li{
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
    width: 100%;
}

.supportMessage .content ul li i{
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 20px;
    color: #CAD2DB;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
}
.supportMessage .content ul li span,
.supportMessage .content ul li a{
    color: #8E969E;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    margin-right: -30px;
    padding-right: 35px;
}
.supportMessage .content ul:first-of-type li {

    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.supportMessage .messages{
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    float: right;
    width: 100%;
    height: 100%;
    margin-right: -350px;
    padding-right: 350px;
}

@media only screen and (max-width: 968px) {
    .supportMessage .messages{
        display: block;
        width: 100%;
    }
}
.supportMessage .messages .head{
    position: relative;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f9f9fa;
    padding: 14px 14px 14px;
}
.supportMessage .messages .head .title{
    font:14px iransans_Bold;
    display: inline-block;
    width: 60%;
    float: right;
}
@media only screen and (max-width: 968px) {
    .supportMessage .messages .head .title{
        font: 12px iransans_Medium;
    }
}
.supportMessage .messages .head .time{
    font: 12px iransans_UltraLight;
    display: inline-block;
    width: 60%;
    float: right;
    margin-top: 8px;
}

.supportMessage .messages .head .time span{
    display: inline-block;
}
.supportMessage .messages .head .icon{
    display: inline-block;
    width: 40%;
    float: left;
    margin: 0;
    list-style: none;
    text-align: left;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 24px;
    direction: ltr;
}
.supportMessage .messages .head .icon li{
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}
.supportMessage .messages .head .icon li ._BTN_RT{
    text-decoration: none;
    color: #000;
    background: #C7CFD9;
    padding: 5px 10px 4px 5px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}
.supportMessage .messages .head .icon li ._BTN_RT i{
    color: #73787E;
    position: relative;
    top: -1px;

}
@media only screen and (max-width: 968px) {
    .supportMessage .messages .head .icon li:last-child{
        display: none;
    }
}
.supportMessage .messages .head .icon li i{
    color: #C7CFD9;
    cursor: pointer;
    transition: all 250ms;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}
.supportMessage .messages .head .icon li ._BTN_RT:hover i,
.supportMessage .messages .head .icon li i.active,
.supportMessage .messages .head .icon li i:hover{
    color: #8391A1;
}
.supportMessage .messages .send{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-right: -350px;
    padding-right: 350px;
    z-index: 9;
}
.supportMessage .messages .send > .container{
    position: relative;
    display: inline-block;
    text-align: right;
    width: 100%;
    padding: 8px 14px 14px;
    background: #ffffff;
    border-bottom-left-radius: 20px;
}
.supportMessage .messages .send > .container > form{
    box-shadow: inset 0 0 0 4px #f2f4f7;
    border-radius: 5px;
    border: 2px solid #f2f4f7;
    overflow: hidden;
}
.supportMessage .messages .send .text{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding-left: 14%;
    background: #F3F3F5;
}
.supportMessage .messages .send textarea{
    width: 100%;
    resize: none;
    display: block;
    border: none;
    max-height: 160px;
    min-height: 60px;
    position: relative;
    right: 0;
    background: #F3F3F5;
    color: #000;
    padding: 16px 10px 10px 10px;
    line-height: 30px;
    font: 12px iransans;
    line-height: 30px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: thin;  /* Firefox */
}


.supportMessage .messages .send textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}
.supportMessage .messages .send textarea::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px transparent;
}
.supportMessage .messages .send textarea::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: transparent;
}

.supportMessage .messages .send textarea.invalid{

    -webkit-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2
}

.supportMessage .messages .send textarea.invalid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: darkred;
}
.supportMessage .messages .send textarea.invalid::-moz-placeholder { /* Firefox 19+ */
    color: darkred;
}
.supportMessage .messages .send textarea.invalid:-ms-input-placeholder { /* IE 10+ */
    color: darkred;
}
.supportMessage .messages .send textarea.invalid:-moz-placeholder { /* Firefox 18- */
    color: darkred;
}

.supportMessage .messages .send textarea:focus{
    outline:none;
}
@-webkit-keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.supportMessage .messages .send .icon{
    position: absolute;
    left: 24px;
    bottom: 14px;
    direction: ltr;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.supportMessage .messages .send .icon button{
    border: none;
    background: #3F4CF4;
    border-radius: 5px;
    padding: 4px 10px;
    font: 12px iransans;
    color: #fff;
    transition: all 250ms;
    cursor: pointer;
    margin-bottom: 0;
}
.supportMessage .messages .send .icon button i{
    font-size: 16px;
    vertical-align: middle;
    margin-left: 7px;
}
.supportMessage .messages .send .icon button:focus{
    outline:none;
}
.supportMessage .messages .send .Processing .icon button,
.supportMessage .messages .send .icon button:hover{

}
.supportMessage .messages .send .icon input[name='file[]'].attach-input{
    display: none;
}
.supportMessage .messages .send .icon .attach-btn{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: center;
    margin-left: 0;
}
.supportMessage .messages .send .icon  .attach-btn .sk-circle{
    display: none;
}
.supportMessage .messages .send .icon  .attach-btn i.uploading + .sk-circle{
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}
.supportMessage .messages .send .icon  .attach-btn .sk-circle .sk-child:before {
    background-color: #cdd7e2;
}

.supportMessage .messages .send .icon .attach-btn i{
    color: #fff;
    background: #3F4CF4;
    font-size: 17px;
    transition: all 250ms;
    cursor: pointer;
    position: relative;
    padding: 5px;
    border-radius: 4px;

}

.supportMessage .messages .send .icon .attach-btn[data-num]:after{
    content: attr(data-num);
    position: absolute;
    width: 100%;
    height: 15px;
    background: rgba(63, 76, 244, 0.24);
    border-radius: 2px;
    line-height: 15px;
    text-align: center;
    font-size: 10px;
    bottom: 100%;
    left: 50%;
    display: block;
    color: #000;
    padding: 0;
    margin: 0;
    top: auto;
    margin-bottom: 1px;
}
.supportMessage .messages .send .icon .attach-btn[data-title]:before{
    content: attr(data-title);
    position: absolute;
    min-width: 150px;
    direction: rtl;
    background: #3c3c3c;
    color: #fff;
    bottom: 50%;
    left: 100%;
    transform: translateX(4px) translateY(50%);
    border-radius: 3px;
    transition: all 150ms;
    opacity: 0;
    visibility: hidden;
    font-size: 12px;
    top: auto;
    height: auto;
    border: none;
}
.supportMessage .messages .send .icon .attach-btn[data-title]:hover:before{
    visibility: visible;
    opacity: 1;
}
.supportMessage .messages .send .icon .attach-btn i:hover{
    box-shadow: 0 0 0 4px rgba(63, 76, 244, 0.24);
}

.supportMessage .messages .send .icon .attach-btn i.ok{
    color: darkgreen;
}

.supportMessage .messages .send .icon .attach-btn i.failed{
    color: darkred;
}


.supportMessage .messages .content{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-top: -7px;
    padding: 0 0 160px 0;
}
.supportMessage .messages .content > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 24px 24px 0 24px;
    scroll-behavior: smooth;
}
.supportMessage .messages .content .item{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 32px;
    font-size: 0;
}
.supportMessage .messages .content .item.admin{
    text-align: left;

}
.supportMessage .messages .content .item .icon{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: inline-block;
    width: 80px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    padding-left: 14px;
    vertical-align: top;
}
@supports (-ms-ime-align:auto) {
    .supportMessage .messages .content .item .icon{
        position: relative;
    }
}
.supportMessage .messages .content .item.admin .icon {
    float: left;
    padding-left: 0;
    padding-right: 14px;
    font-size: 12px;
}
.supportMessage .messages .content .item .icon .avatar{
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 100%;
    text-align: center;
    line-height: 60px;
    display: inline-block;

    background: rgba(219,219,219,1);
    background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(245,245,245,1)));
    background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(245,245,245,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#f5f5f5', GradientType=0 );
}
.supportMessage .messages .content .item .icon .avatar img{
    width: 100%;
    height: 100%;
    display: block;

}
.supportMessage .messages .content .item .icon .avatar.A,
.supportMessage .messages .content .item .icon .avatar.Y,
.supportMessage .messages .content .item .icon .avatar.N,
.supportMessage .messages .content .item .icon .avatar.J,
.supportMessage .messages .content .item .icon .avatar.E,
.supportMessage .messages .content .item .icon .avatar.F{background: #ffdbdb;color: #ff6b6b}
.supportMessage .messages .content .item .icon .avatar.G,
.supportMessage .messages .content .item .icon .avatar.C,
.supportMessage .messages .content .item .icon .avatar.I,
.supportMessage .messages .content .item .icon .avatar.R,
.supportMessage .messages .content .item .icon .avatar.K{background: #ffdbf7;color: #ff6bd1}
.supportMessage .messages .content .item .icon .avatar.L,
.supportMessage .messages .content .item .icon .avatar.M,
.supportMessage .messages .content .item .icon .avatar.H,
.supportMessage .messages .content .item .icon .avatar.O,
.supportMessage .messages .content .item .icon .avatar.P{background: #dbe7ff;color: #6897ff}
.supportMessage .messages .content .item .icon .avatar.D,
.supportMessage .messages .content .item .icon .avatar.X,
.supportMessage .messages .content .item .icon .avatar.S,
.supportMessage .messages .content .item .icon .avatar.T,
.supportMessage .messages .content .item .icon .avatar.U{background: #f7ecc9;color: #fbc921}
.supportMessage .messages .content .item .icon .avatar.V,
.supportMessage .messages .content .item .icon .avatar.W,
.supportMessage .messages .content .item .icon .avatar.B,
.supportMessage .messages .content .item .icon .avatar.Q,
.supportMessage .messages .content .item .icon .avatar.Z{background: #d4f5ea;color: #3fd2a0}
.supportMessage .messages .content .item .icon .avatar.administrator{
    background: #0043B2;
    color: #fff;
    line-height: normal;
}
.supportMessage .messages .content .item .icon .avatar.administrator span{
    display: inline-block;
    width: 100%;
    position: relative;
    will-change: auto;

}
.supportMessage .messages .content .item .icon .avatar.administrator span:first-of-type{
    margin-top: 15px;
}
.supportMessage .messages .content .item .icon .avatar.administrator span:last-of-type{
    font-size: 8px;
    top: -5px
}
.supportMessage .messages .content .item .icon .time{
    font-size: 12px;
}
.supportMessage .messages .content .item .text{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -80px;
    padding-right: 80px;
    color: #fff;
    line-height: 30px;
    font-size: 12px;
    vertical-align: top;
    max-width: 800px;
    direction: rtl;
    text-align: justify;
}
.supportMessage .messages .content .item .text .content{
    padding: 14px;
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    overflow: auto;
    word-break: break-word;
    margin-top: 0;
    background: #2483F3;
    border-radius: 5px 0 0 0;
    white-space: pre-line;
}
.supportMessage .messages .content .item .text:before{
    content: 'done';
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #ECEFF3;
    position: absolute;
    left: 5px;
    bottom: 2px;
    z-index: 9;
}
.supportMessage .messages .content .item.viewed .text:before{
    content: 'done_all';
}
.supportMessage .messages .content .item.admin .text:before{
    color: #000;
}

.supportMessage .messages .content .item .text .content *{
    max-width: 100% !important;
    height: auto;
}
.supportMessage .messages .content .item .text .content img,
.supportMessage .messages .content .item .text .content video{
    height: auto !important;
}
.supportMessage .messages .content .item .text::selection {
    background: #fff;
    color: #000;
}
.supportMessage .messages .content .item .text::-moz-selection {
    background: #fff;
    color: #000;
}
.supportMessage .messages .content .item.admin .text{
    margin-left: 0;
    margin-right: -80px;
    color: #000;
    border-radius: 0 5px 5px 5px;
}
.supportMessage .messages .content .item.admin .text .content{

    border-radius: 0 5px 0 0;
    background: #ECEFF3;
}

.supportMessage .messages .content .item.admin .text::selection {
    background: #2483F3;
    color: #fff;
}
.supportMessage .messages .content .item.admin .text::-moz-selection {
    background: #2483F3;
    color: #fff;
}
.supportMessage .messages .content .item .text:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 24px solid #2483F3;
    border-right: 12px solid transparent;
    top: 0;
    left: 100%;
    margin-left: -80px;
}

.supportMessage .messages .content .item.admin .text:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: none;
    border-top: 24px solid #eceff3;
    border-left: 12px solid transparent;
    top: 0;
    right: 100%;
}
.supportMessage .messages .content .item .text .attach{
    padding: 5px 14px 14px;
    display: inline-block;
    width: 100%;
    border-top: 2px dashed #187aef;
    background: #2483F3;
    color: #fff;
    border-radius: 0 0 5px 5px;
}

.supportMessage .messages .content .item .text .attach ul{
    padding: 0 10px 0 0;
    text-align: left;
    display: inline-block;
    width: 100%;
    margin: 0;
    counter-reset: attach-counter;
}
.supportMessage .messages .content .item .text .attach ul li{
    margin: 0 0 6px;
    display: inline-block;
    width: 100%;
    background: rgba(0, 89, 193, 0.6);
    padding: 2px 12px 2px 35px;
    border-radius: 4px;
    transition: all 250ms;
    position: relative;
}

.supportMessage .messages .content .item .text .attach ul li:hover{

    background: rgba(0, 89, 193, 0.8);
}
.supportMessage .messages .content .item .text .attach ul li:before{
    counter-increment: attach-counter;
    content:  counter(attach-counter) "  -";
    font: 12px openSans-Light;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    direction: ltr;
    color: #fff;

}
.supportMessage .messages .content .item .text .attach ul li a{
    display: block;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font: 12px openSans-Light;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: ltr;
}

.supportMessage .messages .content .item.admin .text .attach{
    background: #eceff3;
    border-top: 2px dashed #ccc;
}
.supportMessage .messages .content .item.admin .text .attach .title{
    color: #000;
}
.supportMessage .messages .content .item.admin .text .attach ul li{
    background: rgba(205, 211, 218, 0.6);
}

.supportMessage .messages .content .item.admin .text .attach ul li:before{
    color: #7b7b7b;
}
.supportMessage .messages .content .item.admin .text .attach ul li:hover{
    background: #bac1c7;
}
.supportMessage .messages .content .item.admin .text .attach ul li a{
    color: #7b7b7b;
}
.submit-page{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 24px 12px 12px 12px;
}
.submit-page .page-title{
    position: relative;
    display: block;
    margin: 0 0 14px;

}
.submit-page .page-title .content{
    display: inline-block;
    vertical-align: text-bottom;
}
.submit-page .page-title h1{
    display: block;
    font: 16px iransans_Medium;
    margin: 0 0 4px 0;
}
.submit-page .page-title .description{
    display: block;
    font: 12px iransans_Light;
}
.submit-page .page-title .icon{
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: #0043B2;
    margin-left: 8px;
    vertical-align: text-bottom;
    padding: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.submit-page .page-title .icon img{
    display: block;
    width: 100%;
}
.upload-input{
    position: relative;
    display: block;
    width: 100%;
}
.upload-input .container{
    position: relative;
    display: block;
    width: 100%;
    /*border: 2px dashed #D4D4D4;*/
    padding:  64px;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;


}
.upload-input .container:after{
    content: "";
    position: absolute;
    border: 6px dashed #D4D4D4;


    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;

    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;

    /*background-image: linear-gradient(90deg, #D4D4D4 50%, transparent 50%), linear-gradient(90deg, #D4D4D4 50%, transparent 50%), linear-gradient(0deg, #D4D4D4 50%, transparent 50%), linear-gradient(0deg, #D4D4D4 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1s infinite linear;*/

}

@-moz-document url-prefix() {
    .upload-input .container:after {
        border: 3px dashed #D4D4D4;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}
@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top;
    }
    100% {
        background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px;
    }
}
.upload-input .container.DraggedFile,
.upload-input .container:hover{
    background: #f6fcf9;
}
.upload-input .container.DraggedFile:after,
.upload-input .container:hover:after{
    border-color: #0CC7B7;
}
.upload-input .container > .img{
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: url("/account/package/icon/upload.svg") no-repeat center / 100%;
    margin: auto auto 8px;
}
.upload-input .container > .img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-input .container .title{
    position: relative;
    display: block;
    font: 18px iransans;
    width: 50%;
    margin: auto auto 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.upload-input .container .description{
    position: relative;
    display: block;
    font: 12px iransans_UltraLight;
    width: 50%;
    margin: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.upload-input .container .preview{
    display: none;
}
.upload-input input.selected + .container .preview{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    max-width: 350px;
    overflow: hidden;
}
.upload-input input.selected + .container .preview:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(farthest-side at 0% 100%, rgba(255,255,255,0) 0%,#f6fcf9 90%,#f6fcf9 100%);
    position: absolute;
    top: 0;
    left: 0;
}
.upload-input input.selected + .container .preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.upload-input > input{
    display: none;
}
.upload-input > input.invalid + .container{
    background: #fff6f7;
}
.upload-input > input.invalid + .container:after{
    border-color: #fd397a !important;
}
.upload-input > input.invalid + .container .img{
    background: url("/account/package/icon/upload-danger.svg") no-repeat center / 100%;
}

.upload-input > input.selected + .container .img{
    background: url("/account/package/icon/selected-file.svg") no-repeat center / 100%;
}
.upload-input > input.selected + .container{
    background: #f6fcf9;
}
.upload-input > input.selected + .container:after{
    border-color: #0CC7B7 !important;
}
.upload-input > input.selected + .container .title{
    color: #0CC7B7 !important;
}
.upload-input .container > .img .loader{
    visibility: hidden;
    opacity: 0;
    margin: auto;
}
.Processing .upload-input > input.selected + .container .img{
    background: url("/account/package/_images/loading_green.svg") no-repeat center / 100% !important;
}
.AjaxUpload.Processing .upload-input .container > .img{
    background: transparent !important;
}
.AjaxUpload.Processing .upload-input .container > .img .loader{
    visibility: visible;
    opacity: 1;
}
.upload-input .container > .img .loader.ldBar.label-center > .ldBar-label{
    font: 14px OpenSans-Light,iransans_Light;
}
.Checkout .upload-input .container > .img .loader.ldBar.label-center > .ldBar-label{
    font-size: 0;
    color: transparent;
    text-shadow: none;
}
.Checkout .upload-input .container > .img .loader.ldBar.label-center > .ldBar-label:after{
    content: 'درحال پردازش';
    display: block;
    width: 100%;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
}
.upload-input .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    white-space: nowrap;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;
}

.upload-input .progress.progressing{
    opacity: 1;
}
.upload-input .progress .percent{
    display: inline-block;
    vertical-align: sub;
    width: 40px;
    height: 40px;
    background: #0CC7B7;
    border-radius: 14px;
    font: 14px/40px OpenSans-Light;
    text-align: center;
    color: #fff;
    direction: ltr;
}
.upload-input .progress .progress-md.active:after{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #0CC7B7 url("/account/package/_images/loading.svg") no-repeat center / 24px;
    border-radius: 14px;
    margin-right: 12px;

}
.upload-input .progress .speed{
    font: 12px monospace;
    direction: ltr;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    padding: 2px 6px;

}
.upload-input .progress .progress-md{
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;
}
.upload-input .progress .progress-md.active{
    visibility: visible;
    opacity: 1;
}
.upload-input .progress .progress-md.active ~ *{
    display: none;
}
.upload-input .progress .total{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font: 12px monospace;
    direction: ltr;
    padding-right: 12px;
    letter-spacing: 1px;
}

.upload-input .progress .total:after{
    content: '/';
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(50%,-50%);
    -moz-transform: translate(50%,-50%);
    -ms-transform: translate(50%,-50%);
    -o-transform: translate(50%,-50%);
    transform: translate(50%,-50%);


}
.upload-input .progress .uploaded{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font: 12px monospace;
    direction: ltr;
    letter-spacing: 1px;
}

.category-selector{
    position: relative;
    display: block;
    width: 100%;
    margin: auto;
}
.category-selector .search-category{
    display: block;
    position: relative;
    margin-bottom: 8px;

}
.category-selector .search-category input{
    display: block;
    position: relative;
    padding: 8px;
    border: 1px solid #acacac;
    border-radius: 4px;
    width: 100%;
}

.category-selector .categorise{
    display: block;
    width: 100%;
    position: relative;
    padding: 8px 0;
    font-size: 0;
}
.category-selector .categorise > ul{
    display: flex;
    position: relative;
    width: 100%;
    margin: 0;
    list-style: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: thin;  /* Firefox */
    overflow: auto;
    padding: 8px;
    white-space: nowrap;
    background: #F5F7FA;
    border-radius: 4px;
}
.category-selector .categorise ul::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f5f7fa
}
.category-selector .categorise ul::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #fff
}
.category-selector .categorise ul::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #bec4cb
}
.category-selector .categorise > ul li{
    display: inline-block;
    width: 16%;
    flex: 1 1 auto;
    margin-left: 0.8%;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.category-selector .categorise > ul li:last-of-type{
    margin-left: 0;
}
.category-selector .categorise > ul li .title{
    position: relative;
    display: block;

    padding: 8px;
    font: 12px iransans_Light;
    -webkit-transition: background 250ms;
    -moz-transition: background 250ms;
    -ms-transition: background 250ms;
    -o-transition: background 250ms;
    transition: background 250ms;
    border-radius: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
}
.category-selector .categorise > ul li .title input{
    display: none;
}
.category-selector .categorise > ul li.active > .title,
.category-selector .categorise > ul li:hover > .title{
    font-weight: bold;
    background: #D4D8DD;
}
.category-selector .categorise > ul li ul{
    position: absolute;
    width: 100%;
    top: 0;
    right: 100%;
    display: none;
}
.category-selector .categorise > ul li.active > ul{
    display: block;
}
.category-selector > .container{
    position: relative;
    display: block;
    width: 100%;
}
.category-selector > .container:empty:before{
    content: 'لطفا یکی از گروه های بالا را انتخاب کنید';
    font: 18px iransans_Bold;
    color: #e1e1e1;
    text-align: center;
    margin: 40px 0;
    width: 100%;
    display: block;

}
.category-selector > .container:empty{

}
.category-selector > .container:empty + .btn-container{
    display: none !important;
}
.category-selector > .container > ul{
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 12px;
}
.category-selector > .container > ul li{
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: top;
    border-radius: 4px;
}
.category-selector > .container > ul > li{
    margin-bottom: 12px;
}
.category-selector > .container > ul > li.alert{
    position: relative;
    display: inline-block;
    width: 200%;
    padding: 40px 0;
    margin: 0;
    font: 18px iransans_Bold;
    color: #e1e1e1;
    text-align: center;
}
.category-selector > .container > ul > li.ISParent{
    padding: 8px;
    background: #F5F7FA;
}

.category-selector > .container > ul li .title{
    display: block;
    cursor: pointer;
    background: #F5F7FA;
    border-radius: 4px;
}
.category-selector > .container > ul > li.ISParent > .title{
    padding: 0;
}
.category-selector > .container > ul > li.ISParent > .title span{
    color: #808080;
    font: 14px iransans_UltraLight;
    word-spacing: -2px;
}

.category-selector > .container > ul > li.ISParent ul{
    padding: 8px 0;
}
.category-selector > .container > ul > li.ISParent ul li{
    margin-bottom: 8px;
}
.category-selector > .container > ul > li.ISParent ul li:last-of-type{
    margin-bottom: 0;
}


.category-selector > .container > ul li .title input{
    display: none;
}
.category-selector > .container > ul li .title span{
    display: block;
    font: 12px iransans_Light;
    padding: 16px 8px;
    z-index: 9;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.category-selector > .container > ul > li.ISParent .title span{
    margin: 0 0;
    padding: 8px 8px;
}
.category-selector > .container > ul li .title input + span{
    position: relative;
    padding-right: 38px !important;
    z-index: 2;
}
.category-selector > .container > ul li.ISParent .title input + span{
    padding-right: 32px !important;
}
.category-selector > .container > ul li .title input + span:before{
    content: '';
    width: 18px;
    height: 18px;
    background: none;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: 12px;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 1.5px solid #ccc;
    z-index: 2;
}
.category-selector > .container > ul li .title input:active + span:before,
.category-selector > .container > ul li .title input:focus + span:before{
    border-color: #0043B2;
}
.category-selector > .container > ul li.ISParent .title input + span:before{
    right: 4px;
}
.category-selector > .container > ul li .title input + span:after{
    content: '';
    width: 0;
    height: 0;
    background: #F0F2F6;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    /* opacity: 0; */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    z-index: -1;
    opacity: 0;

}
.category-selector > .container > ul li .title input:checked + span:after{
    opacity: 1;
}
.category-selector > .container > ul li .title input:checked + span:before{
    animation: splash 0.6s ease forwards;
    border: 1.5px solid #0043B2;
    background-image: url("/account/package/icon/tick.svg");
    background-position: center;
    background-size: 64%;
    background-repeat: no-repeat;
}
.category-selector > .container > ul li .title input[disabled=''],
.category-selector > .container > ul li .title input[disabled],
.category-selector > .container > ul li .title input:disabled{
    cursor: not-allowed;
}
.category-selector > .container > ul li .title input[disabled=''] + span,
.category-selector > .container > ul li .title input[disabled] + span,
.category-selector > .container > ul li .title input:disabled + span{
    text-decoration: line-through;
    cursor: not-allowed;
}

.category-selector > .container > ul li .title input:disabled + span:before{
    cursor: no-drop;
}



@-moz-keyframes splash {
    40% {
        background-color: #0043B2;
        box-shadow: 0 -18px 0 -8px #0043B2, 16px -8px 0 -8px #0043B2, 16px 8px 0 -8px #0043B2, 0 18px 0 -8px #0043B2, -16px 8px 0 -8px #0043B2, -16px -8px 0 -8px #0043B2;
    }
    100% {
        background-color: #0043B2;
        box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
}
@-webkit-keyframes splash {
    40% {
        background-color: #0043B2;
        box-shadow: 0 -18px 0 -8px #0043B2, 16px -8px 0 -8px #0043B2, 16px 8px 0 -8px #0043B2, 0 18px 0 -8px #0043B2, -16px 8px 0 -8px #0043B2, -16px -8px 0 -8px #0043B2;
    }
    100% {
        background-color: #0043B2;
        box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
}
@-o-keyframes splash {
    40% {
        background-color: #0043B2;
        box-shadow: 0 -18px 0 -8px #0043B2, 16px -8px 0 -8px #0043B2, 16px 8px 0 -8px #0043B2, 0 18px 0 -8px #0043B2, -16px 8px 0 -8px #0043B2, -16px -8px 0 -8px #0043B2;
    }
    100% {
        background-color: #0043B2;
        box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
}
@keyframes splash {
    40% {
        background-color: #0043B2;
        box-shadow: 0 -18px 0 -8px #0043B2, 16px -8px 0 -8px #0043B2, 16px 8px 0 -8px #0043B2, 0 18px 0 -8px #0043B2, -16px 8px 0 -8px #0043B2, -16px -8px 0 -8px #0043B2;
    }
    100% {
        background-color: #0043B2;
        box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
}



























.G-Loader{

    position: relative;
    display: block;
    width: 100%;
    padding: 40px 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.G-Loader:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.G-Loader .logo{
    position: relative;
    display: block;
    width: 48px;
    margin: auto auto -32px;
    display: none;
}
.G-Loader.t2 .logo{
    position: absolute;
    display: block;
    width: 40px;
    margin: auto auto;
    display: none;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.G-Loader.showLogo .logo{
    display: block;
}

.G-Loader .loader{
    display: block;
    width: 100%;
    max-width: 110px;
    margin: auto auto ;
}

.submit-page .continue{
    float: right;
}
.btn-container > button,
.btn-container > .insert,
.btn-container > .save ,
.btn-container > .--button{
    margin-bottom: 0 !important;
}

.btn-container.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999999;
}
.btn-container.sticky.bottom{
    top: unset;
    bottom: 0;
}
@supports (-ms-ime-align:auto) {
    .btn-container.sticky{
        position: relative;
    }
}

.MockupList{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 0;
}
.MockupList > .container{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 0;
}
.MockupList > .container > ._item{
    position: relative;
    display: inline-block;
    width: 32.66%;
    vertical-align: top;
    margin-left: 1%;
    margin-bottom: 14px;
    padding: 0;
    cursor: pointer;
}
.MockupList > .container > ._item:nth-child(3n){
    margin-left: 0;
}
.MockupList > .container > ._item .design{
    display: none;
}
.MockupList > .container > ._item .mockup{
    display: none;
    width: 100%;
}
.MockupList > .container > ._item > .image{
    display: block;
    position: relative;
    width: 100%;
    padding-top: 75%;
    background: #C7C7C7;
    border-radius: 6px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.MockupList > .container > ._item > .image.loading:before{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
    background: url("/account/package/icon/loading.svg") no-repeat center / 100%;
    opacity: 0.5;

    z-index: 9;

}

.MockupList > .container > ._item > .image canvas,
.MockupList > .container > ._item > .image img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}
.MockupList > .container > ._item > .image canvas + img{
    /*display: none;*/
}
.MockupList > .container > ._item > .image:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.MockupList > .container > ._item > input:checked ~ .image:after{
    background: rgba(0, 67, 178,0);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 67, 178,0) 0%, rgba(0, 67, 178,0.24) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 67, 178,0)), color-stop(100%, rgba(0, 67, 178,0.24)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 67, 178,0) 0%, rgba(0, 67, 178,0.24) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 67, 178,0) 0%, rgba(0, 67, 178,0.24) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 67, 178,0) 0%, rgba(0, 67, 178,0.24) 100%);
    background: radial-gradient(ellipse at center, rgba(0, 67, 178,0) 0%, rgba(0, 67, 178,0.24) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0043B2', endColorstr='#0043B2', GradientType=1 );
}

.MockupList > .container > ._item > input{
    display: none;
}
.MockupList > .container > ._item > input ~ .checkbox{
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 2;
}
.MockupList > .container > ._item > input ~ .checkbox span{
    font: 12px iransans_Bold;
    color: #fff;
    filter: drop-shadow(0 0 1px black);
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 28px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.MockupList > .container > ._item:hover > input ~ .checkbox span{
    opacity: 1;
}
.MockupList > .container > ._item > input ~ .checkbox:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: none;
    border-radius: 100%;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -ms-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.4);
    z-index: 2;

}
.MockupList > .container > ._item > input:active ~ .checkbox:before,
.MockupList > .container > ._item > input:focus ~ .checkbox:before{
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
}
.MockupList > .container > ._item > input.invalid ~ .checkbox:before{
    background: rgba(233,30,99,0.2);
    border-color: rgba(233,30,99,0.4);
}
.MockupList > .container > ._item > input:checked ~ .checkbox:before{
    animation: splash 0.6s ease forwards;
    border: 1.5px solid #0043B2;
    background-image: url("/account/package/icon/tick.svg");
    background-position: center;
    background-size: 64%;
    background-repeat: no-repeat;
}
.crop_image{
    position: relative;
    display: block;
}
.crop_image > img{
    display: block;
    width: 100%;
}
.crop_image .croppie-container .cr-boundary{
    min-height: 450px;
    background: url("/account/package/croppie/bg-crop.png") repeat center / 150px;
}
.crop_image .croppie-container .cr-slider{
    direction: ltr;
}
.crop_image .croppie-container .cr-slider-wrap{
    position: relative;
    width: 300px;
}
.crop_image .croppie-container .cr-slider-wrap:after{
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 24px;
    height: 24px;
    background: url("/account/package/croppie/pic.svg") no-repeat center / 100%;
    margin-left: 12px;
}
.crop_image .croppie-container .cr-slider-wrap:before{
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 18px;
    height: 18px;
    background: url("/account/package/croppie/pic.svg") no-repeat center / 100%;
    margin-right: 12px;


}
.check_preview{
    position: relative;
    display: block;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: 24px auto 0;
}
.check_preview > .title{
    position: relative;
    display: block;
    width: 100%;
    font: 14px iransans_Medium;
    margin-bottom: 12px;
    text-align: right;
}
.check_preview > img{
    display: block;
    width: 100%;
    border-radius: 8px;
    margin: auto auto 14px;
    aspect-ratio: 4/3;
    -o-object-fit: contain;
    object-fit: contain;
    background: url("/package/_images/bg-tarh.jpg") repeat;

}



.check_preview .--button,
.check_preview button{
    float: none;
}
.fileList{
    position: relative;
    display: block;
    width: 100%;
    margin: 14px auto;
}
.fileList .file{
    position: relative;
    display: block;
    width: 100%;
    color: rgb(0, 0, 0);
    background: #efefef;
    padding: 14px 12px;
    direction: ltr;
    text-align: left;
    overflow: hidden;
    border-radius: 4px;
}
.fileList.right-to-left .file{
    direction: rtl;
    text-align: right;
}
.fileList .file a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    display: block;
}
.fileList .file img{
    display: inline-block;
    width: 50px;
    margin-right: 6px;
    vertical-align: middle;
}
.fileList.right-to-left .file img{
    margin-right: 0;
    margin-left: 6px;
}
.fileList.ms .file img{
    width: 32px;
}
.fileList .file .name{
    display: inline-block;
    vertical-align: middle;
    font: 12px Monospace;
    letter-spacing: 2px;
}
.fileList.ms .file .name{
    font: 13px iransans_Light;
    letter-spacing: 0;
}
.fileList .file .size{
    display: inline-block;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font: 12px arial;
    font-weight: 600;
    color: rgb(66, 66, 66);
}
.fileList.right-to-left .file .size{
    right: auto;
    left: 14px;
}
.finish-files{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 535px;
    max-height: 74vh;
    max-height: calc(100vh - 185px);
    padding: 14px;

}
.page > .container > .SBox .finish-files{
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
}


@supports (-ms-ime-align:auto) {
    .page > .container > .SBox .finish-files{
        position: relative;
        top: 0;
    }
}



.finish-files > .container{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    padding-bottom: 24px;
}

.finish-files > .container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f5f7fa
}
.finish-files > .container::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #fff
}
.finish-files > .container::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #bec4cb
}

.finish-files > .container .image{
    position: relative;
    display: block;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #f1f1f1;
}
.finish-files > .container .image img{
    display: inline-block;
    width: 100%;
}
@supports (object-fit:cover) OR (-o-object-fit:cover)  {
    .finish-files > .container .image img{
        -o-object-fit: contain;
        object-fit: contain;
        max-height: 300px;

    }
}



.finish-files > .container  .video{
    display: block;
    width: 100%;
    max-width: 600px;
    margin: auto auto 14px;
}
.finish-files > .container  .video > .container{
    background-color: #D4D8DD;
    border-radius: 12px;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.finish-files > .container  .video video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    box-shadow: none;
}
.finish-files > .container  .video video:focus{
    outline: none;
    box-shadow: none;
}
.finish-files > .container .image .img-4x3{
    position: relative;
    display: inline-block;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
}
.finish-files > .container .image .img-4x3 img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.finish-files > .container .image .img-4x3:nth-last-child(2):first-child ,
.finish-files > .container .image .img-4x3:nth-last-child(2):first-child ~ .img-4x3,
.finish-files > .container .image img:nth-last-child(2):first-child ,
.finish-files > .container .image img:nth-last-child(2):first-child ~ img{
    width: 49%;
    margin: 0 0 0 2%;
}
.finish-files > .container .image .img-4x3:nth-last-child(2):first-child ~ .img-4x3:last-child,
.finish-files > .container .image img:nth-last-child(2):first-child ~ img:last-child{
    margin-left: 0;
}

.finish-files > .container .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3{
    padding-top: 37.5%;
}
.finish-files > .container .image .img-4x3:nth-last-child(3):first-child,
.finish-files > .container .image img:nth-last-child(3):first-child {
    width: 100%;
    margin-bottom: 2%;
}
.finish-files > .container .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3,
.finish-files > .container .image img:nth-last-child(3):first-child ~ img{
    width: 49%;
    margin: 0 0 0 2%;
}
.finish-files > .container .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3:last-child,
.finish-files > .container .image img:nth-last-child(3):first-child ~ img:last-child{
    margin-left: 0;
}

.finish-files > .container .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3{
    padding-top: 25%;
}
.finish-files > .container .image .img-4x3:nth-last-child(4):first-child,
.finish-files > .container .image img:nth-last-child(4):first-child {
    width: 100%;
    margin-bottom: 2%;
}
.finish-files > .container .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3,
.finish-files > .container .image img:nth-last-child(4):first-child ~ img{
    width: 32%;
    margin: 0 0 0 2%;
}
.finish-files > .container .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3:last-child,
.finish-files > .container .image img:nth-last-child(4):first-child ~ img:last-child{
    margin-left: 0;
}






.finish-files > .container > .title{
    display: block;
    width: 100%;
    font: 16px iransans_Bold;
    margin: 14px auto;
}
.finish-files > .container .designer{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 14px;
}
.finish-files > .container .designer .title{
    position: relative;
    display: block;
    width: 100%;
    font: 12px iransans_Light;
    margin: 0 0 14px;
}
.finish-files > .container .designer .title:after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: #525252;
    right: 4px;
    top: 100%;
    margin-top: 4px;
}
.finish-files > .container .designer .title:before{
    content: '';
    position: absolute;
    width: 1px;
    height: 44px;
    border-right: 2px dashed #525252;
    right: 6px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 100%;
    margin-top: 4px;
}
.finish-files > .container .designer .img{
    position: relative;
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-right: 24px;
    border-radius: 100px;
    padding: 2px;
    vertical-align: middle;
}
.finish-files > .container .designer .img:before{
    content: '';
    position: absolute;
    width: 16px;
    height: 1px;
    border-top: 2px dashed #525252;
    top: 50%;
    left: 100%;
    margin-top: 0;
}
.finish-files > .container .designer .img img{
    display: block;
    width: 100%;
    background: #DEE1E0;
    border-radius: 100px;
}
.finish-files > .container .designer .content{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -88px;
    padding-right: 96px;
    vertical-align: middle;
}
.finish-files > .container .designer .content .username{
    display: block;
    position: relative;
    width: 100%;
    font: 12px OpenSans-Regular,iransans_Light;
}
.finish-files > .container .designer .content .name{
    display: block;
    position: relative;
    width: 100%;
    font: 12px iransans_Light;
}
.finish-files > .container .designer .content .status{
    display: block;
    position: relative;
    width: 100%;
    font: 10px iransans_Light;
}
.finish-files > .container .designer .content .status span{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 2px 14px;
    background: #c2c2c2;
    color: #000;
    border-radius: 100px;
}
.finish-files > .container .designer .content .status span.warning{
    color: #343a40!important;
    background-color: #ffc107!important;
}
.finish-files > .container .designer .content .status span.success{
    color: #fff !important;
    background-color: #28a745;
}
.finish-files > .container .designer .content .status span.danger {
    color: #fff !important;
    background-color: #dc3545!important;
}

.finish-files > .container  .tarh-status{
    display: block;
    position: relative;
    width: 100%;
    font: 12px iransans_Light;
    margin-bottom: 14px;
}
.finish-files > .container  .tarh-status span{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 2px 14px;
    background: #c2c2c2;
    color: #000;
    border-radius: 100px;
    font-size: 10px;
}
.finish-files > .container  .tarh-status span.warning{
    color: #343a40!important;
    background-color: #ffc107!important;
}
.finish-files > .container  .tarh-status span.success{
    color: #fff !important;
    background-color: #28a745;
}
.finish-files > .container  .tarh-status span.danger {
    color: #fff !important;
    background-color: #dc3545!important;
}
.finish-files > .container  .tarh-status span.info {
    color: #fff !important;
    background-color: #007bff!important;
}
.category-selected{
    display: inline-block;
    width: 100%;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-selected > li{
    display: block;
    width: 100%;
    padding: 8px;
}
.category-selected > li ul{
    display: inline-block;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #F8F8F8;
    border-radius: 4px;

}
.category-selected > li li{
    position: relative;
    display: inline-block;
    padding: 8px 14px 8px 28px;

}
.category-selected > li li:after{
    content: 'chevron_left';
    position: absolute;
    top: 50%;
    right: 100%;
    -webkit-transform: translate(50%,-50%);
    -moz-transform: translate(50%,-50%);
    -ms-transform: translate(50%,-50%);
    -o-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #ccc;
}

.category-selected > li li:last-child:after,
.category-selected > li li:first-child:after{
    display: none;
}
#LaW{
    text-align: right;
    position: relative;
    width: 100%;
    display: inline-block;
    margin-top: 4px;
}
#LaW .title{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}
#LaW .content{
    position: relative;
    width: 100%;
    display: inline-block;
    height: 200px;
    background: #f4f4f4;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;
    font-size: 11px;
    line-height: 35px;
    margin-bottom: 12px;
}

#LaW label{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

#LaW label input{
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    top: -4px;

}
#LaW label input.invalid{
    box-shadow: inset 0 0 0 2px #B71C1C;
    border-radius: 14px;
}
.T-Tarh {
    margin: 14px 0;

}
.T-Tarh tbody{
    border-bottom: 1px solid #eee;
}
.T-Tarh tbody:last-of-type{
    border-bottom: 1px solid transparent;
}
.T-Tarh .row{
    box-shadow: none !important;
}
.T-Tarh .info{
    white-space: nowrap;
}
.T-Tarh .info .image{
    position: relative;
    display: inline-block;
    width: 128px;
    vertical-align: top;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0;
}
.T-Tarh .info.small .image{
    width: 64px;
}
.T-Tarh .info.medium .image{
    width: 85px;
}
.T-Tarh .info .image > img{
    display: block;
    width: 100%;
    border-radius: 4px;
}
.T-Tarh .info .image .img-4x3{
    position: relative;
    display: inline-block;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
}
.T-Tarh .info .image .img-4x3 img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.T-Tarh .info .image .img-4x3:nth-last-child(2):first-child ,
.T-Tarh .info .image .img-4x3:nth-last-child(2):first-child ~ .img-4x3{
    width: 49%;
    margin: 0 0 0 2%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(2):first-child ~ .img-4x3:last-child{
    margin-left: 0;
}

.T-Tarh .info .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3{
    padding-top: 37.5%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(3):first-child,
.T-Tarh .info .image img:nth-last-child(3):first-child {
    width: 100%;
    margin-bottom: 2%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3{
    width: 49%;
    margin: 0 0 0 2%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(3):first-child ~ .img-4x3:last-child{
    margin-left: 0;
}

.T-Tarh .info .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3{
    padding-top: 25%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(4):first-child{
    width: 100%;
    margin-bottom: 2%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3{
    width: 32%;
    margin: 0 0 0 2%;
}
.T-Tarh .info .image .img-4x3:nth-last-child(4):first-child ~ .img-4x3:last-child{
    margin-left: 0;
}








.T-Tarh .info .image .id{
    display: block;
    width: 100%;
    font-size: 10px;
    text-align: center;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.T-Tarh .info .content{
    position: relative;
    display: inline-block;
    padding-top: 14px;
    margin-right: -128px;
    padding-right: 140px;
    vertical-align: top;
}
.T-Tarh .info.small .content{
    margin-right: -64px;
    padding-right: 72px;
    padding-top: 0;
}
.T-Tarh .info.medium .content{
    margin-right: -85px;
    padding-right: 92px;
    padding-top: 0;
}
.T-Tarh .info .content .title{
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    font: 16px iransans_Bold;
    margin-bottom: 8px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.T-Tarh .info .content .title.full{
    max-width: unset;
    overflow: unset;
}
.T-Tarh .info .content .title.full > strong{
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.T-Tarh .info.small .content .title{
    font: 12px iransans_Bold;
    margin-bottom: 4px;
}
.T-Tarh .info.medium .content .title{
    font: 12px iransans_Bold;
    margin-bottom: 4px;
}
.T-Tarh .info .content .id{
    position: relative;
    display: block;
    font: 12px iransans_Light;
    margin-bottom: 8px;
}
.T-Tarh .info .content .id span{
    display: inline-block;
    font: 12px OpenSans-Light;
    letter-spacing: 2px;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    background: #ccc;
    padding: 2px 6px 3px;
    border-radius: 3px;
}
._ID{
    display: inline-block;
    font: 12px OpenSans-Light,iransans_Bold;
    border-radius: 3px;
}
._ID span{
    letter-spacing: 2px;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    display: inline-block;
    vertical-align: middle;
}
.T-Tarh .info .content .cat{
    position: relative;
    display: block;
    font: 12px iransans_Light;
    padding: 6px 0;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.T-Tarh .info .content .cat span{
    display: inline-block;
    vertical-align: middle;

}
.T-Tarh .info.small .content .cat{
    padding: 0;
}
.T-Tarh .date{
    white-space: nowrap;
}
.T-Tarh .date .arrow{
    display: inline-block;
    vertical-align: middle;
    width: 64px;
    height: 40px;
    padding: 0 14px;
    font-size: 32px;
    color: #BDC5D0;
}
.T-Tarh .date ._date{
    display: inline-block;
    vertical-align: middle;
    padding: 24px 0;
    min-width: 85px;
}
.T-Tarh .date ._date span{
    display: block;
    text-align: center;
    width: 100%;
}
.T-Tarh .date ._date span.time{
    font: 13px iransans_Medium;
    margin-bottom: 6px;
}
.T-Tarh .date ._date span.time span{
    font: 12px iransans;
}
.T-Tarh .date ._date span.time span.danger{
    color: darkred;
}

.T-Tarh .date ._date span.title{
    font: 12px iransans_Light;
    color: #A9B2BF;
}

.T-Tarh .price ._price{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 24px 0;
}
.T-Tarh .price ._price span{
    display: block;
    text-align: right;
}
.T-Tarh .price ._price .value{
    position: relative;
    font: 13px iransans_Medium;
    margin-bottom: 6px;
    white-space: nowrap;
    padding-left: 14px;
}

.T-Tarh .price ._price .value span{
    display: inline-block;
    vertical-align: middle;
    color: #08B0FE;
    margin-right: 6px;
    font: 12px iransans_Light;
}
.T-Tarh .price ._price .value .old{
    color: #bdbdbd;
    position: relative;
}
.T-Tarh .price ._price .value .old:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-10deg);
    -moz-transform: translate(-50%,-50%) rotate(-10deg);
    -ms-transform: translate(-50%,-50%) rotate(-10deg);
    -o-transform: translate(-50%,-50%) rotate(-10deg);
    transform: translate(-50%,-50%) rotate(-10deg);
}
.T-Tarh .price ._price .value .old span{
    color: #bdbdbd;
}
.T-Tarh .price ._price .value .discount{
    position: absolute;
    top: 50%;
    right: 100%;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
    background: #e1e1e1;
    padding: 0 2px 0 6px;
    border-radius: 3px;
}

.T-Tarh .price ._price .title{
    font: 12px iransans_Light;
    color: #A9B2BF;
}

.T-Tarh .visitor ._visitor{
    display: inline-block;
    vertical-align: middle;
    padding: 24px 0;
}
.T-Tarh .visitor ._visitor span{
    display: block;
    text-align: right;
    width: 100%;
}
.T-Tarh .visitor ._visitor span.value{
    font: 13px iransans_Medium;
    margin-bottom: 6px;
    white-space: nowrap;
}
.T-Tarh .visitor ._visitor span.title{
    font: 12px iransans_Light;
    color: #A9B2BF;
}




.T-Tarh .visitor ._cost{
    position: relative;
    display: block;
    width: 100%;
    text-align: right;

}

.T-Tarh .visitor ._cost span:first-of-type{

    display: block;
    font: 14px iransans_Medium;
    color: #6c6a87;
}
.T-Tarh .visitor ._cost span:last-of-type{

    display: block;
    font: 14px iransans_Medium;
    color: #000;
}
.T-Tarh .visitor ._cost .status{
    display: block;
    text-align: right;
    color: #50c976;
    font:12px iransans_Bold;
    margin-top: 4px;
}
.T-Tarh .visitor ._cost .status.danger{
    color: #c95050;
}







.T-Tarh .status {

}
.T-Tarh .status ._status{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font: 12px/24px iransans_Medium;
    font-weight: unset;
    padding: 6px 6px;
    background: #EEEFF3 !important;
    color: #8993AA !important;
    min-width: 180px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    text-align: center;
    margin-left: 8px;
}
.T-Tarh .status ._status:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 6px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-block;
}
.T-Tarh .status ._status.success{
    background: #28A745 !important;
    color: #fff !important;
}
.T-Tarh .status ._status.success:after{
    background:  url("/account/package/icon/status/OK.svg") no-repeat center / 100%;
}
.T-Tarh .status ._status.selling.success:after{
    background:  url("/account/package/icon/status/selling.svg") no-repeat center / 100%;

}
.T-Tarh .status ._status.danger{
    background: #DC3545  !important;
    color: #fff  !important

}
.T-Tarh .status ._status.danger:after{
    /*background:  url("/account/package/icon/status/why.svg") no-repeat center / 100%;*/
}
.T-Tarh .status ._status.warning{
    background: #FFC107 !important;
    color: #fff !important;
    padding-left: 24px;
}
.T-Tarh .status ._status.warning:after{
    background:  url("/account/package/icon/status/review.svg") no-repeat center / 100%;
}
.T-Tarh .status ._status.info{
    background: #12B1FE !important;
    color: #fff !important;
    padding-left: 24px;
}
.T-Tarh .status ._status.info:after{
    background:  url("/account/package/icon/status/info.svg") no-repeat center / 100%;
}
.fruits {
    margin-bottom: 24px;
}
.fruits .multi-wrapper .non-selected-wrapper,
.fruits .multi-wrapper .selected-wrapper{
    height: 100%;
    border: none;
}
.fruits .multi-wrapper{
    height: 450px;
    padding-bottom: 40px;
    border: none;
    box-shadow: 0 0 0 1px #bfc0c8;
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
}
.fruits .multi-wrapper .search-input{
    font: 12px iransans;
}
.fruits .multi-wrapper .header {
    cursor: default;
    font-weight: normal;
    margin-bottom: 5px;
    padding: 5px 10px;
    box-shadow: none;
    background: rgba(0, 0, 0, 0);
    text-align: right;
    font: 12px iransans_Medium;
    color: rgb(138, 138, 138);
}
.fruits .multi-wrapper .item {
    position: relative;
    cursor: pointer;
    width: 100%;
    margin-right: 0;
    display: block;
    padding: 7px;
    margin-bottom: 7px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fruits .multi-wrapper .non-selected-wrapper .item.selected{
    opacity: 0.24 !important;
}
.fruits .selected-wrapper{
    counter-reset: section;
}
.fruits .selected-wrapper .item {
    position: relative;
    font-size: 0;
}
.fruits .selected-wrapper .item:after{
    counter-increment: section;
    content: counter(section);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 7px;
}
.fruits .multi-wrapper .item:hover {
    background: rgb(0, 67, 178);
    color: rgb(255, 255, 255);
    border-radius: 4px !important;
}

.fruits .multi-wrapper .item.selected:hover {
    background: #ccc;
    color: #000;
}
.fruits .multi-wrapper .item:active,
.fruits .multi-wrapper .item:focus{
    outline: none;
}
.fruits .multi-wrapper .search-input{
    border-bottom: 1px solid #bfc0c8;
}
.fruits .multi-wrapper .item > img{
    width: 64px !important;
}
.fruits .multi-wrapper .item > .content{
    display: inline-block;
    width: 100%;
    margin-right: -64px;
    padding-right: 72px;
    font-size: 12px;
    vertical-align: middle;
}
.fruits .multi-wrapper .item > .content .token{
    color: #c2c2c2;
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 0;

    font: 12px OpenSans-Bold;
    letter-spacing: 2px;
}

.fruits .multi-wrapper .item.selected:hover > .content .token{
    color: #000;
}
.fruits .multi-wrapper .item > .s{

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.fruits .multi-wrapper .item > .content .cat{
    font: 12px iransans_Light;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
._TOKEN{
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    font: 14px OpenSans-Light;
    letter-spacing: 2px;
    display: inline-block;
    vertical-align: middle;
    background: rgba(0,0,0,0.24);
    padding: 0 4px;
    border-radius: 2px;
}
.download-socialImage{
    position: relative;
    width: 100%;
}
.download-socialImage .image_container{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
}


.download-socialImage .image_container > ._item{
    position: relative;
    display: inline-block;
    width: 24.25%;
    vertical-align: top;
    margin-left: 1%;
    margin-bottom: 14px;
    padding: 0;
    cursor: pointer;
}
.download-socialImage .image_container > ._item:nth-child(4n){
    margin-left: 0;
}
.download-socialImage .image_container > ._item .design{
    display: none;
}
.download-socialImage .image_container > ._item .mockup{
    display: none;
    width: 100%;
}
.download-socialImage .image_container > ._item > .container{
    display: block;
    position: relative;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-socialImage .image_container > ._item > .container .canvas{
    display: block;
    width: 100%;
    border-radius: 6px;
    top: 0;
    left: 0;

}
.download-socialImage .image_container > ._item > .container .DL-Link{
    display: block;
    width: 100%;
    padding: 8px;
    background: #0043B2;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    margin: 6px 0;
    border-radius: 6px;
    text-align: center;
}
.download-socialImage .image_container > ._item > .container:empty{

}
.download-socialImage .image_container > ._item > .container:empty:after{
    content: '';
    position: absolute;
    background: #C7C7C7;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.download-socialImage .image_container > ._item > .container:empty:after{
    background: url("/account/package/icon/Placeholder.jpg") no-repeat center / cover;
}
.download-socialImage .image_container > ._item > .container:empty:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 500%;
    margin-right: -250%;
    z-index: 3;
    -webkit-animation: phAnimation 1.8s linear infinite;
    animation: phAnimation 1.8s linear infinite;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
}
@-webkit-keyframes phAnimation {
    0% {
        transform: translate3d(-30%, 0, 0);
    }
    100% {
        transform: translate3d(30%, 0, 0);
    }
}

@keyframes phAnimation {
    0% {
        transform: translate3d(-30%, 0, 0);
    }
    100% {
        transform: translate3d(30%, 0, 0);
    }
}

.page > .container > .SBox .card{
    position: relative;
    display: block;
    width: 100%;
    overflow: auto;
    height: 100%;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.page > .container > .SBox .card::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: #f5f7fa
}
.page > .container > .SBox .card::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 1px #fff
}
.page > .container > .SBox .card::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #bec4cb
}
.page > .container > .SBox .card .image{
    display: block;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.page > .container > .SBox .card .image:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}
.page > .container > .SBox .card .image img{
    display: block;
    width: 100%;
}
.page > .container > .SBox .card ol,
.page > .container > .SBox .card ul{
    display: block;
    width: 100%;
    font: 12px iransans_Light;
    padding-right: 28px;
}

.page > .container > .SBox .card ol li,
.page > .container > .SBox .card ul li{
    width: 100%;
    margin-bottom: 12px;
    line-height: 24px;

}
.page > .container > .SBox .card ol b,
.page > .container > .SBox .card ul b{
    font-family: iransans_Bold, sans-serif;
}
.financial-dashboard{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

.financial-dashboard .statistics{
    position: relative;
    display: block;
    width: 100%;
    background: #D4D8DD;
    font-size: 0;
    padding-bottom: 64px;
}
.financial-dashboard .statistics + .page{
    margin-top: -60px;
}
.financial-dashboard .statistics > .container{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1500px;
    margin: auto;
    padding: 48px 0;
}
.financial-dashboard .statistics > .container > .info{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40%;
}
.financial-dashboard .statistics > .container > .chart{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}
.financial-dashboard .statistics > .container > .chart #chart-container{
    width: 100%;
    height: 300px;
}
.financial-dashboard .statistics > .container > .chart #chart-container .chart-title{
    font: 14px iransans_Light;
}

.financial-dashboard .statistics > .container > .info > .head{
    display: block;
    width: 100%;
}
.financial-dashboard .statistics > .container > .info > .head .title{
    display: block;
    font: 18px iransans_Bold;
    color: #000;
}

.financial-dashboard .statistics > .container > .info > .container{
    position: relative;
    display: block;
    width: 100%;
}
.financial-dashboard .statistics > .container > .info > .container .item{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    font-size: 12px;
    padding: 24px 0;
}

.financial-dashboard .statistics > .container > .info > .container .item .value{
    display: block;
    font: 18px iransans_Bold;
    color: #0043B2;
    text-align: right;
}
.financial-dashboard .statistics > .container > .info > .container .item .value span{
    display: inline-block;
    vertical-align: middle;
    font: 12px iransans_Light;
    margin-right: 8px;
}
.financial-dashboard .statistics > .container > .info > .container .item .title{
    display: block;
    font: 12px iransans_Light;
    color: #000;
}

.highcharts-credits{
    display: none !important;
}
.tooltip-chart-money{
    min-width: 100px;
}

.calender{
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 12px;
    display: inline-block;
    width: 100%;
    margin: 0;
    background: #fff;
    border-radius: 12px;
}
@supports (-ms-ime-align:auto) {
    .calender{
        position: relative;
        top: 0;
    }
}

.calender > .container{

    padding: 0 0 14px;
}
.calender > .container > .title{
    font-size: 14px;
    margin-bottom: 0;
    padding: 14px 14px;
    background: #f7f7f7;
    border-radius: 12px 12px 0 0;
}
.calender > .container > .title img{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    margin-left: 8px;
}
.calender .calendar{
    position: relative;
    display: block;
    width: 100%;
    border: none;
    box-shadow: none;
    background: #fff;
    padding: 0 5px;
}
.calender .calendar.progressing:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    cursor: progress;
}

.calender .calendar > table{
    border: none;
    font: 12px iransans;
    width: 100%;
    background: #fff;
}

.calender .calendar thead tr{
    background: #fff;

}
.calender .calendar thead .headrow{

}
.calender .calendar thead .headrow td{
    background: #fff;
    border: none;
    box-shadow: none;
    border-top: 2px solid #f1f1f1;
    border-bottom: 2px solid #f1f1f1;
    padding-top: 8px;
    padding-bottom: 8px;
}
.calender .calendar thead .daynames{

}
.calender .calendar thead .daynames td{
    background: #fff;
    border: none;
    box-shadow: none;
    white-space: nowrap;
    padding: 14px 0 0;

}
.calender .calendar thead .daynames td:first-of-type{
    padding-right: 14px;
}
.calender .calendar thead .daynames td:last-of-type{
    padding-left: 14px;
}
.calender .calendar thead .title{
    background: #fff;
    border: none;
    box-shadow: none;
    font: 14px iransans;
}
.calender .calendar .nav div{
    background: none;
    cursor: pointer;
}
.calender .calendar thead .active{
    color: #000;
}
.calender .calendar tbody{
    border-collapse: unset;
    border-spacing: 2px;
}

.calender .calendar tbody .daysrow td{
    background: #fff ;
    visibility: visible;
}
.calender .calendar tbody .daysrow td:first-of-type{
}

.calender .calendar tbody .daysrow td:last-of-type{
}
.calender .calendar tfoot{
    display: none;
}

.calender .calendar tbody td{
    text-align: center;
    cursor: pointer;
    border: 1px dashed transparent;
    height: 40px;
    width: 40px;
    font: 14px iransans !important;
    outline: 3px solid #fff;
    outline-offset: 0;
}
.calender .calendar tbody td.today{
    background: #e6e6e6;
}
.calender .calendar tbody td.selected{
    border: none;
    color: #fff;
    background: #0043B2;
}

.calender .calendar tbody .progressing {
    color: transparent !important;
    background: #0043B2 url("/account/package/_images/loading.svg") no-repeat center / 32px !important;
}


.calender .calendar tbody td.hilite{
    color: #000;
    background: #d4d4d4;
    border: none;
}
.calender .calendar tbody td.selected.hilite{
    border: none;
    color: #fff;
    background: #71008d;
}


.calender .calendar .combo{
    top: 39px !important;
    width: 70px;
    font: 12px iransans;
    background: #fff;
    border: 2px solid #f2f2f2;
}
.calender .calendar .combo .label:hover{
    background: #0043B2;
}
.financial-dashboard .transaction{
    position: relative;
    display: block;
    width: 100%;
    margin-top: -80px;
}

.financial-dashboard .transaction > .container{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1500px;
    margin: auto;
}

.sk-fading-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}
.Boxs{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;

}
.Boxs > .item{
    position: relative;
    display: inline-block;
    width: 24.25%;
    margin-left: 1%;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
}
.Boxs > .item:last-of-type{
    margin-left: 0;
}

.Boxs > .item .ico{
    width: 64px;
    height: 64px;
    background: #D4D8DD;
    display: inline-block;
    padding: 12px;
    border-radius: 24px;
    vertical-align: middle;
    vertical-align: middle;
}
.Boxs > .item .ico img{
    display: block;
    width: 100%;
}
.Boxs > .item > .container {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-right: -64px;
    padding-right: 72px;
    vertical-align: middle;
}
.Boxs > .item > .container .title{
    font: 16px iransans_Bold;
    margin-bottom: 6px;
}
.Boxs > .item > .container .value{
    font: 14px iransans;
}
.Boxs > .item > .container .value small{
    margin-right: 6px;
}
.Boxs > .item ._ID{
    position: absolute;
    top: 30px;
    left: 12px;
    background: #D4D8DD;
    z-index: 2;
}

.Boxs > .item ._ID span{
    letter-spacing: 0;
}

.alert-init{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1500px;
    margin: 14px auto;
}
.alert-init .container{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    background: #607d8b;
}
.alert-init span{
    position: relative;
    display: inline-block;
    font: 12px/28px iransans_Light;
    color: #fff;
    padding: 4px 0;
}
.alert-init a{
    position: relative;
    display: inline-block;
    font: 12px/28px iransans_Light;
    color: #fff;
    text-decoration: none;
    float: left;
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;


}
.alert-init a:focus,
.alert-init a:active,
.alert-init a:hover{
    background: rgba(0, 0, 0, 0.24);
}
.alert-init i{
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
}
.dashboard{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

.dashboard .statistics{
    position: relative;
    display: block;
    width: 100%;
    background: #D4D8DD;
    font-size: 0;
    padding: 24px 0 0 0;
}
.dashboard .statistics > .container{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1500px;
    margin: auto;
}
.dashboard > .container{
    position: relative;
    display: block;
    width: 95%;
    max-width: 1500px;
    margin: auto;
    font-size: 0;
}
.dashboard .statistics > .container > .info{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    padding-right: 48px;
}
.dashboard .statistics > .container > .chart{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}
.dashboard .statistics > .container > .chart #chart-container{
    width: 100%;
    height: 150px;
}
.dashboard .statistics > .container > .chart #chart-container .chart-title{
    font: 14px iransans_Light;
}

.dashboard .statistics > .container > .info > .head{
    display: block;
    width: 100%;
}
.dashboard .statistics > .container > .info > .head .title{
    display: block;
    font: 18px iransans_Bold;
    color: #000;
}

.dashboard .statistics > .container > .info > .container{
    position: relative;
    display: block;
    width: 100%;
}
.dashboard .statistics > .container > .info > .container .item{
    display: inline-block;
    width: 50%;
    vertical-align: top;
    font-size: 12px;
    padding: 12px 0;
}

.dashboard .statistics > .container > .info > .container .item .value{
    position: relative;
    display: block;
    font: 18px iransans_Bold;
    color: #0043B2;
    text-align: right;
}
.dashboard .statistics > .container > .info > .container .item .value img{
    position: absolute;
    left: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    width: 40px;
    margin-left: 6px;
    vertical-align: middle;
    margin-top: -2px;
}
.dashboard .statistics > .container > .info > .container .item .value span{
    display: inline-block;
    vertical-align: middle;
    font: 12px iransans_Light;
    margin-right: 8px;
}
.dashboard .statistics > .container > .info > .container .item .title{
    display: block;
    font: 12px iransans_Light;
    color: #000;
}
.dashboard .submit-statistics{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    font-size: 0;

}
.dashboard .submit-statistics > .info{
    position: relative;
    display: inline-block;
    width: 35%;
    vertical-align: middle;
}
.dashboard .submit-statistics > .info > .title{
    position: relative;
    display: block;
    font: 14px iransans_Light;
    margin-bottom: 8px;
}
.dashboard .submit-statistics > .info > .count{
    display: block;
    font: 32px iransans_Bold;
    margin-bottom: 12px;
}
.dashboard .submit-statistics > .info > .count small{
    margin-right: 6px;
}
.dashboard .submit-statistics > .info > .details{
    display: block;
    width: 100%;
}
.dashboard .submit-statistics > .info > .details .item{
    display: inline-block;
    width: 33.33%;
    padding-left: 14px;
    white-space: nowrap;
}
.dashboard .submit-statistics > .info > .details .item .title{
    display: inline-block;
    width: 50%;
    font: 12px iransans_Light;
}
.dashboard .submit-statistics > .info > .details .item .value{
    display: inline-block;
    width: 50%;
    font: 12px iransans_Light;
    text-align: left;
}
.dashboard .submit-statistics > .info > .details .item .value span{
    font: 13px iransans_Bold;
    margin-left: 4px;
}
.dashboard .submit-statistics > .info > .details .item .status{
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    background: #D4D8DD;
    border-radius: 100px;
    margin-top: 8px;
    overflow: hidden;
}
.dashboard .submit-statistics > .info > .details .item .status span{
    position: absolute;
    width: 0;
    height: 100%;
    background: #444;
    top: 0;
    right: 0;
    z-index: 1;
}
.dashboard .submit-statistics > .info > .details .item.active .status span{
    background: #80CE8C;
}
.dashboard .submit-statistics > .info > .details .item.deactive .status span{
    background: #f24242;
}
.dashboard .submit-statistics > .info > .details .item.pending .status span{
    background: #F2BE42;
}


.dashboard .submit-statistics > .info > .--button{
    margin-top: 24px;
    float: right;
    margin-right: 0 !important;
}



.dashboard .submit-statistics > .list{
    position: relative;
    display: inline-block;
    width: 65%;
    vertical-align: middle;
    font-size: 12px;
    padding:140px 24px 0 0;
    margin: 0;
    list-style:none;

}

.dashboard .submit-statistics > .list:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fcefff;
    bottom: 100%;
    right: 0;
    margin-bottom: -115px;
}
.dashboard .submit-statistics > .list li{
    display: inline-block;
    float: left;
    width: 20%;
    text-align: center;
    position: relative;
    z-index: 1;
}
.dashboard .submit-statistics > .list li .img{
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    margin: auto auto 6px;
}
.dashboard .submit-statistics > .list li .img img{
    display: block;
    width: 100%;
}
.dashboard .submit-statistics > .list li .img img:first-of-type{
    position: absolute;
    top:0;
    left:0;
    visibility: hidden;
    opacity:0;
}
.dashboard .submit-statistics > .list li .img img:last-of-type{
    visibility: visible;
    opacity:1;
}
.dashboard .submit-statistics > .list li > span{
    display: block;
    position: relative;
    color: #bbbbbb;
    font-size: 12px;
}
.dashboard .submit-statistics > .list li > span:after{
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    background: #bbbbbb;
    top: 50%;
    right: 100%;
    transform: translate(50%,-50%);

}
.dashboard .submit-statistics > .list li:first-of-type span:after{
    display: none;
}

.dashboard .submit-statistics > .list li.active span,
.dashboard .submit-statistics > .list li.active ~ li span{
    color: #0043B2;
}
.dashboard .submit-statistics > .list li.active .img img:last-of-type,
.dashboard .submit-statistics > .list li.active ~ li .img img:last-of-type{
    visibility: hidden;
    opacity:0;
}
.dashboard .submit-statistics > .list li.active .img img:first-of-type,
.dashboard .submit-statistics > .list li.active ~ li .img img:first-of-type{
    visibility: visible;
    opacity:1;
}

.dashboard .submit-statistics > .list li.active:after{

    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 100%;
    left: 0;
    margin-bottom: 24px;
    background: rgba(0, 67, 178, 0);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0, 67, 178,1) 50%, rgba(255,252,255,0) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0, 67, 178,1) 50%, rgba(255,252,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0, 67, 178,1) 50%, rgba(255,252,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0, 67, 178,1) 50%, rgba(255,252,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(0, 67, 178,1) 50%, rgba(255,252,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffcff', GradientType=1 );

}

.dashboard .submit-statistics > .list li.active:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 100%;
    left: 50%;
    margin-bottom: 25px;
    background: #ffffff;
    border-radius: 100%;
    transform: translate(-50%,50%);
    z-index: 2;
    border: 1px solid #0043B2;
    box-shadow: inset 0 0 0 11px #ffffff, inset 0 0 0 12px #0043B2;
}
.dashboard .submit-statistics > .list li .tooltip{
    display: none;
}

.dashboard .submit-statistics > .list li.active .tooltip{
    position: absolute;
    bottom: 100%;
    z-index: 3;
    background: #0043B2;
    color: #fff;
    margin-bottom: 60px;
    white-space: nowrap;
    padding: 8px;
    border-radius: 4px;
    border: none;
    display: block;
    filter: drop-shadow(-5px 10px 10px rgba(0, 67, 178, 0.2));
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.dashboard .submit-statistics > .list li.active .tooltip span{

    display: inline-block;
    color: #fff;
}
.dashboard .submit-statistics > .list li.active .tooltip a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background: rgba(101, 2, 126, 0.2);
    padding: 8px 14px;
    border-radius: 4px;
    margin-right: 7px;
}

.dashboard .submit-statistics > .list li.active .tooltip:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #0043B2;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.dashboard .submit-statistics > .list li:nth-child(1) .tooltip{
    -webkit-transform: translateX(-15%);
    -moz-transform: translateX(-15%);
    -ms-transform: translateX(-15%);
    -o-transform: translateX(-15%);
    transform: translateX(-15%);
}
.dashboard .submit-statistics > .list li:nth-child(1) .tooltip:after{
    left: 15%;
}
.dashboard .submit-statistics > .list li:nth-child(2) .tooltip{

}
.dashboard .submit-statistics > .list li:nth-child(3) .tooltip{

}
.dashboard .submit-statistics > .list li:nth-child(4) .tooltip{
    -webkit-transform: translateX(-65%);
    -moz-transform: translateX(-65%);
    -ms-transform: translateX(-65%);
    -o-transform: translateX(-65%);
    transform: translateX(-65%);
}
.dashboard .submit-statistics > .list li:nth-child(4) .tooltip:after{
    left: 65%;
}
.dashboard .submit-statistics > .list li:nth-child(5) .tooltip{
    -webkit-transform: translateX(-85%);
    -moz-transform: translateX(-85%);
    -ms-transform: translateX(-85%);
    -o-transform: translateX(-85%);
    transform: translateX(-85%);
}
.dashboard .submit-statistics > .list li:nth-child(5) .tooltip:after{
    left: 85%;
}
.dashboard .notification{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-size: 0;
    padding-right: 14px;
    height: 100%;

}
.dashboard .notification > .container{
    position: relative;
    display: block;
    width: 100%;
    border-radius: 12px;

}
.dashboard .notification > .container > .title{
    display: block;
    position: relative;
    font: 14px iransans_Medium;
    margin-bottom: 12px;
}
.dashboard .notification > .container .item{
    position: relative;
    display: block;
    width: 100%;
    padding: 24px;
    background: #fff;
    margin-bottom: 8px;
    border-radius: 14px;
}
.dashboard .notification > .container .item .head{
    position: relative;
    display: block;
}
.dashboard .notification > .container .item .head .title{
    font: 12px iransans_Bold;
    padding-left: 80px;
}
.dashboard .notification > .container .item .head .status{
    position: absolute;
    top: 0;
    left: 0;
    font:12px iransans_Light;
    color: #8f8f8f;
}

.dashboard .notification > .container .item .content{
    display: block;
    font: 12px iransans_UltraLight;
    padding: 8px 0;
    text-align: justify;
    line-height: 24px;
}

.dashboard .notification > .container .item .row{
    display: block;
    white-space: nowrap;
    text-align: left;
}
.dashboard .notification > .container .item .row .time{
    display: inline-block;
    direction: ltr;
    text-align: left;
    color: #848484;
    font: 12px iransans_Light;
    line-height: 24px;
}
.dashboard .notification > .container .item .row .time:before{
    content: 'schedule';
    display: inline-block;
    font-family: 'Material Icons', serif;
    width: 20px;
    height: 20px;
    line-height: 20px;
    vertical-align: text-bottom;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;


}
.dashboard .notification > .container .item .row .showall{
    display: inline-block;
    color: #000;
    font: 12px iransans_Light;
    float: right;
    line-height: 24px;
    text-decoration: none;
    background: #D4D8DD;
    padding: 0 10px 1px;
    border-radius: 100px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.dashboard .notification > .container .item .row .showall:focus,
.dashboard .notification > .container .item .row .showall:active,
.dashboard .notification > .container .item .row .showall:hover{
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.dashboard .notification > .container ._container{
    display: block;
    position: relative;
    width: 100%;
    max-height: 290px;
    overflow: hidden;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;

}
.dashboard .notification > .container ._container.show{
    max-height: unset;
}
.dashboard .notification > .container ._container:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: rgba(236,240,246,0);
    background: -moz-linear-gradient(top, rgba(236,240,246,0) 0%, rgba(236,240,246,1) 55%, rgba(236,240,246,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(236,240,246,0)), color-stop(55%, rgba(236,240,246,1)), color-stop(100%, rgba(236,240,246,1)));
    background: -webkit-linear-gradient(top, rgba(236,240,246,0) 0%, rgba(236,240,246,1) 55%, rgba(236,240,246,1) 100%);
    background: -o-linear-gradient(top, rgba(236,240,246,0) 0%, rgba(236,240,246,1) 55%, rgba(236,240,246,1) 100%);
    background: -ms-linear-gradient(top, rgba(236,240,246,0) 0%, rgba(236,240,246,1) 55%, rgba(236,240,246,1) 100%);
    background: linear-gradient(to bottom, rgba(236,240,246,0) 0%, rgba(236,240,246,1) 55%, rgba(236,240,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f6', endColorstr='#ecf0f6', GradientType=0 );
}
.dashboard .notification > .container ._container.show:after{
    display: none;
}
.dashboard .notification > .container .seeMore{
    position: absolute;
    width: 100%;
    line-height: 32px;
    top: 100%;
    left: 0;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}


.dashboard .notification > .container ._container.show + .seeMore{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);

}
.VideoPreviewImage{
    position: relative;
    display: block;
    width: 100%;
    padding: 24px;
}
.VideoPreviewImage .video{
    display: block;
    width: 100%;
    max-width: 600px;
    margin: auto;
}
.VideoPreviewImage .video > .container{
    background-color: #D4D8DD;
    border-radius: 12px;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.VideoPreviewImage .video video{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    box-shadow: none;
    -o-object-fit: contain;
    object-fit: contain;
}
.VideoPreviewImage .video video:focus{
    outline: none;
    box-shadow: none;
}
.VideoPreviewImage .btns{
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    display: block;
    width: 100%;
    text-align: center;
    margin: 24px auto auto;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.VideoPreviewImage .btns > .container{
    display: inline-block;
    padding: 12px;
    border-radius: 100px;
}
.VideoPreviewImage .btns a{
    display: inline-block;
    padding: 6px 12px;
    font: 12px iransans_Light;
    /*border: 1px solid #b4b4b4;*/
    background: #28a745;
    color: #fff;
    margin: 0 12px ;
    border-radius: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    text-decoration: none;
}
.VideoPreviewImage .btns i{
    vertical-align: middle;
    margin-right: 6px;
    color: inherit;
}

.VideoPreviewImage .btns a:focus,
.VideoPreviewImage .btns a:active,
.VideoPreviewImage .btns a:hover{
    background: #2bb44b;
    color: #fff;
}
.VideoPreviewImage .btns a:focus,
.VideoPreviewImage .btns a:active{

    box-shadow: 0 0 0 4px rgba(43, 180, 75, 0.24);
}
.VideoPreviewImage button[type='submit']{
    padding: 6px 12px;
    float: none;
    border-radius: 100px;
    overflow: hidden;
}
#apply-contributor{
    position: relative;
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    padding: 24px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    /*overflow: hidden;*/
}

#apply-contributor *{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: thin;  /* Firefox */
}
#apply-contributor *::-webkit-scrollbar {
    width: 3px;
    height: 0;
    background-color: #ddd
}
#apply-contributor *::-webkit-scrollbar-track {

}
#apply-contributor *::-webkit-scrollbar-thumb {
    background-color: #bec4cb
}
#apply-contributor > .container{
    position: relative;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin: auto;
    width: 100%;
    max-width: 968px;
    margin: auto;
    border-radius: 14px;
    background: #F3F7FD;
    -webkit-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.24);
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.24);
    /*overflow: hidden;*/
    font-size: 0;
}
#apply-contributor > .container .steps{
    display: inline-block;
    width: 35%;
    /*height: 100%;*/
    padding: 14px;
    vertical-align: top;
    background: #fff;
    -webkit-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.14);
    /*overflow: auto;*/
}
#apply-contributor > .container .steps > .steps-container{
    position: sticky;
    top: 0;
}
#apply-contributor > .container .steps .logo{
    display: block;
    margin: auto;
    text-decoration: none;
    color: #000;
}
#apply-contributor > .container .steps .logo img{
    display: block;
    width: 64px;
    margin: 14px auto;
}
#apply-contributor > .container .steps .title{
    display: block;
    font: 16px iransans_Medium;
    text-align: center;
    margin: 0 0 4px;
    padding: 0;
}
#apply-contributor > .container .steps .description{
    display: block;
    font: 12px/24px iransans_Light;
    text-align: justify;
    margin: 0;
    padding: 0;
}
#apply-contributor > .container .steps ul{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}
#apply-contributor > .container .steps ul li{
    position: relative;
    display: block;
    padding: 0;
    margin: 14px 0;
    font-size: 0;
}

#apply-contributor > .container .steps ul li:after{
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    right: 20px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #E6E9ED;
    -webkit-box-shadow: inset 0 54px 0 0 #fff;
    -moz-box-shadow: inset 0 54px 0 0 #fff;
    box-shadow: inset 0 54px 0 0 #fff;
}
#apply-contributor > .container .steps ul li:last-child:after{
    display: none;
}
#apply-contributor > .container .steps ul li > span{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font: 24px/40px iransans_black;
    background: #E6E9ED;
    color: #B0ADC7;
    text-align: center;
    vertical-align: top;
    z-index: 9;
    overflow: hidden;
}
#apply-contributor > .container .steps ul li.ok > span{
    background: #57CFB1;
    color: #fff;
}

#apply-contributor > .container .steps ul li.ok > span:after{
    content: 'done';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    background: #57CFB1;
    color: #fff;
}

#apply-contributor > .container .steps ul li.Nok > span{
    background: rgba(220, 53, 69, 1);
    color: #fff;
}

#apply-contributor > .container .steps ul li.Nok > span:after{
    content: 'close';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    background: rgba(220, 53, 69, 1);
    color: #fff;
}


#apply-contributor > .container .steps ul li > .container{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-right: -40px;
    padding-right: 48px;
}
#apply-contributor > .container .steps ul li > .container span{
    font: 14px/40px iransans_Medium;
    color: #9b9d9f;
}
#apply-contributor > .container .steps ul li.ok > .container span{
    color: #000;
}
#apply-contributor > .container .steps ul li > .container p{
    font: 12px iransans_Light;
    margin-top: -4px;
    color: #9b9d9f;
}
#apply-contributor > .container .steps ul li.ok > .container p{
    color: #000;
}

#apply-contributor > .container .form{
    display: inline-block;
    width: 65%;
    height: 100%;
    vertical-align: top;
    padding: 40px;
    overflow: auto;
}

#apply-contributor > .container .form .laws{
    position: relative;
    display: block;
    width: 100%;
}
#apply-contributor > .container .form .laws > .title{
    display: block;
    font: 16px iransans_Medium;
    margin: 0 0 6px;
}
#apply-contributor > .container .form .laws > .description{
    display: block;
    font: 12px iransans_Light;
    margin: 0 0 14px;
}
#apply-contributor > .container .form .laws .bbb-container{
    position: relative;
    display: inline-block;
    width: 100%;
    background: #F3F7FD;
    padding: 12px;
    margin-top: -32px;
    z-index: 9;
}


@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {

        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
    }
}

#apply-contributor > .container .form .laws .arrow{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -ms-transform: translateY(32px);
    -o-transform: translateY(32px);
    transform: translateY(32px);
    margin: auto;
    text-align: center;
}
#apply-contributor > .container .form .laws .arrow i{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: #ccc;
    line-height: 40px;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -moz-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}




#apply-contributor > .container .form .group{
    display: block;
    margin: 0 0 14px;
}
#apply-contributor > .container .form .group > .title{
    font: 14px iransans;
    display: block;
}
#apply-contributor > .container .form .group > ul{
    font: 12px/24px iransans_Light;
    margin-right: 14px;
    padding: 0;
}
#apply-contributor > .container .form .group > ul li{
    margin-bottom: 12px;
}
#apply-contributor > .container .form form{

}
#apply-contributor > .container .form .item{
    display: block;
    position: relative;
    width: 100%;
    direction: ltr;
    padding: 8px 0;
}
#apply-contributor > .container .form .item .ico{
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    font: 16px/32px iransans;
    text-align: center;
    vertical-align: middle;
    background: #6A88F8;
    color: #fff;

}
#apply-contributor > .container .form .item i{
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    color: #6A88F8;
    cursor: pointer;
}
#apply-contributor > .container .form .item label{
    display: inline-block;
    width: 100%;
    margin-left: -32px;
    padding-left: 40px;
    margin-right: -32px;
    padding-right: 40px;
    vertical-align: middle;
}

#apply-contributor > .container .form .item input{
    display: inline-block;
    width: 100%;
    background: #fff;
    border: none;
    height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    font: 12px/32px OpenSans-Regular;
}
#apply-contributor > .container .form .item input:disabled{
    background: #fcfcfc;
}
#apply-contributor > .container .form .item input.invalid{
    -webkit-box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.4);
    -moz-box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.4);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.4);
}
#apply-contributor > .container .form ul{
    position: relative;
    font: 12px iransans_Light;
    text-align: justify;
}

#apply-contributor > .container .form .progress{
    position: absolute;
    display: none;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    font-size: 24px;
    z-index: 100;
    font: 20px OpenSans-Light;
    direction: ltr;
}
#apply-contributor > .container .form #form.active .progress{
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
#apply-contributor > .container .form .progress .container{
    display: inline-block;
    text-align: center;
    margin: auto;
}
#apply-contributor > .container .form .progress .percent{
    display: block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: auto;
    border-radius: 14px;
    background: #ccc;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -moz-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;

}
#apply-contributor > .container .form .progress i{
    display: inline-block;
    vertical-align: middle;
}
#apply-contributor > .container .form .progress .total,
#apply-contributor > .container .form .progress .uploaded{
    display: inline-block;
    font-size: 12px;
}


#apply-contributor > .container .designer-status{
    position: relative;
    display: block;
    width: 100%;
}
#apply-contributor > .container .designer-status .image{
    position: relative;
    display: block;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#apply-contributor > .container .designer-status .image:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}
#apply-contributor > .container .designer-status .image img{
    position: relative;
    display: block;
    width: 100%;
}

#apply-contributor > .container .designer-status .title{
    position: relative;
    display: block;
    width: 100%;
    font: 16px iransans_Medium;
    margin: 0 0 12px;
    text-align: center;

}

#apply-contributor > .container .designer-status .description{
    position: relative;
    display: block;
    width: 100%;
    font: 12px/24px iransans_Light;
    margin: 0;
    text-align: center;
}
@-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.24;
    }
}
@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.24;
    }
}
.anim.flash{
    -webkit-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anim.repeat{
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.confirm-container{
    position: sticky;
    bottom: 8px;
    width: 100%;
    background: rgba(200, 200, 200, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 6px;
    padding: 12px;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 12px;
    gap: 12px;
    font-size: 12px;
}
.confirm-container ul{
    -webkit-flex: 1 60%;
    -ms-flex: 1 60%;
    flex: 1 60%;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    line-height: 24px;

}
.confirm-container > *{
    margin: 0 !important;

}

.vip-notice{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 95%;
    max-width: 1500px;
    text-align: right;
    background: #f7f7f7;
    color: #000;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 24px auto;
}
.vip-notice > i {
    color: #0043B2;
    margin-left: 8px;
}

.vip-notice.minimize{
    max-height: 80px;
    overflow: hidden;
}

.vip-notice.minimize.show{
    max-height: unset;
    overflow: hidden;
}

.vip-notice > .container{
    position: relative;

}
.vip-notice.minimize:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border-radius: 0 0 12px 12px;
    background: rgba(241,243,244,0);
    background: -moz-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,243,244,0)), color-stop(75%, rgba(241,243,244,1)), color-stop(100%, rgba(241,243,244,1)));
    background: -webkit-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -o-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    background: linear-gradient(to bottom, rgba(241,243,244,0) 0%, rgba(241,243,244,1) 75%, rgba(241,243,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f3f4', endColorstr='#f1f3f4', GradientType=0 );
}
.vip-notice.minimize:before{
    content: 'arrow_drop_down';
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 32px;
    width: 32px;
    aspect-ratio: 1;
    height: 32px;
    overflow: hidden;
    line-height: 32px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    background: #0000001a;
    cursor: pointer;
    border-radius: 8px;
    backdrop-filter: blur(5px);
}
.vip-notice.minimize.show:after,
.vip-notice.minimize.show:before{
    display: none;
}