body, label, p, ul, li, input, textarea, select {
    font-size: 12px !important;
}

#toast-container > div {
    opacity: 0.9;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    filter: alpha(opacity=90);
    max-width: none;
}

/* toast container hover shadow */
.toast-container > div {
    box-shadow: none !important;
}

/* toast background colors starts */
.toast {
    background-color: #5A8DEE;
}

.toast-success {
    background-color: #39DA8A;
}

.toast-error {
    background-color: #FF5B5C;
}

.toast-info {
    background-color: #00CFDD;
}

.toast-warning {
    background-color: #FDAC41;
}

.toast-title,
.toast-message {
    line-height: 1.85;
}

button.toast-close-button {
    overflow: hidden;
    margin-top: -4px;
    outline: none;
}

.nav.nav-pills ~ .tab-content, .pills-stacked .tab-content {
    box-shadow: none !important;
    border: 1px solid #e7e7e7;
    background-color: #f2f4f4;
}

kbd {
    background-color: #818181 !important;
    font-family: system-ui !important;
}

.ftime {
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 3px;
}

.toast-top-left {
    top: 70px;
}

.dt-buttons.btn-group {
    position: absolute;
    left: 25px;
}

.dt-buttons.btn-group .btn {
    padding: 0px 20px !important;
    font-size: 10px;
    height: 30px;
}

table.dataTable td, table.dataTable th {
    line-height: 18px;
    padding-top: 4px;
    padding-bottom: 4px;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after {
    right: 0px !important;
}

.table thead th {
    border-bottom: 2px solid #c4c4c4;
    background-color: #f2f2f2;
}

.dt-buttons .btn-secondary {
    border-color: #ececec !important;
    background-color: #f7f7f7 !important;
    color: #000000;
}

.dt-buttons .btn-secondary:hover {
    border-color: #ececec !important;
    background-color: #5A8DEE !important;
    color: #ffffff;
}

.main-menu.menu-light .navigation > li.nav-item.sidebar-group-active.has-sub.sidebar-group-active {
    border: none !important;
}

.nav-link {
    padding: 0.567rem 0.53rem !important;
}

.form-group.issue .help-block,
.form-group.issue .help-inline,
.form-group.error .help-block,
.form-group.error .help-inline {
    /*   when an issue or error occured  */
    color: #FF5B5C;
}

.form-group.issue input,
.form-group.issue select,
.form-group.issue textarea,
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: #FF5B5C;
}

.form-group.issue input:focus,
.form-group.issue select:focus,
.form-group.issue textarea:focus,
.form-group.error input:focus,
.form-group.error select:focus,
.form-group.error textarea:focus {
    border-color: #FF5B5C;
    box-shadow: 0 3 10px 0 #FF5B5C;
}

.form-group .help-block {
    line-height: 1.85;
    margin-top: 0.25rem;
}

.form-group .help-block ul {
    padding-right: 0;
}

.form-group .help-block ul li {
    list-style-type: none;
    font-size: 0.875rem;
}

.form-group .help-block ul li::before {
    content: '\eb1b';
    position: relative;
    top: 3px;
    font-family: boxicons !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    margin-left: 3px;
}


.input-group.issue .help-block,
.input-group.issue .help-inline,
.input-group.error .help-block,
.input-group.error .help-inline {
    /*   when an issue or error occured  */
    color: #FF5B5C;
}

.input-group.issue input,
.input-group.issue select,
.input-group.issue textarea,
.input-group.error input,
.input-group.error select,
.input-group.error textarea {
    border-color: #FF5B5C;
}

.input-group.issue input:focus,
.input-group.issue select:focus,
.input-group.issue textarea:focus,
.input-group.error input:focus,
.input-group.error select:focus,
.input-group.error textarea:focus {
    border-color: #FF5B5C;
    box-shadow: 0 3 10px 0 #FF5B5C;
}

.input-group .help-block {
    line-height: 1.85;
    margin-top: 0.25rem;
}

.input-group .help-block ul {
    padding-right: 0;
}

.input-group .help-block ul li {
    list-style-type: none;
    font-size: 0.875rem;
}

.input-group .help-block ul li::before {
    content: '\eb1b';
    position: relative;
    top: 3px;
    font-family: boxicons !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    margin-left: 3px;
}

.plugin_list tr td {
    padding: 10px 10px !important;
    font-size: 12px !important;
}

.plugin_list tr th {
    background-color: #e6e6e6;
    text-align: right !important;
    padding: 20px 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {

    margin-top: 4px !important;
    padding: 4px 5px !important;
}

.btn-quick {
    font-size: 10px !important;
    padding: 5px 10px !important;
}

/*body.swal2-shown > [aria-hidden="true"] {*/
/*    transition: 0.1s filter;*/
/*    filter: blur(3px);*/
/*}*/


.factorTable thead {

}

.factorTable thead tr {
    background-color: #f5f5f5;
}

.factorTable thead tr th {
    padding: 5px 2px;
}

.factorTable tbody tr {

}

.factorTable tbody tr td {
    padding: 5px 2px;
}

.factorTable tr th {
    width: auto !important;
}

.factorTable tfoot tr {

}
.form-control {
    /*padding: .47rem .2rem !important;*/
}

.factorTable tfoot tr td {
    padding: 5px 2px;
    font-weight: 600;
}

.factorTable tfoot {
    background-color: #f2f2f2;
}

.hiddenRow {
    padding: 0 !important;
}

.commis-box img {
    width: 45px;
    margin-left: 15px;
}

.commis-box {
}


.tkartable tr {

}

.tkartable thead tr {

}

.tkartable thead tr th {
    text-align: right;
    background-color: #f7f7f7;
    padding: 10px 10px;
}

.tkartable tbody tr td {
    padding: 5px 10px;
    text-align: right;
    font-size: 11px;
}

.autoscroll {

    height: 300px;
    overflow-y: scroll;
}


/* ===== Scrollbar CSS ===== */
/* Firefox */
.autoscroll {
    scrollbar-width: auto;
    scrollbar-color: #b0b0b0 #ffffff;
}

/* Chrome, Edge, and Safari */
.autoscroll::-webkit-scrollbar {
    width: 9px;
}

.autoscroll::-webkit-scrollbar-track {
    background: #ffffff;
}

.autoscroll::-webkit-scrollbar-thumb {
    background-color: #b0b0b0;
    border-radius: 10px;
    border: 2px solid #ffffff;
}

audio {
    width: 200px;
    height: 25px;
}

.select2-container .select2-selection--multiple {
    min-height: 32px !important;
}

.dataTable thead tr {
    height: 45px
}

/* Form Wizard css  */
/*-----------------*/
.wizard .steps .current-info {
    /* default current steps information hide */
    display: none;
}

.wizard .steps ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}

.wizard .steps ul li {
    display: table-cell;
    text-align: center;
    position: relative;
}

.wizard .steps ul li a {
    position: relative;
    padding-top: 3.25rem;
    margin-top: 1.33rem;
    margin-bottom: 1.33rem;
    display: block;
}

.wizard .steps ul li a .step {
    /* Default step */
    background-color: #FFFFFF;
    position: absolute;
    top: 0.95rem;
    right: 50%;
    z-index: 1;
    width: 1.33rem;
    height: 1.33rem;
    border-radius: 50%;
    margin-right: -10px;
}

.wizard .steps ul li a .step i {
    /* icon inside step */
    position: relative;
    right: -2px;
    top: -2px;
    font-size: 1.6rem;
}

.wizard .steps ul li a .step + .fonticon-wrap {
    /*wizard Icon upon step icon */
    position: absolute;
    top: -50px;
    right: 0;
    left: 0;
}

.wizard .steps ul li::before,
.wizard .steps ul li::after {
    /* wizard horizontal line */
    content: '';
    position: absolute;
    top: 2.86rem;
    width: 50%;
    height: 3px;
}

.wizard .steps ul li::before {
    right: 0;
}

.wizard .steps ul li:after {
    left: 0;
}

.wizard .steps ul li:last-child:after {
    content: none;
}

.wizard .steps ul li.current a {
    /* current step */
    color: #5A8DEE;
    cursor: default;
}

.wizard .steps ul li.current::before {
    background-color: #5A8DEE;
}

.wizard .steps ul li.current:after {
    background-color: #E4E8E8;
}

.wizard .steps ul li.current ~ li a {
    color: #828D99;
}

.wizard .steps ul li.current ~ li:before {
    background-color: #E4E8E8;
}

.wizard .steps ul li.current ~ li:after {
    background-color: #E4E8E8;
}

.wizard .steps ul li.disabled a {
    /* disabled step */
    cursor: default;
}

.wizard .steps ul li.disabled a .step {
    border: 3px solid;
}

.wizard .steps ul li.done a {
    /* done step */
    color: #39DA8A;
}

.wizard .steps ul li.done::after,
.wizard .steps ul li.done::before {
    background-color: #39DA8A;
}

.wizard .steps ul li.error a {
    /* error for form wizard validation */
    color: #FF5B5C;
}

.wizard .steps ul li.error a .step {
    color: #FF5B5C;
}

.wizard .content {
    /* form wizard content */
    padding: 0;
    margin: 0;
}

.wizard .content .title {
    display: none;
}

.wizard .actions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wizard .actions ul li {
    float: right;
}

.wizard .actions ul li.disabled {
    display: none;
}

.wizard .actions ul li + li {
    margin-right: 0.66rem;
    float: left;
}

.wizard.vertical .steps {
    /* steps for vertical */
    float: right;
    width: 30%;
}

.wizard.vertical .steps ul li {
    margin: 0 0.5rem;
    display: block;
}

.wizard.vertical .steps ul li a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: right;
    margin: 0 0.5rem;
    padding: 1rem;
    border-radius: 0.267rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.wizard.vertical .steps ul li a .icon-title {
    line-height: 1.85;
}

.wizard.vertical .steps ul li a i {
    font-size: 2.4rem;
}

.wizard.vertical .steps ul li a i + span {
    color: #475F7B;
}

.wizard.vertical .steps ul li a .number {
    /* step indicator number */
    display: none;
}

.wizard.vertical .steps ul li.current {
    background: #5a8dee;
    border-radius: 0.267rem;
    margin-bottom: 3px;
}


.wizard.vertical .steps ul li a .fonticon-wrap i {
    color: #ccc !important;
}

.wizard.vertical .steps ul li.current a .fonticon-wrap i {
    color: #fff;
}

.wizard.vertical .steps ul li.done a .fonticon-wrap i {
    color: #fff !important;
}


.wizard.vertical .steps ul li.current a .icon-title .d-block {
    color: #fff !important;
}

.wizard.vertical .steps ul li.current a .icon-title .text-muted {
    color: #fff !important;
}

.wizard.vertical .steps ul li.done {
    background-color: #39da8a;
    border-radius: 3px;
    margin-bottom: 3px;
}

.wizard.vertical .steps ul li.done .icon-title .d-block {
    color: #fff !important;
}

.wizard.vertical .steps ul li.done .icon-title .text-muted {
    color: #fff !important;
}

.wizard.vertical .steps ul li::before,
.wizard.vertical .steps ul li::after {
    content: none;
}

.wizard.vertical .content {
    /* content inside vertical */
    float: right;
    width: 70%;
    border-right: 1px solid #DFE3E7;
}

.wizard.vertical .content .body {
    padding-right: 2.5%;
}

.wizard.vertical .actions {
    /* action inside vertical */
    text-align: left;
}

.wizard.vertical .actions ul {
    display: inline-block;
}

/* vertical wizard section becomes 100% on small screen */
@media (max-width: 767.98px) {
    .wizard.vertical .steps {
        width: 100%;
    }

    .wizard.vertical .content {
        width: 100%;
        border-right: none;
    }
}

/* specific media query for below screen to hide subtitle */
@media (min-width: 768px) and (max-width: 991.98px) {
    .wizard.vertical .steps ul li a small {
        display: none;
    }
}


.taskBox {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.taskBox .taskCustomerInfo span {
    display: block;
}

.taskBox .taskTitle {
    font-size: 18px;
    margin-bottom: 13px;
    font-weight: 500;
}

a.taskCalc {
    font-size: 10px;
    color: #001aff !important;
}

.custom-file {

    height: 33px !important;
}

.custom-file-label {

    height: 33px !important;

}

.custom-file-label::after {

    height: 31px !important;
    color: #fff !important;
    background-color: #5a8dee !important;

}

.p-5p {
    padding-left: 3px;
}

.tbsdd {
    background-color: #39da8a;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
}

.alert ul {
    padding-right: 10px !important;
    padding-bottom: 0px !important;
}

.sdww {
    display: inline-block;
}

.njdw {
    background-color: #d7f8e887;
    border-radius: 5px;
    margin-top: 15px;
}


/* funnel chart */
.svg-funnel-js {
    display: inline-block;
    position: relative;
}

.svg-funnel-js svg {
    display: block;
}

.svg-funnel-js .svg-funnel-js__labels {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__labels {
    flex-direction: column;
}

.svg-funnel-js {
    font-family: "Open Sans", sans-serif;
}

.svg-funnel-js .svg-funnel-js__container {
    width: 100%;
    height: 100%;
}

.svg-funnel-js .svg-funnel-js__labels {
    width: 100%;
    box-sizing: border-box;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label {
    flex: 1 1 0;
    position: relative;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__value {
    font-size: 14px;
    color: #5141ff;
    line-height: 18px;
    font-family: 'third-font';
    margin-bottom: 6px;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__title {
    font-size: 12px;
    font-weight: bold;
    color: #4c4c4c;
    font-family: 'third-font';
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__percentage {
    font-size: 12px;
    color: #666666;
    font-family: 'third-font';
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    padding: 8px 24px;
    box-sizing: border-box;
    background-color: rgba(8, 7, 48, 0.8);
    margin-top: 24px;
    opacity: 0;
    transition: opacity 0.1s ease;
    cursor: default;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li {
    font-size: 13px;
    line-height: 16px;
    color: #fff;
    margin: 18px 0;
    font-family: 'third-font';
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li .percentage__list-label {
    font-weight: bold;
    color: #05df9d;
}

.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages {
    opacity: 1;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) {
    padding-top: 64px;
    padding-bottom: 16px;
    direction: ltr;
    width: 100%;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label {
    padding-left: 24px;
    text-align: center;
}

.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) {
    border-left: 1px solid #fff;
    text-align: center;
}

.svg-funnel-js.svg-funnel-js--vertical {
    padding-left: 120px;
    padding-right: 16px;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label {
    padding-top: 24px;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label:not(:first-child) {
    border-top: 1px solid #9896dc;
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages {
    margin-top: 0;
    margin-left: 106px;
    width: calc(100% - 106px);
}

.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages .segment-percentage__list {
    display: flex;
    justify-content: space-around;
}

.svg-funnel-js .svg-funnel-js__subLabels {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    position: absolute;
    width: 100%;
    left: 0;
}

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel {
    display: flex;
    font-size: 12px;
    color: #2b2b2b;
    line-height: 16px;
    font-family: 'third-font';
}

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel:not(:first-child) {
    margin-left: 16px;
}

.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel .svg-funnel-js__subLabel--color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 2px 8px 2px 0;
}

.card-header {
    /*border-bottom: 1px solid #f2f4f4;*/
    /*margin-bottom: 14px;*/
    padding: 20px !important;
}

.card .card-title {
    font-size: 16px !important;
}

.card .heading-elements, .card .heading-elements-toggle {

    top: 15px !important;
    left: 20px !important;

}

.colorButton {
    height: 50px;
    border: 1px solid #d4d4d4;
}

.btn.btn-icon {
    padding: 0.2rem 0.4rem !important;
}

.swal2-close:focus {
    box-shadow: none !important;
}

.swal2-html-container {
    margin: 0em 1.6em 0.3em !important;
}

.swal2-popup .swal2-title {

    margin: 0px !important;
    padding: 5px !important;
}

.navbar-brand {
    display: inline-block;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-left: 0px !important;
}

.main-menu .navbar-header .navbar-brand {
    margin-top: 0px !important;

}

.rate {
    /*float: left;*/
    /*height: 46px;*/
    /*padding: 0 10px;*/
}

.rate:not(:checked) > input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked) > label {
    float: left;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    height: 1px !important;
    cursor: pointer;
    line-height: 1;
    font-size: 28px !important;
    color: #ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #ffc700;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.tbl_record_view tr {

}

.tbl_record_view tr th {

}

.tbl_record_view tr td {
    padding: 5px;
}

.footmobile {
    display: none;
}

@media only screen and (max-width: 600px) {
    .foot_help {
        display: none;
    }

    .foot_today {
        display: none;
    }
}

.takhsis tr {

}

.takhsis tr th {
    padding: 10px 5px;
}

.takhsis tr td {
    padding: 5px;
    font-size: 10px;
}

.table td, .table th {
    padding: 5px
}

.widget-timeline {
    padding: 0 !important;
}

#snow-wrapper {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px
}

.usr_box {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.int_num_usr {
    display: block;
    position: absolute;
    left: 40px;
    font-size: 20px;
}

.follow_box_dash {
    padding: 10px 0;
    height: 500px
}

.notebook_lines {
    height: calc(100% - 40px);
    width: 100%;
    background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
}


.dragging {
    z-index: 111 !important
}

.block {
    position: absolute;
    z-index: 9
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 60px;
    background-color: #217ce8;
    margin-top: -5px;
    opacity: 1;
    transition: all .3s cubic-bezier(.05, .03, .35, 1);
    transform: scale(1);
    position: absolute;
    z-index: 2
}

.invisible {
    opacity: 0 !important;
    transform: scale(0)
}

.indicator:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #217ce8;
    transform: scale(1.7);
    opacity: .2;
    border-radius: 60px
}

.arrowblock {
    position: absolute;
    width: 100%;
    overflow: visible;
    pointer-events: none
}

.arrowblock svg {
    width: -webkit-fill-available;
    overflow: visible;
}
#navigation {
    height: 71px;
    background-color: #FFF;
    border: 1px solid #E8E8EF;
    width: 100%;
    display: table;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 9
}
#back {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: #F1F4FC;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    margin-right: 10px
}
#back img {
    margin-top: 13px;
}
#names {
    display: inline-block;
    vertical-align: top;
}
#title {
    font-family: Roboto;
    font-weight: 500;
    font-size: 16px;
    color: #393C44;
    margin-bottom: 0px;
}
#subtitle {
    font-family: Roboto;
    color: #808292;
    font-size: 14px;
    margin-top: 5px;
}
#leftside {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}
#centerswitch {
    position: absolute;
    width: 222px;
    left: 50%;
    margin-left: -111px;
    top: 15px;
}
#leftswitch {
    border: 1px solid #E8E8EF;
    background-color: #FBFBFB;
    width: 111px;
    height: 39px;
    line-height: 39px;
    border-radius: 5px 0px 0px 5px;
    font-family: Roboto;
    color: #393C44;
    display: inline-block;
    font-size: 14px;
    text-align: center;
}
#rightswitch {
    font-family: Roboto;
    color: #808292;
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #E8E8EF;
    height: 39px;
    width: 102px;
    display: inline-block;
    font-size: 14px;
    line-height: 39px;
    text-align: center;
    margin-left: -5px;
}
#discard {
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    color: #A6A6B3;
    width: 95px;
    height: 38px;
    border: 1px solid #E8E8EF;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    display: inline-block;
    vertical-align: top;
    transition: all .2s cubic-bezier(.05,.03,.35,1);
}
#discard:hover {
    cursor: pointer;
    opacity: .7;
}
#publish {
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    color: #FFF;
    background-color: #217CE8;
    border-radius: 5px;
    width: 143px;
    height: 38px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 38px;
    margin-right: 20px;
    transition: all .2s cubic-bezier(.05,.03,.35,1);
}
#publish:hover {
    cursor: pointer;
    opacity: .7;
}
#buttonsright {
    float: right;
    margin-top: 15px;
}
#leftcard {
    width: 363px;
    background-color: #FFF;
    border: 1px solid #E8E8EF;
    box-sizing: border-box;
    padding-top: 85px;
    padding-left: 20px;
    height: 100%;
    position: absolute;
    z-index: 2;
}
#search input {
    width: 318px;
    height: 40px;
    background-color: #FFF;
    border: 1px solid #E8E8EF;
    box-sizing: border-box;
    box-shadow: 0px 2px 8px rgba(34,34,87,0.05);
    border-radius: 5px;
    text-indent: 35px;
    font-family: Roboto;
    font-size: 16px;
}
::-webkit-input-placeholder { /* Edge */
    color: #C9C9D5;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #C9C9D5
}

::placeholder {
    color: #C9C9D5;
}
#search img {
    position: absolute;
    margin-top: 10px;
    width: 18px;
    margin-left: 12px;
}
#header {
    font-size: 20px;
    font-family: Roboto;
    font-weight: bold;
    color: #393C44;
}
#subnav {
    border-bottom: 1px solid #E8E8EF;
    width: calc(100% + 20px);
    margin-left: -20px;
    margin-top: 10px;
}
.navdisabled {
    transition: all .3s cubic-bezier(.05,.03,.35,1);
}
.navdisabled:hover {
    cursor: pointer;
    opacity: .5;
}
.navactive {
    color: #393C44!important;
}
#triggers {
    margin-left: 20px;
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #808292;
    width: calc(88% / 3);
    height: 48px;
    line-height: 48px;
    display: inline-block;
    float: left;
}
.navactive:after {
    display: block;
    content: "";
    width:  100%;
    height: 4px;
    background-color: #217CE8;
    margin-top: -4px;
}
#actions {
    display: inline-block;
    font-family: Roboto;
    font-weight: 500;
    color: #808292;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    width: calc(88% / 3);
    text-align: center;
    float: left;
}
#loggers {
    width: calc(88% / 3);
    display: inline-block;
    font-family: Roboto;
    font-weight: 500;
    color: #808292;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    text-align: center;
}
#footer {
    position: absolute;
    left: 0;
    padding-left: 20px;
    line-height: 40px;
    bottom: 0;
    width: 362px;
    border: 1px solid #E8E8EF;
    height: 67px;
    box-sizing: border-box;
    background-color: #FFF;
    font-family: Roboto;
    font-size: 14px;
}
#footer a {
    text-decoration: none;
    color: #393C44;
    transition: all .2s cubic-bezier(.05,.03,.35,1);
}
#footer a:hover {
    opacity: .5;
}
#footer span {
    color: #808292;
}
#footer p {
    display: inline-block;
    color: #808292;
}
#footer img {
    margin-left: 5px;
    margin-right: 5px;
}
.blockelem:first-child {
    margin-top: 0
}
.blockelem {
    padding-top: 10px;
    width: 320px;
    border: 1px solid #ccc;
    transition-property: box-shadow, height;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.05,.03,.35,1);
    border-radius: 5px;
    box-shadow: 0px 0px 30px rgba(22, 33, 74, 0);
    box-sizing: border-box;
    margin-bottom: 5px;
}
.blockelem:hover {
    box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08);
    border-radius: 5px;
    background-color: #FFF;
    cursor: pointer;
}
.grabme, .blockico {
    display: inline-block;
}
.grabme {
    /*margin-top: 10px;*/
    /*margin-left: 10px;*/
    /*margin-bottom: -14px;*/
    /*width: 15px;*/
    display: inline;
    float: left;
    padding-left: 10px;
}
#blocklist {
    height: calc(100% - 220px);
    overflow: auto;
}
#proplist {
    height: calc(100% - 305px);
    overflow: auto;
    margin-top: -30px;
    padding-top: 30px;
    margin-top: -30px;
    padding-right: 15px;
}
.blockin {
    display: inline-block;
    vertical-align: top;
    width: 70%;
}
.blockico {
    width: 36px;
    height: 36px;
    background-color: #F1F4FC;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
}
.blockico span {
    height: 100%;
    width: 0px;
    display: inline-block;
    vertical-align: middle;
}
.blockico img {
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}
.blocktext {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin-left: 0px;
    padding: 0 15px;
}
.blocktitle {
    margin: 0px!important;
    padding: 0px!important;
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    color: #393C44;
}
.blockdesc {
    margin-top: 5px;
    font-family: inherit;
    color: #808292;
    font-size: 14px;
    line-height: 21px;
}
.blockdisabled {
    background-color: #F0F2F9;
    opacity: .5;
}
#closecard {
    position: absolute;
    margin-left: 340px;
    background-color: #FFF;
    border-radius: 0px 5px 5px 0px;
    border-bottom: 1px solid #E8E8EF;
    border-right: 1px solid #E8E8EF;
    border-top: 1px solid #E8E8EF;
    width: 53px;
    height: 53px;
    text-align: center;
    z-index: 10;
}
#closecard img {
    margin-top: 15px
}
#canvas {
    position: absolute;
    width: calc(100% - 361px);
    height: calc(100% - 71px);
    top: 71px;
    left: 361px;
    z-index: 0;
    overflow: auto;
}
#propwrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 311px;
    height: 100%;
    padding-left: 20px;
    overflow: hidden;
    z-index: -2;
}
#properties {
    position: absolute;
    height: 100%;
    width: 311px;
    background-color: #FFF;
    right: -150px;
    opacity: 0;
    z-index: 2;
    top: 0px;
    box-shadow: -4px 0px 40px rgba(26, 26, 73, 0);
    padding-left: 20px;
    transition: all .25s cubic-bezier(.05,.03,.35,1);
}
.itson {
    z-index: 2!important;
}
.expanded {
    right: 0!important;
    opacity: 1!important;
    box-shadow: -4px 0px 40px rgba(26, 26, 73, 0.05);
    z-index: 2;
}
#header2 {
    font-size: 20px;
    font-family: inherit;
    font-weight: bold;
    color: #393C44;
    margin-top: 97px;
    margin-right: 40px;
}
#close {
    margin-top: 100px;
    position: absolute;
    right: 20px;
    z-index: 9999;
    transition: all .25s cubic-bezier(.05,.03,.35,1);
}
#close:hover {
    cursor: pointer;
    opacity: .7;
}
#propswitch {
    border-bottom: 1px solid #E8E8EF;
    width: 331px;
    margin-top: 10px;
    margin-left: -20px;
    margin-bottom: 30px;
}
#dataprop {
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #393C44;
    width: calc(88% / 3);
    height: 48px;
    line-height: 48px;
    display: inline-block;
    float: left;
    margin-left: 20px;
}
#dataprop:after {
    display: block;
    content: "";
    width: 100%;
    height: 4px;
    background-color: #217CE8;
    margin-top: -4px;
}
#alertprop {
    display: inline-block;
    font-family: Roboto;
    font-weight: 500;
    color: #808292;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    width: calc(88% / 3);
    text-align: center;
    float: left;
}
#logsprop {
    width: calc(88% / 3);
    display: inline-block;
    font-family: Roboto;
    font-weight: 500;
    color: #808292;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    text-align: center;
}
.inputlabel {
    font-family: Roboto;
    font-size: 14px;
    color: #253134;
}
.dropme {
    background-color: #FFF;
    border-radius: 5px;
    border: 1px solid #E8E8EF;
    box-shadow: 0px 2px 8px rgba(34, 34, 87, 0.05);
    font-family: Roboto;
    font-size: 14px;
    color: #253134;
    text-indent: 20px;
    height: 40px;
    line-height: 40px;
    width: 287px;
    margin-bottom: 25px;
}
.dropme img {
    margin-top: 17px;
    float: right;
    margin-right: 15px;
}
.checkus {
    margin-bottom: 10px;
}
.checkus img {
    display: inline-block;
    vertical-align: middle;
}
.checkus p {
    display: inline-block;
    font-family: Roboto;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 10px;
}
#divisionthing {
    height: 1px;
    width: 100%;
    background-color: #E8E8EF;
    position: absolute;
    right: 0px;
    bottom: 80;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
.blockyname {
    font-family: inherit;
    font-weight: 500;
    color: #253134;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 16px;
    margin-bottom: 0;
}
.blockyleft img {
    display: inline-block;
    vertical-align: middle;
}
.blockyright {
    display: inline-block;
    float: right;
    vertical-align: middle;
    margin-right: 20px;
    margin-top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    text-align: center;
    background-color: #FFF;
    transition: all .3s cubic-bezier(.05,.03,.35,1);
    z-index: 10;
}
.blockyright:hover {
    background-color: #F1F4FC;
    cursor: pointer;
}
.blockyright img {
    margin-top: 12px;
}
.blockyleft {
    display: inline-block;
    /* margin-left: 20px; */
    width: 100%;
}
.blockydiv {
    width: 100%;
    height: 1px;
    background-color: #E9E9EF;
}
.blockyinfo {
    font-family: inherit;
    font-size: 8px;
    color: #808292;
    margin-top: 5px;
    line-height: 2;
    text-indent: 20px;
    margin-bottom: 5px;
    width: 100%;
}
.blockyinfo span {
color: #253134;
font-weight: 500;
display: inline-block;
border-bottom: 1px solid #D3DCEA;

text-indent: 0px;

}

.det_lable {
width: 68%;
float: right;
display: inline-block;
}


.block {
background-color: #FFF;
margin-top: 0px!important;
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.05);
}
.selectedblock {
border: 2px solid #217CE8;
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08);
}

@media only screen and (max-width: 832px) {
#centerswitch {
    display: none;
}
}
@media only screen and (max-width: 560px) {
#names {
    display: none;
}
}

.imageClassChart {
display: inline-block;
width: 30%;
float: left;
padding-left: 10px;
}
.imageClassChart img{
width: 50px !important;
float:left;
}
.titleUserChart{
display: inline-block;
width: 70%;
font-family: 'third-font';
padding: 0 10px;
}
.blockyposition {

}

.personal_img {
    width: 100%;
    border: 3px solid #e9e9e9;
    border-radius: 5px;
}
.personal_img img{

    width: 100%;
    border-radius: 3px;
}

.user_personnel_code {
    background-color: #fffad7;
    font-size: 14px !important;
    font-family: cursive;
}

.fbox FIELDSET {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;
    border-radius: 4px;
}
LEGEND{
    width: auto;
    display: block;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 10px;
    color: inherit;
    white-space: normal;
}




.payment-title {
    width: 100%;
    text-align: center;
}

.form-container .field-container:first-of-type {
    grid-area: name;
}

.form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-container {
    position: relative;
}

.form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name""number number""expiration security";
    max-width: 400px;
    padding: 20px;
    color: #707070;
}



.ccicon {
    height: 38px;
    position: absolute;
    right: 6px;
    top: calc(50% - 17px);
    width: 60px;
}

/* CREDIT CARD IMAGE STYLING */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}



#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 100px;
    max-height: 60px;
}

.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0px black;
    box-shadow: 1px 5px 6px 0px black;
    border-radius: 22px;
}

#generatecard{
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float:right;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .lightblue {
    fill: #03A9F4;
}

.creditcard .lightbluedark {
    fill: #0288D1;
}

.creditcard .red {
    fill: #ef5350;
}

.creditcard .reddark {
    fill: #d32f2f;
}

.creditcard .purple {
    fill: #ab47bc;
}

.creditcard .purpledark {
    fill: #7b1fa2;
}

.creditcard .cyan {
    fill: #26c6da;
}

.creditcard .cyandark {
    fill: #0097a7;
}

.creditcard .green {
    fill: #66bb6a;
}

.creditcard .greendark {
    fill: #388e3c;
}

.creditcard .lime {
    fill: #d4e157;
}

.creditcard .limedark {
    fill: #afb42b;
}

.creditcard .yellow {
    fill: #ffeb3b;
}

.creditcard .yellowdark {
    fill: #f9a825;
}

.creditcard .orange {
    fill: #ff9800;
}

.creditcard .orangedark {
    fill: #ef6c00;
}

.creditcard .grey {
    fill: #bdbdbd;
}

.creditcard .greydark {
    fill: #616161;
}

/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 33.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st12 {
    font-family: 'Rock Salt', cursive;
}

#cardback .st13 {
    font-size: 37.769px;
}

/* FLIP ANIMATION */
/*.container {*/
/*    perspective: 1000px;*/
/*}*/

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.grid-stack .card {
    height: 100% !important;
    overflow: hidden;

}

.grid-stack .table-responsive{
    height: 100% !important;
}

#table-cartable ul{
    margin-bottom: 0px;
}

#table-cartable ul li{
    padding-bottom:0px !important;
    margin-left: 5px;
}

#table-cartable ul li.active{

}
#table-cartable ul li a{
    padding: 10px 25px!important;
    border-radius: 3px 3px 0 0 !important;
    background-color: #fff;
}

#table-cartable ul li a.active{
    background-color: #0c65e8 !important;
}

#table-cartable .tab-content{
    padding: 0;
    background-color: #ffff;
    border-radius: 0 0 5px 5px;
    height: 325px;
    overflow-y: auto;
}

#table-cartable .badge-up {
    position: absolute;
    top: 10px;
    right: 12px;
    left: revert;
}

#table-cartable .badge-pill {
    border-radius: 2rem;
    padding: 4px;
    width: 20px;
}

/*toastify*/

.toast-close {
    color: #464646 !important;
    font-size: 12px !important;
    opacity: 1 !important;
}


.erp-toastify{
    min-width:400px !important;
    background:#fff !important;
    color:#333 !important;
    border-radius:12px !important;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.erp-toast{
    display:flex;
    align-items:center;
    gap:15px;
}

.toast-avatar{
    width:80px;
    height:80px;
    border-radius:50%; /* اگر عکس پروفایل است */
    object-fit:cover;
}

.content .title{
    font-weight:bold;
    font-size:16px;
    margin-bottom:5px;
}

.content .desc{
    font-size:14px;
    color:#666;
}