/*Task and Workflow Section*/
/*.Popup_Base span {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 1000000;
    background-color: transparent;
}*/

.Popup_Base span a {
    font-size: 20px;
    padding: 0;
    color: yellow;
}

.Popup_Base .Popup_ConditionSection {
    background-color: #505be2;
    /*position: fixed;*/
}

    .Popup_Base .Popup_ConditionSection button {
        border: 1px solid rgba(225, 236, 231, 0.77) !important;
        border-radius: 10px !important;
        margin-right: 5px !important;
        float: right !important;
        outline: none;
        background-color: #505be2;
        color: white;
        padding: 8px 6px !important;
        font-size: 11px;
        font-weight: 600;
        min-width: 60px;
    }

        .Popup_Base .Popup_ConditionSection button:hover {
            background-color: orange;
        }

    .Popup_Base .Popup_ConditionSection .WorkFlowInstanceId {
        color: white !important;
        font-size: 12px;
        font-weight: 500;
        border-bottom: 1px solid rgba(225, 236, 231, 0.77) !important;
        margin: 10px;
    }

        .Popup_Base .Popup_ConditionSection .WorkFlowInstanceId i {
            font-size: 14px;
        }

        .Popup_Base .Popup_ConditionSection .WorkFlowInstanceId span {
            margin: 0px 5px;
        }

    .Popup_Base .Popup_ConditionSection #lblmsg {
        color: white !important;
        padding: 0px 20px;
    }

.Popup_Base .tbs_tabs {
    /*position: absolute;*/
    top: 50px;
    width: 100%;
    right: 0px;
    left: 0px;
}

    .Popup_Base .tbs_tabs #tsTaskTabs {
        margin-right: 33px;
    }

    .Popup_Base .tbs_tabs .tab-content {
        margin-right: 10px;
    }

    .Popup_Base .tbs_tabs #tsFormsListTab {
        margin-right: 10px;
    }

    .Popup_Base .tbs_tabs #tsNewWorkflowTabs {
        margin-right: 33px;
    }


#tsTaskProperties .k-pager-nav[title="صفحه ی نخست"], #tsTaskAttachments .k-pager-nav[title="صفحه ی نخست"], #tsTaskNotes .k-pager-nav[title="صفحه ی نخست"], #tsTaskWorkFlowInstanceRefrences .k-pager-nav[title="صفحه ی نخست"], #tsNewWorkflow_Attachments .k-pager-nav[title="صفحه ی نخست"] {
    transform: scaleX(-1);
}

#tsTaskProperties .k-pager-nav[title="صفحه ی آخر"], #tsTaskAttachments .k-pager-nav[title="صفحه ی آخر"], #tsTaskNotes .k-pager-nav[title="صفحه ی آخر"], #tsTaskWorkFlowInstanceRefrences .k-pager-nav[title="صفحه ی آخر"], #tsNewWorkflow_Attachments .k-pager-nav[title="صفحه ی آخر"] {
    transform: scaleX(-1);
}

#tsTaskProperties .k-pager-nav[title="صفحه ی قبل"], #tsTaskAttachments .k-pager-nav[title="صفحه ی قبل"], #tsTaskNotes .k-pager-nav[title="صفحه ی قبل"], #tsTaskWorkFlowInstanceRefrences .k-pager-nav[title="صفحه ی قبل"], #tsNewWorkflow_Attachments .k-pager-nav[title="صفحه ی قبل"] {
    transform: scaleX(-1);
}

#tsTaskProperties .k-pager-nav[title="صفحه ی بعد"], #tsTaskAttachments .k-pager-nav[title="صفحه ی بعد"], #tsTaskNotes .k-pager-nav[title="صفحه ی بعد"], #tsTaskWorkFlowInstanceRefrences .k-pager-nav[title="صفحه ی بعد"], #tsNewWorkflow_Attachments .k-pager-nav[title="صفحه ی بعد"] {
    transform: scaleX(-1);
}
/*End Task and Workflow Section*/

/*Overwrite Class*/
input[type="button"] {
    outline: none !important;
}

.form__label, .select-label {
    color: #2b2b2b !important;
}


.btn-search {
    outline: none;
    color: #fff;
    background-color: #33b5e5;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .btn-search:hover {
        color: #fff;
        background-color: #4abde8;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }

.modal-dialog .modal-content .modal-header {
    background-color: #0066ffd1;
    text-align: center;
    color: white;
}

    .modal-dialog .modal-content .modal-header .close {
        color: white;
        opacity: .8;
    }

.modal-dialog .modal-content {
    box-shadow: 0px 0px 10px 0px #0066ffd1;
}
/*END Overwrite Class*/

/*Custom CSS Class*/
.margin-right-30 {
    margin-right: 30px;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-10 {
    margin-right: 10px;
}

.width-auto {
    width: auto;
}

.margin-top-12 {
    margin-top: 12px;
}

.container-align-center {
    margin: 0 auto;
    width: 80%;
}
/*End Custom CSS Class*/

/*New CSS Class*/
.btn-accept {
    outline: none;
    color: #fff;
    background-color: #2bbbad;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 16%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .btn-accept:hover {
        color: #fff;
        background-color: #2bbbad;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }

.btn-cancel {
    outline: none;
    color: #fff;
    background-color: #ff3547;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 16%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .btn-cancel:hover {
        color: #fff;
        background-color: #ff3547;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }

.btn-add {
    outline: none;
    color: #fff;
    background-color: #b23cfd;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 16%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .btn-add:hover {
        color: #fff;
        background-color: #b23cfd;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }

.container-checkbox {
    position: relative;
    padding-right: 30px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-top: 5px;
}

    .container-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 4px;
}

.container-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

.container-checkbox input:checked ~ .checkmark {
    background-color: red;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.container-checkbox .checkmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tab-content .k-widget .k-header .panel-group {
    margin-right: 13px;
}

    .tab-content .k-widget .k-header .panel-group .panel .panel-heading {
        background-color: #b4e5f973 !important;
    }

        .tab-content .k-widget .k-header .panel-group .panel .panel-heading .panel-title a {
            text-decoration: none;
        }

#tsPackages {
    /*background-color: white;*/
}

.sender-form-group {
    position: relative;
    padding: 10px;
    margin-top: 5px;
}

.sender-label {
    position: absolute;
    top: 8px;
    right: 40px;
    font-size: 10px;
    font-weight: 400;
    color: #9b9b9b;
    color: black;
    width: auto;
    background-color: white;
}

.sender-form-group .form__field {
    border: 1px #d2d2d2 solid;
}

    .sender-form-group .form__field:focus {
        padding-bottom: 6px;
        border: 2px solid #145DA0;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
    }

.sender-form-group .k-widget.form__field {
    border-radius: 10px;
    height: auto;
}

.sender-form-group .k-widget .k-picker-wrap {
    border-radius: 10px;
}

.sender-form-group .k-widget .k-state-focused {
    border: 2px solid #145DA0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
    height: auto;
}

.sender-form-group .k-widget .k-state-hover {
    background-color: white;
}

.sender-form-group .form__field:hover:not(:focus) {
    border-color: #adadad;
}

.sender-form-group .form__field:hover:focus {
    height: auto;
}

.sender-form-group .k-state-hover {
    background-color: white;
}

.sender-input {
    border-radius: 10px;
}
/*End New CSS Class*/

/*navbar tab new style*/
#tsMessages {
    background-color: transparent !important;
    border: none !important;
}

    #tsMessages li a {
        color: #333;
        background: #f5f5f5 !important;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        padding: 11px 15px 10px;
        margin: 0 10px 1px 0;
        border: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        border-radius: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease 0s;
    }

    #tsMessages li:last-child a {
        margin-right: 0;
    }

    #tsMessages li a:hover,
    #tsMessages li.active a {
        color: #fff;
        background: #f5f5f5;
        border: none;
    }

    #tsMessages li a:before {
        content: '';
        background: #1581abad;
        height: 100%;
        width: 100%;
        opacity: 0;
        transform: scale(0.5);
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        transition: opacity 0.4s ease 0s,left 0.3s ease 0s,transform 0.4s ease 0.2s;
        border-radius: 3px 3px 0px 0px;
    }

    #tsMessages li.active a:before,
    #tsMessages li a:hover:before {
        opacity: 1;
        transform: scale(1);
        left: 0;
    }

.tsMessages-content.tab-content .k-widget .k-grid-content .k-master-row td a span.fa.fa-envelope {
    width: auto;
    font-size: 15px;
    color: yellowgreen;
}

.tsMessages-content.tab-content .k-widget .k-grid-content .k-master-row td a span.fa.fa-trash {
    width: auto;
    font-size: 15px;
    color: #999;
}

.tsMessages-content.tab-content .k-widget .k-grid-content .k-master-row td a span.fa.fa-envelope-open {
    width: auto;
    color: #ff8d00ad;
    font-size: 15px;
}

.tsMessages-content {
    color: #333;
    /*background: linear-gradient(to right bottom,#f5f5f5 50%, transparent 50%);*/
    border-top: 4px solid #1581abad;
}

#tsTaskTabs {
    background-color: transparent !important;
    border: none !important;
}

    #tsTaskTabs li a {
        color: #333;
        /*background: #f5f5f5 !important;*/
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        padding: 11px 15px 10px;
        /*margin: 0 10px 1px 0;*/
        border: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        border-radius: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease 0s;
    }

    #tsTaskTabs li:first-child > a {
        margin: 0px 10px 1px 0px;
    }

    #tsTaskTabs li:last-child a {
        margin-right: 0;
    }

    #tsTaskTabs li a:hover,
    #tsTaskTabs li.active a {
        color: #fff;
        background: #f5f5f5;
        border: none;
    }

    #tsTaskTabs li a:before {
        content: '';
        background: #1581abad;
        height: 100%;
        width: 100%;
        opacity: 0;
        transform: scale(0.5);
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        transition: opacity 0.4s ease 0s,left 0.3s ease 0s,transform 0.4s ease 0.2s;
        border-radius: 3px 3px 0px 0px;
    }

    #tsTaskTabs li.active a:before,
    #tsTaskTabs li a:hover:before {
        opacity: 1;
        transform: scale(1);
        left: 0;
    }

.tbs_tabs .tab-content {
    /*color: #333; */
    /*/*****background: linear-gradient(to right bottom,#f5f5f5 50%, transparent 50%);*****/
    /*border-top: 4px solid #1581abad;*/
}
/*End nav bar tab new style*/
/*Buttons inside Tab content css style*/
#tsTaskNotes .k-widget .k-header a.btn.k-button {
    outline: none;
    color: #fff;
    background-color: #2bbbad;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 16%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin: 10px 5px 10px 0;
}

    #tsTaskNotes .k-widget .k-header a.btn.k-button:hover {
        color: #fff;
        background-color: #2bbbad;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }

#tsTaskAttachments .k-widget .k-header .k-button {
    outline: none;
    color: #fff;
    background-color: #2bbbad;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 16%);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin: 10px 5px 10px 0;
}

    #tsTaskAttachments .k-widget .k-header .k-button:hover {
        color: #fff;
        background-color: #2bbbad;
        box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
    }
/*End Buttons inside Tab content css style*/

/*Send new message css style*/
.message-group {
    position: relative;
    padding: 10px;
    margin-top: 5px;
}

    .message-group .k-widget.k-multiselect {
        border: none !important;
    }

.message-label {
    position: absolute;
    top: -7px;
    right: 40px;
    font-size: 12px;
    font-weight: 400;
    color: black;
    width: auto;
    border-radius: 2px;
    background-color: white;
    z-index: 1;
    border: 1px solid blue;
    border-bottom-color: white;
    width: 88px;
    text-align: center;
}

.message-field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border: 1px solid #d2d2d2;
    outline: 0;
    font-size: 12px;
    color: #212121;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    border-radius: 10px !important;
}

.message-group .k-multiselect-wrap {
    height: inherit;
    border: 1px #0043ff solid;
    border-radius: 10px;
    padding: 2px 4px 0px 0px;
}

.message-group .title-field {
    background-color: white;
    border-color: #0043ff;
    padding: 0px 5px 0px 0px;
    height: 37px;
}
/*End Send new message css style*/

/*Substitude form element css style*/
.substitute-form-group {
    position: relative;
    padding: 15px 0 0
}

    .substitute-form-group .k-widget .k-dropdown-wrap {
        border-radius: 10px;
        height: 30px;
    }

        .substitute-form-group .k-widget .k-dropdown-wrap.k-state-hover {
            background-color: white
        }

        .substitute-form-group .k-widget .k-dropdown-wrap.k-state-focused {
            border: 2px solid #145DA0 !important;
            -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
            box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(37 46 53 / 60%);
        }

.substitude-field {
}

.substitute-label {
    position: absolute;
    top: 8px;
    right: 10px;
    background-color: white;
    width: auto;
    font-size: 10px;
    font-weight: 500;
}
/*End Substitude form element css style*/

/*Advanced search*/

/*End advanced search*/
/*Icon in Task and Workflow css style*/
.icon-register {
    font-size: 15px;
    color: #00d000;
}

.icon-save {
    font-size: 15px;
    color: lightgray;
}
/*End Icon in Task and Workflow css style*/

/*new search button on navbar menu css style*/
.search-container {
    margin: auto;
    bottom: 0;
    width: auto;
    height: auto;
    position: absolute !important;
    top: 5px;
    left: 0px !important;
    direction: ltr;
}

    .search-container .search-div {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 29px;
        height: 29px;
        background: crimson;
        border-radius: 50%;
        transition: all 1s;
        z-index: 4;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
    }

        .search-container .search-div:hover {
            cursor: pointer;
        }

        .search-container .search-div::before {
            content: "";
            position: absolute;
            margin: auto;
            top: 10px;
            right: 0;
            bottom: 0;
            left: 10px;
            width: 8px;
            height: 2px;
            background: white;
            transform: rotate( 45deg );
            transition: all .3s;
        }

        .search-container .search-div::after {
            content: "";
            position: absolute;
            margin: auto;
            top: -5px;
            right: 0;
            bottom: 0;
            left: -5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid white;
            transition: all .3s;
        }

    .search-container .search-input {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0px;
        width: 50px;
        height: 25px;
        outline: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        background: crimson;
        color: white;
        text-shadow: 0 0 10px crimson;
        padding: 0 10px 0px 45px;
        border-radius: 30px;
        box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
        transition: all 1s;
        opacity: 0;
        z-index: 5;
        font-weight: bolder;
        letter-spacing: 0.1em;
    }

        .search-container .search-input:hover {
            cursor: pointer;
        }

        .search-container .search-input:focus {
            width: 150px;
            opacity: 1;
            cursor: text;
            left: 0px;
        }

            .search-container .search-input:focus ~ .search-div {
                background: #151515;
                z-index: 6;
            }

                .search-container .search-input:focus ~ .search-div::before {
                    top: 0;
                    left: 0;
                    width: 15px;
                }

                .search-container .search-input:focus ~ .search-div::after {
                    top: 0;
                    left: 0;
                    width: 15px;
                    height: 2px;
                    border: none;
                    background: white;
                    border-radius: 0%;
                    transform: rotate(-45deg);
                }

        .search-container .search-input::placeholder {
            color: white;
            opacity: 0.5;
            font-weight: bolder;
        }

.navbar #callCenterBox > .callCenterStatus {
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    height: 27px;
    background-size: cover;
    position: relative;
    background-color: white;
    border-radius: 50%;
    width: 27px;
    text-align: center;
    padding: 5px;
}
/*End new search button on navbar menu css style*/

/*Kendo grid css style - responsive group cartable*/
#tabCartableTab2Content .k-grid-header .k-grid-header-wrap colgroup col:nth-child(2) {
    width: 2% !important;
}

#tabCartableTab2Content .k-grid-content .k-selectable colgroup col:nth-child(2) {
    width: 2% !important;
}

#tabCartableTab2Content .k-grid-header .k-grid-header-wrap colgroup col:nth-child(7) {
    width: 25% !important;
}

#tabCartableTab2Content .k-grid-content .k-selectable colgroup col:nth-child(7) {
    width: 25% !important;
}

/*#tsFormsListTabContent .k-grid-header table colgroup col:nth-child(2) {
    width: 60px !important;
}

#tsFormsListTabContent .k-grid-header table colgroup col:nth-child(4) {
    width: 60px !important;
}

#tsFormsListTabContent .k-grid-header table colgroup col:nth-child(7) {
    width: 60px !important;
}

#tsFormsListTabContent .k-grid-content table colgroup col:nth-child(2) {
    width: 60px !important;
}

#tsFormsListTabContent .k-grid-content table colgroup col:nth-child(4) {
    width: 60px !important;
}

#tsFormsListTabContent .k-grid-content table colgroup col:nth-child(7) {
    width: 60px !important;
}*/

#tsFormsListTabContent .k-grid-header table thead tr th a {
    font-size: 11px;
    font-weight: 100;
}

.k-grid-header th.k-header > .k-link {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: darkblue;
    text-align: center;
}

.k-grid-header .k-grid-header-wrap [type='checkbox'] + label {
    display: none !important;
}

.k-grid-header th.k-header input, .k-grid-header th.k-header label {
    font-size: 9px !important;
    font-weight: 100 !important;
}

.k-grid-content table tbody tr td span {
    white-space: pre-wrap;
}
/*End Kendo grid css style - responsive group cartable*/
.k-content h6 {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

    .k-content h6 span {
        padding: 0 10px;
        background-color: orange;
        color: red !important;
    }


.form__group .select-text {
    padding: 5px 10px 0 0 !important;
    height: 31px !important;
}

.navbar #callCenterBox {
    font-size: 16px !important;
    color: white;
    padding: 10px 15px !important;
    background-color: gray;
    top: 0px;
    border-radius: 10px;
}

    .navbar #callCenterBox.callCenterWarning {
        background-color: lightsalmon !important;
    }

    .navbar #callCenterBox.callCenterOn {
        background-color: #51d851 !important;
    }

    .navbar #callCenterBox.callCenterOnRest {
        background-color: blue !important;
    }

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-FD.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-Bold-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-Bold-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-Bold-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-Bold-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-Bold-FD.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-Black-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-Black-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-Black-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-Black-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-Black-FD.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-Medium-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-Medium-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-Medium-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-Medium-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-Medium-FD.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-Light-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-Light-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-Light-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-Light-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-Light-FD.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Farsi-Digits/Vazir-Thin-FD.eot');
    src: url('../fonts/Farsi-Digits/Vazir-Thin-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Farsi-Digits/Vazir-Thin-FD.woff2') format('woff2'), url('../fonts/Farsi-Digits/Vazir-Thin-FD.woff') format('woff'), url('../fonts/Farsi-Digits/Vazir-Thin-FD.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: BLotus;
    src: url('../Content/Stimulsoft/BLotus.ttf');
    src: url('../Content/Stimulsoft/BLotus.ttf?#iefix') format('embedded-opentype') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/*nvabar inside new workflow style*/
.tzTabItemContent.tab-content {
    position: relative !important;
    /*top: 0px !important;*/
}

form .tzTabStrip > ul.nav.nav-tabs li > a {
    border-color: black;
    border-bottom: none;
}
/*End nvabar inside new workflow style*/

/*change style of dropdown menu in top menu*/
#tsPackages .kendo-top-menu .k-animation-container {
    height: -webkit-fill-available !important;
}

/*End change style of dropdown menu in top menu*/
.form__group .k-multiselect span {
    top: unset !important;
    left: unset !important;
}

.k-grid-header th.k-header > .k-link {
    padding: unset !important;
}

div.display-label, ul.tzCheckListBox li.ng-scope label.ng-binding {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

button.tbsButton {
    text-align: center;
    padding: 2px;
}

/*#region chat button style*/
.chat .float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #f33;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    animation: bot-to-top 2s ease-out;
}

.chat .my-float {
    font-size: 24px;
    margin-top: 18px;
}

a#chat-share i {
    animation: rotate-in 0.5s;
}

a#chat-share:hover > i {
    animation: rotate-out 0.5s;
}


@keyframes rotate-in {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-out {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}
/*#End region chat button style*/

.folder {
    font-size: 20px;
    margin-left: 10px;
    color: darkorange;
}

.folder-name {
    color: black;
    font-size: 13px;
    font-weight: 500;
}

.folder-badge {
    font-size: 10px;
    border-radius: 50%;
    background-color: rgb(72 144 251);
    width: 20px;
    height: 20px;
    padding: 5px;
}

.trash-badge, .edit-badge {
    font-size: 15px;
    width: 20px;
    height: 20px;
    margin: 3px 10px;
}

    .trash-badge:hover {
        color: red;
    }

    .edit-badge:hover {
        color: orange;
    }


.three-dots {
    position: absolute;
    top: auto;
    left: auto;
}

    .three-dots:after {
        cursor: pointer;
        color: #009688;
        content: '\2807';
        font-size: 20px;
        padding: 0 5px;
    }

.folder-dropdown {
    position: absolute;
    right: 10px;
    background-color: #66D;
    box-shadow: 0px 0px 3px 3px #66D;
    outline: none;
    opacity: 0;
    z-index: -1;
    max-height: 0;
    transition: opacity 0.1s, z-index 0.1s, max-height: 5s;
}

.folder-dropdown-container:focus {
    outline: none;
}

    .folder-dropdown-container:focus .folder-dropdown {
        opacity: 1;
        z-index: 100;
        max-height: 100vh;
        transition: opacity 0.2s, z-index 0.2s, max-height: 0.2s;
    }

/*k-popup-edit*/
.k-widget.k-window .k-window-titlebar.k-header span.k-window-title {
    visibility: hidden;
}

.k-widget.k-window .k-window-titlebar .k-window-actions {
    right: unset;
    left: 0.7em;
}

.k-widget.k-window .k-window-titlebar.k-header .k-window-actions .k-window-action.k-link.k-state-hover {
    background-color: inherit;
    border: none;
}

.k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default {
    float: left;
}

    .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default .k-grid-update span {
        display: none;
    }

    .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default .k-grid-cancel span {
        display: none;
    }

    .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default a.k-grid-update {
        font-size: 0px;
        margin-left: 10px;
    }

        .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default a.k-grid-update::before {
            text-align: center;
            content: 'بروزرسانی';
            font-size: 10px;
            padding: 5px 14px 4px;
            font-family: inherit;
            line-height: 1.72em;
            text-align: center;
            cursor: pointer;
        }

    .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default a.k-grid-cancel {
        font-size: 0px;
    }

        .k-widget.k-window .k-popup-edit-form.k-window-content.k-content .k-edit-form-container .k-edit-buttons.k-state-default a.k-grid-cancel::before {
            text-align: center;
            content: 'بستن';
            font-size: 10px;
            padding: 5px 14px 4px;
            font-family: inherit;
            line-height: 1.72em;
            text-align: center;
            cursor: pointer;
        }

.k-widget.k-window .k-popup-edit-form .k-edit-form-container .k-edit-buttons {
    border: none;
}

.tzNumericTexbox {
    direction: ltr !important;
}

@media (max-width: 1030px) {
    .clearfix {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: self-start;
        justify-content: space-around;
    }

    .metro-top-menu .badge-style-open {
        top: -1px !important;
    }
}

.popover {
    font-size: 13px;
    font-family: 'Vazir';
    text-align: justify;
    background-color: #39c7d9 !important;
    color: white;
}

.popover-navigation, .popover-title {
    background-color: #39c7d9 !important;
    color: white;
    text-align: center;
}

    .popover-navigation .btn-end {
        outline: none !important;
        background-color: #ffc107;
    }

    .popover-navigation .btn[data-role="next"] {
        outline: none !important;
        background-color: lightgoldenrodyellow;
    }

    .popover-navigation .btn[data-role="prev"] {
        outline: none !important;
        background-color: lightgoldenrodyellow;
    }

.list-style-none {
    list-style: none;
}

.padding-left-10 {
    padding-left: 10px;
}

.btn-question {
    position: absolute;
    left: 7px;
    top: 7px;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    color: red;
    padding: 3px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 13px;
    border: 1px solid white;
    outline: none !important;
}

    .btn-question:hover {
        color: red !important;
    }

#userTaskFoldersUl li {
    font-size: 12px;
}

    #userTaskFoldersUl li i {
        font-size: 15px;
    }

    #userTaskFoldersUl li a:hover {
        background-color: lightgray;
    }

.licenseManager {
    width: 100%;
    text-align: center;
    background-color: #ed1000;
    color: white;
    font-size: 20px;
    font-weight: 600
}

.licenseInfo {
    width: 100%;
    text-align: center;
    background-color: #ff9800;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 5px;
}

.licenseInfo-label {
    display: inline-block;
    line-height: 20px;
}

.licenseInfo-icon {
    margin-left: 5px;
    padding-right: 30px;
}

.licenseInfo-footer {
    position: absolute;
    right: 0px;
    font-size: 8px;
    font-weight: bold;
}

.override-Kendo-Width {
    width: 100% !important;
    Font-Family: 'Vazir' !important;
    font-Size: 13px !important;
    display: block;
    height: fit-content !important;
}

.k-header.k-grid-toolbar .btn.btn-xs {
    border: 1px solid gray;
    margin: 0px 1px;
}

    .k-header.k-grid-toolbar .btn.btn-xs i {
        padding: 0px 3px;
    }

.task-folder-container {
    position: absolute;
    top: 5px;
    left: 40px;
    display: flex;
    justify-content: space-around;
}

.m-l {
    margin-left: 10px;
}

/*Start favourite task css style*/
.click {
    color: white;
    font-size: 30px;
    width: 38px;
    height: 38px;
    position: relative;
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 10000;
    transition: all .32s ease;
}

.isFavourite {
    color: #ff9800 !important;
}

.click span {
    margin-top: 3px;
    margin-right: 6px;
    z-index: 10000;
    position: absolute;
}

    .click span:hover {
        opacity: 0.8;
    }

    .click span:active {
        transform: scale(0.93,0.93) translateY(2px)
    }


.click .active span {
    color: #ff9800 !important;
}

.click .info {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    color: grey;
    position: relative;
    top: 30px;
    left: -46px;
    opacity: 0;
    transition: all 0.3s ease;
}

.click .info-tog {
    color: #F5CC27;
    position: relative;
    top: 45px;
    opacity: 1;
}
/*End favourite task css style*/

.tzLookup {
    min-width: 28px !important;
}

.tzLookup input {
    font-family: 'Vazir';
    font-size: inherit;
    width: calc(100% - 24px) !important;
    border-width: 1px;
    border-radius: 0px 4px 4px 0px;
    min-height: 32px;
}

.tzLookup button {
    font-family: 'Vazir';
    font-size: inherit;
    width: 24px !important;
    border-radius: 4px 0px 0px 4px;
    min-height: 32px;
}

.btn:not([class*='glyphicon']) {
    font-family: 'Vazir';
}

/*Forgot Password*/
.forgot-link {
    font-size: 10px !important;
}

.forgot-text {
    display: block;
    font-size: 13px;
    margin: 27px 0px;
    transition: all .5s;
}

    .forgot-text:hover {
        font-size: 14px;
        margin: 26px 0px;
    }

.forgot-container {
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 3s;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 20px 5px;
    border-radius: 6px !important;
    border: 1px solid white;
}

    .forgot-container input {
        outline: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.2);
        width: 80%;
        border-radius: 5px;
        margin: 0 auto 10px auto;
        color: white;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        text-indent: 0px;
    }

        .forgot-container input:hover {
            text-indent: 15px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background-color: rgba(255, 255, 255, 0.3);
        }

        .forgot-container input:focus {
            text-indent: 0px;
            color: black;
            border: 1px solid rgba(255, 255, 255, 0.5);
            background-color: rgba(255, 255, 255, 0.7);
        }

        .forgot-container input::placeholder {
            color: #f8f8f8;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
        }

        .forgot-container input:focus::placeholder {
            color: rgba(255, 255, 255, 0);
        }

        .forgot-container input[readonly] {
            background-color: gray !important;
        }

    .forgot-container #wrapper {
        font-family: Lato;
        font-size: 1.5rem;
        text-align: center;
        box-sizing: border-box;
        color: #333;
    }

        .forgot-container #wrapper #dialog {
            /*border: solid 1px #ccc;
            margin: 10px auto;
            padding: 20px 30px;
            display: inline-block;
            box-shadow: 0 0 4px #ccc;
            background-color: #FAF8F8;
            overflow: hidden;
            position: relative;
            max-width: 450px;*/
        }

            .forgot-container #wrapper #dialog h3 {
                margin: 0 0 10px;
                padding: 0;
                line-height: 1.25;
            }

            .forgot-container #wrapper #dialog span {
                font-size: 90%;
            }

            .forgot-container #wrapper #dialog #form {
                /*max-width: 240px;
                margin: 25px auto 0;*/
            }

                .forgot-container #wrapper #dialog #form input {
                    font-family: Vazir;
                    margin: 0 5px;
                    text-align: center;
                    line-height: 80px;
                    font-size: 50px;
                    border: solid 1px #ccc;
                    box-shadow: 0 0 5px #ccc inset;
                    outline: none;
                    width: 20%;
                    transition: all .2s ease-in-out;
                    border-radius: 3px;
                }

                    .forgot-container #wrapper #dialog #form input:focus {
                        border-color: purple;
                        box-shadow: 0 0 5px purple inset;
                    }

                    .forgot-container #wrapper #dialog #form input::selection {
                        background: transparent;
                    }

                .forgot-container #wrapper #dialog #form button.close {
                    border: solid 2px;
                    border-radius: 30px;
                    line-height: 19px;
                    font-size: 120%;
                    width: 22px;
                    position: absolute;
                    right: 5px;
                    top: 5px;
                }

                .forgot-container #wrapper #dialog #form div {
                    position: relative;
                    z-index: 1;
                }

                .forgot-container #wrapper #dialog #form img {
                    position: absolute;
                    bottom: -70px;
                    right: -63px;
                }


.tZReportViewer {
    direction: ltr;
}
/*.stiJsViewerPageShadow g text {
    text-anchor: unset !important;
}*/
.stiJsViewerReportPanel svg > g {
    transform: scale(0.97) !important;
}
/*.stiJsViewerPageShadow svg:first-child g:first-child {
    transform: scale(.9) !important;
}*/

#cmbStartWorflow {
    font-size: 11px;
    width: 300px !important;
    padding: 5px;
    font-size: 11px;
    border-radius: 5px;
}

.child-grid .iv-container {
    position: relative !important;
}

/*add new style to tzTextBox*/
.tz-form-group {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 1em;
    align-items: start;
    /*height: unset !important;*/
}
/**
  * Add a transition to the label and input.
  * I'm not even sure that touch-action: manipulation works on
  * inputs, but hey, it's new and cool and could remove the 
  * pesky delay.
  */
.tz-label {
    padding-top: 5px;
    padding-right: 10px;
    font-size: 10px;
}

.tz-label, .tz-input {
    transition: all 0.2s;
    touch-action: manipulation;
}

.tz-input {
    /*font-size: 1.5em;*/
    width: 100%;
    height: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-family: inherit;
    border-radius: 0;
    padding: 0;
    cursor: text;
}

    .tz-input:focus {
        outline: 0;
        border-bottom: 1px solid rgb(115, 115, 218);
    }

.tz-label {
    letter-spacing: 0.05em;
}
/**
  * Translate down and scale the label up to cover the placeholder,
  * when following an input (with placeholder-shown support).
  * Also make sure the label is only on one row, at max 2/3rds of the
  * field—to make sure it scales properly and doesn't wrap.
  */
.tz-input:placeholder-shown + .tz-label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    transform-origin: bottom;
    transform: translate(0, 2rem) scale(1.5);
}
/**
  * By default, the placeholder should be transparent. Also, it should 
  * inherit the transition.
  */
.tz-input::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}
/**
  * Show the placeholder when the input is focused.
  */
.tz-input:focus::-webkit-input-placeholder {
    opacity: 1;
    font-size: 12px;
    color: lightgray;
}
/**
  * When the element is focused, remove the label transform.
  * Also, do this when the placeholder is _not_ shown, i.e. when 
  * there's something in the input at all.
  */
.tz-input:not(:placeholder-shown) + .tz-label, {
    transform: translate(0,0) scale(1);
    cursor: pointer;
}

.tz-input.k-state-disabled {
    pointer-events: none !important;
}

.tz-input:focus + .tz-label {
    transform: translate(0,0) scale(1);
    cursor: pointer;
    color: rgb(115, 115, 218);
}

/*css style task comment button*/
.task-comment-container {
    position: relative;
}

.btn-task-comment {
    border: none;
    border-radius: 50%;
    height: 21px;
    width: 21px;
    padding: 3px;
}

.icon-task-comment:hover {
    color: orangered;
}

.icon-task-comment {
    color: black;
}

.task-section {
    width: 100%;
    max-height: 10px;
    margin-bottom: 5px;
    text-align: right;
}

.button-section {
    position: absolute;
    text-align: center;
    width: 100%;
    top: -3px;
    opacity: 0;
    transition: opacity .35s ease;
}

.task-comment-container:hover .button-section {
    z-index: 100;
    opacity: 1;
}

.task-comment-container:hover .task-section {
    filter: blur(1px);
}

.taskComment-close {
    position: absolute;
    top: 10px;
    left: 10px;
}

.k-pager-refresh k-link {
    border-radius: 50%;
}

.form__field {
    border-radius: none !important;
}


.k-grid-header th.k-header {
    vertical-align: unset !important;
}

#subFlagMenu {
    margin: 5px;
}

.dvAccessPanels {
    display: none !important;
}

form.isresponsive fieldset {
    padding-bottom: 10px;
}

form.isresponsive a.responsive-control {
    display: block;
}

audio {
    height: 31px;
}

.tzCheckListBox {
    border-color: #ccc !important;
    border-radius: 4px;
}

/*.tzFileUpload input.form-control {
    width: calc(100% - 64px) !important;
}*/

.tzFileUpload input.form-control.fileUploaded {
    /*width: calc(100% - 118px) !important;*/
}

.tzFileUpload .glyphicon-cloud-upload {
    color: green;
}

.tzFileUpload .glyphicon-cloud-download {
    color: blue;
}

.tzFileUpload .glyphicon-remove {
    color: red;
}

.tzFileUpload div.input-group-btn {
    width: 100%;
}

    .tzFileUpload div.input-group-btn span.btn-file {
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
    }

.display-label {
    font-family: inherit !important;
}

a.responsive-control {
    border-radius: 4px;
}

.previouslogin-section {
    border: 1px solid #008b8b;
    margin: 10px;
    border-radius: 5px;
    padding: 6px;
}

.callcenter-section {
    border: 1px solid #008b8b;
    width: 50%;
    margin: 10px 63px;
    border-radius: 5px;
}

.callcenter-section_detail {
    border: 1px solid darkcyan;
    width: 100%;
    padding-top: 5px;
    color: white;
    background-color: darkcyan;
}

/*Scroll in Grid*/
/*.tzGridView {
    overflow-y: unset !important;
    padding-bottom: 20px;
}*/

/*.tzGridView .k-grid-content {
        height: calc(100% - 91px) !important;
        scroll: auto;
        max-height: 300px
    }

    .tzGridView .grid_fullHeight > .k-grid > .k-grid-content {
        height: unset !important;
    }*/

.tzGridView.override-Kendo-Width .k-grid-content {
    max-height: 460px;
}

.pnlbAccessPanel-search {
    z-index: 1000;
    position: absolute;
    top: 10px;
    left: 0px;
    -webkit-transform: translateX(0) translateY(-30%);
    transform: translateX(0) translateY(-30%);
}

    .pnlbAccessPanel-search * {
        outline: none;
        box-sizing: border-box;
    }

.metro-content-package-search {
    z-index: 1000;
    position: absolute;
    top: 0px;
    left: -22px;
    -webkit-transform: translateX(0) translateY(-30%);
    transform: translateX(0) translateY(-30%);
}
    .metro-content-package-search * {
        outline: none;
        box-sizing: border-box;
    }

.search__wrapper {
    position: relative;
}

.search__field {
    width: 35px;
    height: 35px;
    text-align: right;
    color: transparent;
    border: 1px solid transparent;
    border-radius: 23px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    padding-right: 20px;
}

    .search__field:focus {
        border: 2px solid #b81eea;
        width: 200px;
        color: #2b2b2b;
        cursor: default;
        border-radius: 15px;
        margin-left: 2px;
    }

        .search__field:focus ~ .search__icon {
            background-color: #b81eea;
            cursor: pointer;
            pointer-events: auto;
            color: white;
            font-weight: bold;
        }

.search__icon {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    color: darkorange;
    width: 35px;
    height: 35px;
    text-align: center;
    border: 0px;
    border-radius: 50%;
    pointer-events: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
}

.search__field::-webkit-input-placeholder {
    position: relative;
    top: 0;
    right: 0;
    transition-property: top, color;
    transition-duration: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.search__field:-moz-placeholder {
    position: relative;
    top: 0;
    right: 0;
    transition-property: top, color;
    transition-duration: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.search__field::-moz-placeholder {
    position: relative;
    top: 0;
    right: 0;
    transition-property: top, color;
    transition-duration: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.search__field:-ms-input-placeholder {
    position: relative;
    top: 0;
    right: 0;
    transition-property: top, color;
    transition-duration: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.search__field::-webkit-input-placeholder[style*=hidden] {
    color: #83b0c1;
    top: -20px;
    opacity: 1;
    visibility: visible !important;
}

.search__field:-moz-placeholder[style*=hidden] {
    color: #83b0c1;
    top: -20px;
    opacity: 1;
    visibility: visible !important;
}

.search__field::-moz-placeholder[style*=hidden] {
    color: #83b0c1;
    top: -20px;
    opacity: 1;
    visibility: visible !important;
}

.search__field:-ms-input-placeholder[style*=hidden] {
    color: #83b0c1;
    top: -20px;
    opacity: 1;
    visibility: visible !important;
}

.tzPlayer {
    height: 2rem !important;
}

.isresponsive [class*="col-sm"] {
    padding-bottom: 8px;
}

/*.isresponsive .tzDatePicker, .isresponsive .tzComboBox {
    padding-bottom: 10px;
}*/

.canceledWorkflow {
    text-align: center;
    background-color: #ed1000;
    color: white;
    font-size: 15px;
    font-family: 'Vazir';
    font-weight: 400;
    padding: 5px;
}

.inprogressWorkflow {
    text-align: center;
    background-color: #4caf50;
    color: white;
    font-size: 15px;
    font-family: 'Vazir';
    font-weight: 400;
    padding: 5px;
}

.endedWorkflow {
    text-align: center;
    background-color: darkgray;
    color: white;
    font-size: 15px;
    font-family: 'Vazir';
    font-weight: 400;
    padding: 5px;
}

.workflow-detail {
    border: 1px solid rgba(225, 236, 231, 0.77) !important;
    border-radius: 10px !important;
    margin-right: 5px !important;
    float: right !important;
    outline: none;
    background-color: inherit;
    color: white;
    padding: 9px 6px !important;
    font-size: 11px;
    font-weight: 600;
    min-width: 60px;
}

/************  Poratl Responsive Form  *****************/

body {
    background-color: aliceblue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu {
    left: auto;
    right: 250px;
    direction: rtl;
}

.grid_layout {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
}

.header {
    grid-row: 1;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(to left, #20609e, #62b2cd, #abdbe9, rgba(238, 246, 249, .5));
    background-size: 100% 120%, cover;
    background-position: center center;
    position: relative;
    background-repeat: no-repeat;
    height: 7rem;
    font-weight: normal;
}

footer {
    grid-row: 4;
}

.footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 1px 0px 0px 1px #103f4e;
    background-color: #272c8f;
    padding: 10px 20px;
    color: white;
    font-size: 13px !important;
    font-weight: normal !important;
}

.menu ul {
    margin: auto;
    height: 50%;
    padding-top: 21px;
    margin-right: 40px;
}

.menu_item {
    list-style: none;
    padding: 5px;
    text-align: right;
}

    .menu_item :hover {
        background: #62b2cd85;
        border-radius: 3px;
        display: inline-block;
    }

.Popup_Base {
    position: relative;
    grid-row: 2;
    overflow-y: auto;
}

.Popup_ConditionSection {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    border-radius: 0px 0px 5px 5px;
    background: linear-gradient(to left, #e2f1f8, #2b6ea6);
}

/************ End Poratl Responsive Form  *****************/

.btn-navigate-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}


/**/
:root {
    --main-color: #eaeaea;
    --stroke-color: black;
}
/**/
body {
    background: var(--main-color);
}

h1 {
    margin: 100px auto 0 auto;
    color: var(--stroke-color);
    font-size: 10rem;
    line-height: 10rem;
    font-weight: 200;
    text-align: center;
}

h2 {
    margin: 20px auto 30px auto;
    font-size: 1.5rem;
    font-weight: 200;
    text-align: center;
}

h1, h2 {
    -webkit-transition: opacity 0.5s linear, margin-top 0.5s linear; /* Safari */
    transition: opacity 0.5s linear, margin-top 0.5s linear;
}

.loading h1, .loading h2 {
    margin-top: 0px;
    opacity: 0;
}

.gears {
    position: relative;
    margin: 0 auto;
    width: auto;
    height: 0;
}

.gear {
    position: relative;
    z-index: 0;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--stroke-color);
}

    .gear:before {
        position: absolute;
        left: 5px;
        top: 5px;
        right: 5px;
        bottom: 5px;
        z-index: 2;
        content: "";
        border-radius: 50%;
        background: var(--main-color);
    }

    .gear:after {
        position: absolute;
        left: 25px;
        top: 25px;
        z-index: 3;
        content: "";
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 5px solid var(--stroke-color);
        box-sizing: border-box;
        background: var(--main-color);
    }

    .gear.one {
        left: -130px;
    }

    .gear.two {
        top: -75px;
    }

    .gear.three {
        top: -235px;
        left: 130px;
    }

    .gear .bar {
        position: absolute;
        left: -15px;
        top: 50%;
        z-index: 0;
        width: 150px;
        height: 30px;
        margin-top: -15px;
        border-radius: 5px;
        background: var(--stroke-color);
    }

        .gear .bar:before {
            position: absolute;
            left: 5px;
            top: 5px;
            right: 5px;
            bottom: 5px;
            z-index: 1;
            content: "";
            border-radius: 2px;
            background: var(--main-color);
        }

        .gear .bar:nth-child(2) {
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
        }

        .gear .bar:nth-child(3) {
            transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }

@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes anticlockwise {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes clockwiseError {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(30deg);
    }

    40% {
        -webkit-transform: rotate(25deg);
    }

    60% {
        -webkit-transform: rotate(30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes anticlockwiseErrorStop {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(-30deg);
    }

    60% {
        -webkit-transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes anticlockwiseError {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(-30deg);
    }

    40% {
        -webkit-transform: rotate(-25deg);
    }

    60% {
        -webkit-transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

.gear.one {
    -webkit-animation: anticlockwiseErrorStop 2s linear infinite;
}

.gear.two {
    -webkit-animation: anticlockwiseError 2s linear infinite;
}

.gear.three {
    -webkit-animation: clockwiseError 2s linear infinite;
}

.loading .gear.one, .loading .gear.three {
    -webkit-animation: clockwise 3s linear infinite;
}

.loading .gear.two {
    -webkit-animation: anticlockwise 3s linear infinite;
}


.container-display {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10rem;
}

.notfound {
    font-size: 14px;
    text-decoration: none !important;
    text-transform: uppercase;
    background: #fff;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 40px;
    color: #292929;
    font-weight: 700;
    -webkit-box-shadow: 0px 4px 15px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 15px -5px rgba(0, 0, 0, 0.3);
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

    .notfound:hover {
        color: #fff;
        background-color: #00b5c3;
    }