/* #region register_forms */
/********************************/
/******                    ******/
/******  Normalize Portal  ******/
/******                    ******/
/********************************/

.SiPo-FORM table.dg li.ListData span.FormCaption,
.SiPo-FORM table.dg li.ListData span.FormField{
    font-family: 'iransans' !important;
}
.SiPo-FORM table.dg li.ListData span.FormCaption{
    padding: 10px 5px;
    margin: 3px 0px !important;
}
.SiPo-FORM table.dg li.ListData span.FormField{
    width: 60%;
}

.SiPo-FORM *{
    font-family: 'iransans';
}
.SiPo-FORM legend:empty{
    /* empty legends remove */
    /* :empty added at 14020529 by graphic group in order to show it whenever it has data, support demanded it, previously they ordered to remove it and now it's been restored */
    display: none !important;
}
.SiPo-FORM legend:not(:empty){
    margin-top: 20px;
    margin-bottom: 10px;
}
.auto-tab td:empty,
.SiPo-FORM td:empty{
    /* remove empty td elements */
    display: none !important;
}
.SiPo-FORM table.dg{
    width: 100%;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) table{
    max-width: 100% !important;
    display: block !important;
}
.SiPo-FORM .FormCaption , legend span[id*='CaptchaControl']{
    /* bold captions */
    /* font-weight: 700; */
}

.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr{
    /* some tr elements has default small max-width (140px) */
    max-width: 100% !important;
}
.SiPo-FORM .dynamic-form-fileupload{
    /* input type file */
    width: 91% !important;
    height: 100% !important;
    padding: 10px 5px;
    min-height: 50px;
    text-align: right !important;
    line-height: 2.9;
    margin-top: 4px;
}
.AjaxFileUploader{
    margin: 4px 0;
    line-height: 42px;
    border-color: #e7e7e7;
}

.auto-tab .dynamic-form-fileupload{
    /* inside auto-tab they have small space, should be smaller */
    width: 89% !important;
}
.dynamic-form-link[title="Remove File"][id*='btnRemoveFile'],
.dynamic-form-button-image{
    /* file upload, remove file icon */
    position: absolute;
    top: 10px;
    left: 0;
    padding: 13px !important;
    border: solid 1px #e7e7e7;
    border-radius: 6px;
    z-index: 9 !important;
}
.dynamic-form-link[title="Remove File"][id*='btnRemoveFile'],
.dynamic-form-button-image{    
    /* file upload, remove file icon */
    left: unset;
    right: 0;
    top: 7px;
    /* i know this is not correct, but error validator makes parent stretch i has no better solution to prevent remove icon jumping on other elements */
    border: none;    
}
.auto-tab .dynamic-form-link[title="Remove File"][id*='btnRemoveFile'],
.auto-tab .dynamic-form-button-image{
    /* file upload, remove file icon */
    position: absolute;
    top: 0px;
    left: 1px;
    padding: 3.5px 13px !important;
    border: solid 1px #e7e7e7;
    border-radius: 6px;
    z-index: 9 !important;
}
.SiPo-FORM .dynamic-form-td tbody>tr>td:last-child , .dynamic-form-td tbody>tr>td:last-child{
    /* date picker inputs(start-end) space */
    padding-right: 5px;
}
.SiPo-FORM .dynamic-form-td tbody>tr>td , .dynamic-form-td tbody>tr>td{
    /* date picker td */
    position: relative;
    text-align: right;
}

.SiPo-FORM .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
    /* date picker input */
    border: solid 1px #e7e7e7;
    border-radius: 6px;
    width: 80%;
}

.SiPo-FORM .dynamic-form-textbox-datetime.dynamic-form-textbox{
    /* date picker input */
    width: 100% !important;
    border: solid 1px #e7e7e7;
    border-radius: 6px;
    position: relative;
}

.SiPo-FORM .FormButtonNoWidth, .ui-datepicker-trigger,
.SiPo-FORM .dynamic-form-td tbody>tr>td .FormButtonNoWidth, .dynamic-form-td tbody>tr>td .ui-datepicker-trigger{
    /* date picker icon */
    position: absolute !important;
    left: 10px !important;
    top: 32% !important;
}

fieldset>table>tbody>.dynamic-form-tr>td{
    position: relative;
    text-align: right;
}

.siposearchable-select .sipocombo-span-icon b{
    /* Arrow Down In Search Divisions */
    /* Match It With Select Options */
    left: -2px;
    margin-left: 0;
}
.SiPo-FORM span.dynamic-form-validator{
    line-height: 1;
}
.dynamic-form-legend{    
    font-family: 'iransans';
    font-weight: bold;
    color: #0F3265
}
.SiPo-FORM select.dynamic-form-dropdown{
    /* Searchable Elements */
    margin: 0 !important;
    line-height: 1 !important;
    width: 100% !important;
    height: 50px !important;
}

.SiPo-FORM div table:not(.pagination) tbody td:not([data-th]):before,
.FormTitle{
    /* remove extra space from top */
    content: unset;
    /* display: none !important; */
    font-size: 20px;
    font-weight: bold;
    display: flex!important;
    color: #0F3265;
}
/* 
.SiPo-FORM div table:not(.pagination) tbody td[data-th]:before{
    content: unset
} */


fieldset .siposearchable-select{
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

fieldset .siposearchable-select a:nth-of-type(1){
    /* Portal First Item Select Options */
    display: block;
    height: auto !important;
}
fieldset .siposearchable-select a span:nth-of-type(1){
    /* Portal First Item Select Options Link */
    transform: translateY(5px);
}

fieldset .siposearchable-select .sipocombo-a-href span{
    line-height: 1 !important;
    height: auto !important;
}
fieldset>table>tbody>.dynamic-form-tr>td:not([colspan="2"])>div[class*='select']{
    margin: 4px 0 !important;
}
.SiPo-FORM .dynamic-form-filter-datetime /*  Datepicker  */,
fieldset>table>tbody input:not([type='image']):not([type='file']):not([type='submit']):not([type='radio']),
fieldset>table>tbody div[class*='select'],
fieldset>table>tbody select,
fieldset>table>tbody div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
fieldset>table>tbody textarea{
    /* field label */
    padding: 10px 5px;
    height: 50px !important;;
    text-align: right;
}
fieldset>table>tbody input[type='submit']{
    text-align: center;
}
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    width: 100% !important;
}

fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'] .sipocombo-span-icon{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

fieldset .siposearchable-select,
fieldset select.dynamic-form-dropdown{
    border: none;
    width: 100% !important;
}
fieldset .siposearchable-select > div {
    width: 100%!important;
    padding-top: 5px;
    margin: 0px !important;
    transform: scaleX(1.0059991);
}
fieldset.dynamic-form-fieldset fieldset.dynamic-form-fieldset{
    width: 100% !important;
}



.SiPo-FORM .dynamic-form-previewimage {
    /* upload image preview element */
    display: none;
    width: auto;
    height: auto;
    max-width: 30%;
    aspect-ratio: 1/1;
    border: solid 4px #e0e0e0;
    object-fit: contain;
    background: #e0e0e0;
    margin: 20px auto;
}
.SiPo-FORM .dynamic-form-previewimage[src*='data:image']{
    /* upload image preview img element */
    display: block !important;
}

.SiPo-FORM div table .dynamic-form-label-caption, 
.siposearchable-select a span:nth-of-type(1){
    /* custom select options caption */
    font-size: 16px;
    padding-right: 0 !important;
}
fieldset>table .FormField.dynamic-form-radiobutton-list{
    /* radio buttons wrapper */
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}
fieldset>table .FormField.dynamic-form-radiobutton-list input[type='checkbox']+label,
fieldset>table .FormField.dynamic-form-radiobutton-list input[type='radio']+label{
    /* radio buttons and checkbox label horizontal alignment */
    margin-left: 15px;
    margin-right: 5px;
}
fieldset>table input[type='checkbox']+label,
fieldset>table input[type='radio']+label{
    /* radio buttons and checkbox label vertical alignment */
    margin-bottom: 0;
}
fieldset>table input,
fieldset>table div[class*='select'],
fieldset>table select,
fieldset .siposearchable-select,
fieldset .siposearchable-select input,
.captcha-fieldset input,
fieldset>table div[class*='select']>div,
fieldset>table div [class*='dynamic-form-textbox-datetime'].dynamic-form-textbox,
fieldset>table textarea{
    /* field label */
    border: solid 1px #e7e7e7;
    border-radius: 6px;
}
fieldset>table div [class*='dynamic-form-textbox-datetime']+input[type='image']{
    border-radius: 0;
}


.siposearchable-select div ul li.option-hover{
    background-color: #858585;
}
fieldset>table>tbody>.dynamic-form-tr>td:not([colspan="2"])>div[class*='select']>div{
    /* division inside of custom select panel, this div holds inner input for user to filter options */
    border-radius: 0 0 3px 3px;
}
.dynamic-form-wizard-navigationTable-finish-td{
    /* finish/send button wrapper */
    text-align: center !important;
}
.dynamic-form-wizard-navigationTable-finish .dynamic-form-button-finishcomplete,
.FormButton{
    /* Send Button */
    min-width: 100px;
    margin: 25px 0 !important;
    transition: 0.6s;
    font-size: 16px;
    padding: 8px 15px;
}
div[id*='NavigationButtons'][class]{
    width: 100% !important;
}
div[id*='NavigationButtons'][class] .FormButton{
    /* Some Naked Division Who Has Search Button In It,, It's Button ! */
    margin-top: -10px !important;
    margin-bottom: 75px !important;
}
.keep-br br{
    display: block !important;
}
.SiPo-FORM .form-register-wrapper,
.SiPo-FORM .form-register-wrapper table{
    width: 100%;
    margin-left: auto !important;
    margin-right: 0 !important;
}
/********************************/
/******                    ******/
/******   Captcha  Codes   ******/
/******                    ******/
/********************************/
.captcha-fieldset span[id*='CaptchaImage']{
    border: none !important;
}
.captcha-fieldset{
    /* captcha fieldset element, this class will be added to element by our written form script */
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* rtl */
    text-align: right;
}
.captcha-fieldset img{
    /* Captcha Picture */
    /* we have a more powerful selector and we HAVE to use html for it, in general case it's useless */
    margin: 5px !important;
    height: 50px !important;
}
.captcha-fieldset .refresh-icon{
    /* this is an empty span inside captcha fieldset, i will use this to load my icon */
    order: 1;
    margin-left: auto;
    margin-right: 5px;
}
.errorMessageCaptchaValidator{
    /* hidden validator for captcha */
    order: 3;
    width: 100%;
}
.captcha-fieldset .refresh-icon::before{
    /* my captcha icon */
    content: '';
    display: block;
    width: 60px;
    height: 50px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
}
.captcha-fieldset .RefreshStyle{
    /* this is the real ugly icon from portal, i'm gonna make this transparent but not hidden */
    /* because this is the real input element of re-captcha i have to keep this on page */
    width: 60px !important;
    height: 50px !important;
    order: 2;    
    opacity: 0.6;
    background: url('../img/refresh.svg');
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}
.captcha-fieldset input[id*='RefreshButton']{
    /* display: none; */
}
.captcha-fieldset input[id*='InputTextBox']{
    border-radius: 6px 0 0 6px;
}
    
[id*='CaptchaControl_CaptchaImag']{
    /* captcha span (contains image) has black ugly border */
    border: none !important;
    height: 50px;
}
.captchaTextBox{
    /* capcha input */
    height: 50px;
    border-radius: 3px 0 0 3px;
    padding: 0 10px;
    font-size: 16px;
}
@media only screen and (max-width: 420px){
    [id*='CaptchaControl_CaptchaImag']{
        /* Span Contains Captcha Picture */
        width: 100px !important;
    }
}
/********************************/
/******                    ******/
/******   Captcha  Codes   ******/
/******                    ******/
/********************************/

/********************************/
/******                    ******/
/******     Ajax Loader    ******/
/******                    ******/
/********************************/
.loader-parent{
    position: relative;
}
.EditForm_UpdateProgress,
.Form_UpdateProgress{
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/********************************/
/******                    ******/
/******     Ajax Loader    ******/
/******                    ******/
/********************************/
/**************************************/
/******                          ******/
/******     Date Picker Start    ******/
/******                          ******/
/**************************************/
.ui-datepicker.ui-widget *{
    /* all elements in datepicker */
    font-family: 'iransans';
    text-align: center;
}
.ui-datepicker.ui-widget>font>center:last-child{
    /* extra space at the bottom of datepicker */
    display: none;
}
.ui-datepicker.ui-widget>font>br:last-of-type{
    /* extra space at the bottom of datepicker */
    display: none;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
    /* select element for year and month */
    width: 45%;
    border: solid 1px #3332;
    padding: 3px;
    border-radius: 5px;
    margin: 2px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
    /* next/prev month arrows */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
/**************************************/
/******                          ******/
/******      Date Picker  End    ******/
/******                          ******/
/**************************************/
@media only screen and (max-width: 1199px){
    .SiPo-FORM .dynamic-form-fileupload,
    .dynamic-form-fileupload{
        width: 89% !important;
    }
}
@media only screen and (max-width: 1023px){
    .SiPo-FORM div table:not(.pagination) tbody td{
        display: inline-block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .SiPo-FORM div table.pagination tbody td{
        width: auto !important;
    }
    .SiPo-FORM fieldset.dynamic-form-fieldset {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
    .SiPo-FORM table:not(.pagination) tbody tr.row-mob-hidden~tr td[data-th]>a:first-child::before,
    .SiPo-FORM table:not(.pagination) tbody tr.row-mob-hidden~tr td[data-th]>span:first-child::before{
        content: " : ";
    }
    .SiPo-FORM div table:not(.pagination) tbody tr td[data-th]:before{
        content: "" !important;
    }
    .SiPo-FORM div table:not(.pagination) div.MainUpdatePanel table.dg tbody tr td[data-th]:before{
        /******     List Tables    ******/
        /* for responsive list tables i can't use overflow so i have to choose old data-th way */
        content: attr(data-th) !important;
    }
    .SiPo-FORM div table:not(.pagination) tbody tr.row-mob-hidden~tr td[data-th]:before{
        content: attr(data-th) "" !important;
    }
}
@media only screen and (max-width: 991px){
    .SiPo-FORM div table:not(.Table-pagination) tbody td{
        /* display: block !important; */
    }
    .SiPo-FORM .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime /* date picker input  */{
        /* date picker input */
        width: 100%;
    }
    td:empty{
        display: none !important;
    }
    .SiPo-FORM div table tbody td{
        /* ltr */
        /* text-align: left !important; */
        /* rtl */
        text-align: right !important;
    }
}
@media only screen and (max-width: 767px){
    .SiPo-FORM .dynamic-form-fileupload,
    .dynamic-form-fileupload{
        width: 86% !important;
    }
}
@media only screen and (max-width: 460px){
    .SiPo-FORM .dynamic-form-fileupload,
    .dynamic-form-fileupload{
        width: 82% !important;
    }
}
@media only screen and (max-width: 390px){
    .SiPo-FORM .dynamic-form-fileupload,
.dynamic-form-fileupload{
        width: 77% !important;
    }
}


/********************************/
/******                    ******/
/******  Normalize Portal  ******/
/******                    ******/
/********************************/

/* #region one_column_two_row */
/*******************************************/
/******                               ******/
/******   Start OneColumn TwoRow      ******/
/******      یک ستون دو سطر          ******/
/******                               ******/
/*******************************************/
fieldset[elementview="TwoRow"][elementviewcount="1"] .siposearchable-select input{
    width: 70%;
    padding: 7px;
    margin: 0 !important;
    margin-top: 5px !important;
}
fieldset[elementview="TwoRow"][elementviewcount="1"] span.dynamic-form-label-caption{
    margin-top: 30px;
    display: block;
    font-size: 14px;
}
fieldset[elementview="TwoRow"][elementviewcount="1"] legend.dynamic-form-legend:empty{
    display: none;
}
fieldset[elementview="TwoRow"][elementviewcount="1"],
.dynamic-form-wizard-navigationTable-finish{
    width: 70%;
    margin: auto !important;
}

fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr{
    display: flex;
    flex-wrap: wrap;
}
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td{
    /* field label and input */
    width: 100%;
    text-align: right;
    position: relative;
}
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
    /* field label */
    text-align: right;
}
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input:not([type='image']):not([type='file']),
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    /* field label */
    width: 100% !important;    
}
fieldset[elementview="TwoRow"][elementviewcount="1"] .ui-datepicker-trigger{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input[type='file'],
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input[type='image']{
    padding: 10px 5px;
}
fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select']>div{
    width: 100% !important;
}

fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-validator{
    position: absolute !important;
    top: -50px !important;
    left: 0 !important;
    background-position: right 90% !important;
    padding: 0 !important;
    background-color: transparent !important;
    padding-right: 20px !important;
}
fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-validator[style='display: inline;']{
    display: inline-block !important;
}
fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-validator br{
    display: none;
}
@media only screen and (max-width: 991px){
    fieldset[elementview="TwoRow"][elementviewcount="1"],
    fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-wizard-navigationTable-finish{
        width: 70%;
    }
}
@media only screen and (max-width: 767px){
    fieldset[elementview="TwoRow"][elementviewcount="1"],
    fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-wizard-navigationTable-finish{
        width: 80%;
    }
    fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input:not([type='image']):not([type='file']),
    fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
    fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
    fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
    fieldset[elementview="TwoRow"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
        /* fields */
        width: 100% !important;        
    }
}
@media only screen and (max-width: 575px){
    fieldset[elementview="TwoRow"][elementviewcount="1"],
    fieldset[elementview="TwoRow"][elementviewcount="1"] .dynamic-form-wizard-navigationTable-finish{
        width: 95%;
    }
}
/*******************************************/
/******                               ******/
/******     End  OneColumn Two Row    ******/
/******                               ******/
/*******************************************/
/* #endregion one_column_two_row */
/* #region two_column_one_row */
/*******************************************/
/******                               ******/
/******   Start Two Column One Row    ******/
/******        دو ستون یک ستون       ******/
/******                               ******/
/*******************************************/
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
    /* Label Td */
    width: 17% !important;
    text-align: right !important;
    padding-left: 10px;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"]){
    /* Input Td */
    width: 83% !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"],
.dynamic-form-wizard-navigationTable-finish{
    /* width: 70%; */
    width: 100%;
    margin-left: auto !important;
    margin-right: 0 !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select']{
    padding: 5px !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input:not([type='image']):not([type='file']),
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    /* field label */
    margin-bottom: 10px !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
    vertical-align: initial;
    transform: translateY(15px);
}

fieldset[elementview="TwoColumn"][elementviewcount="1"] .dynamic-form-validator{    
    text-align: left;
    width: 50%;
    margin-right: auto;
    margin-top: -6px;
    margin-bottom: 15px;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"] .dynamic-form-validator[style='display: inline;']{
    display: block !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"] .dynamic-form-validator br{
    display: none !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
fieldset[elementview="TwoColumn"][elementviewcount="1"] input.dynamic-form-textbox{
    /* Normalize width:98% From Portal */
    width: 100% !important;
}

@media only screen and (max-width: 1199px){
    fieldset[elementview="TwoColumn"][elementviewcount="1"],
    .dynamic-form-wizard-navigationTable-finish{
        width: 100%;
        margin-left: auto !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
        /* Field Labels */
        width: 22% !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"]){
        /* Input Td */
        width: 78% !important;
    }
}
@media only screen and (max-width: 1023px){
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
        transform: translateY(0);
    }
}
@media only screen and (max-width: 991px){    
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
        vertical-align: middle;
        transform: translateY(0px);
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
        /* Label Td */
        text-align: right !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"]){
        width: 100% !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"],
    .dynamic-form-wizard-navigationTable-finish{
        width: 100% !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input:not([type='image']):not([type='file']),
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
        /* field label */
        margin-bottom: 20px !important;
    }
}
@media only screen and (max-width: 767px){
    fieldset[elementview="TwoColumn"][elementviewcount="1"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
        /* Field Labels */
        width: 100% !important;
    }
}

/*******************************************/
/******                               ******/
/******    End Two Column One Row     ******/
/******        دو ستون یک ستون       ******/
/******                               ******/
/*******************************************/
/* #endregion two_column_one_row */
/* #region two_column_two_row */
/*******************************************/
/******                               ******/
/******   Start Two Column Two Row    ******/
/******        دو ستون سطر           ******/
/******                               ******/
/*******************************************/
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(odd):not([colspan="2"]){
    text-align: right;
    padding-left: 10px;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    /* width: calc(100% - 4px) !important; */
    width: 100% !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input:not([type='image']):not([type='file']),
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    /* field label */
    /* margin-bottom: 20px !important; */
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    height: 150px;
}
.SiPo-FORM div table fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-label-caption,fieldset[elementview="TwoColumn"][elementviewcount="2"] .siposearchable-select a span:nth-of-type(1){
    color: #2c2c2c;
    font-size: 15px;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-validator br{
    display: none !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-validator{    
    margin-left: auto;
    margin-top: -10px;
    /* width: 70%; */
    margin-right: 4px;
    margin-bottom: 15px;
    background-position: 98% center;
    text-align: right;
    padding: 10px 30px 10px 10px;
    border-radius: 5px;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td td{
    position: relative;
    padding: 0 5px;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td select,
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td textarea,
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td input:not([type='image']):not([type='radio']):not([type='checkbox']){
    width: 100% !important;
}

fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td input[type='image']{
    /* datepicker icon */
    position: absolute;
    top: 50% !important;
    /* ltr */
    /* right: 10px; */
    /* left: unset; */
    /* rtl */
    left: 10px;
    right: unset;
    transform: translateY(-15%);
    filter: hue-rotate(225deg) brightness(0.4);
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-validator[style='display: inline;']{
    display: block !important;
    margin: 5px;
}
/*******************************************/
/******                               ******/
/******    End  Two Column Two Row    ******/
/******        دو ستون سطر           ******/
/******                               ******/
/*******************************************/
/* #endregion two_column_two_row */






.SiPo-FORM .dynamic-form-previewimage {
    display: none;
    width: auto;
    height: auto;
    max-width: 30%;
    aspect-ratio: 1/1;
    border: solid 4px #e0e0e0;
    object-fit: contain;
    background: #e0e0e0;
    margin: 20px auto;
}
.SiPo-FORM .dynamic-form-previewimage[src*='data:image']{
    display: block !important;
}


/***********************/
.SiPo-FORM div table .dynamic-form-label-caption, 
.siposearchable-select a span:nth-of-type(1){
    font-size: 15px;
    padding-right: 0 !important;
    color: #2c2c2c;
}
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select'],
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
fieldset .siposearchable-select,
fieldset .siposearchable-select input,
.captcha-fieldset input,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select']>div,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea{
    /* field label */
    border: solid 1px #e7e7e7;
    border-radius: 6px;
    font-size: 15px;
}
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>input::placeholder,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>select,
fieldset .siposearchable-select input::placeholder,
.captcha-fieldset input::placeholder,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div .dynamic-form-textbox-datetime-georgian.dynamic-form-textbox::placeholder,
fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>textarea::placeholder{
    /* field label placeholders*/
    font-size: 14px;
}
.SiPo-FORM fieldset td textarea{
    padding: 10px !important;
}

fieldset>table>tbody>.dynamic-form-tr>td:nth-child(even):not([colspan="2"])>div[class*='select']>div{
    border-radius: 0 0 3px 3px;
}
.dynamic-form-wizard-navigationTable-finish-td{
    text-align: center !important;
}
.dynamic-form-wizard-navigationTable-finish .dynamic-form-button-finishcomplete,
.FormButton{
    /* Send Button */
    /* min-width: 100px;
    margin: 25px 0 !important;
    transition: 0.6s;
    background: #fff;
    color: #0F3265;
    outline: solid 1px #0F3265;
    font-size: 16px;
    padding: 8px 15px;
    outline-offset: 0px;
    border: solid 1px transparent !important;    
    border-radius: 7px; */

    /* egfi */
    background: #0F3265;
    min-width: 150px;
    display: inline-block;
    padding: 8px 15px;
    text-align: center;
    color: #fff;
    border-radius: 30px !important;
    position: relative;
    overflow: hidden;
    margin: auto;
}
div[id*='NavigationButtons'][class]{
    width: 100% !important;
}
div[id*='NavigationButtons'][class] .FormButton{
    /* Some Naked Division Who Has Search Button In It,, It's Button ! */
    margin-top: 0px !important;
    margin-bottom: 75px !important;
}
.dynamic-form-wizard-navigationTable-finish .dynamic-form-button-finishcomplete:hover,
.FormButton:hover{
    /* Send Button Hover */
    outline-offset: 4px;
    outline-color: transparent;
    color: #fff !important;
    background-color: #3ed7e5;
    border-color: #0F3265 !important;
}
.siposearchable-select div ul li:hover{
    background: #000;
    color: #fff
}



/* #endregion register_forms */

/* #region list_forms */
.MainUpdatePanel>.PartHeader{
    width: 98%;
    text-align: left;
}

.SiPo-FORM table.dg:not(.dynamicform-table-show-rows),
.auto-tab table.dg:not(.dynamicform-table-show-rows){
    margin-bottom: 15px !important;
}

.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"]),
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"]),
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"]),
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"]),
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"]),
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"]){
    /* download link */
    /* Edit link */
    /* Remove link */
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-top: 5px;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"])::after,
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"])::after,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"])::after,
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"])::after,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"])::after,
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"])::after{
    /* Download Icon */
    /* Edit link */
    /* Remove link */
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    font-family: 'icon family here';
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"]) img[alt="Download"],
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"]) img[alt="Download"],
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"]) img[alt="حذف"],
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"]) img[alt="حذف"],
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"]) img[alt="ويرايش"],
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"]) img[alt="ويرايش"]{
    /* Download Image */
    /* Edit Image */
    /* Remove Image */
    display: none;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"])::after,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="ويرايش"])::after{
    /* Edit Icon */
    /* content: "\e916"; */
    content: '';
    background: url('../img/edit.png');
    background-size: cover;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"])::after,
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="حذف"])::after{
    /*     Remove  Icon */
    content: "\e915" !important;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"])::after,
.auto-tab table.dg:not(.dynamicform-table-show-rows) a:has(img[alt="Download"])::after{
    /*     Download  Icon */
    content: "\e949" !important;
    font-family: 'icon';
}

.dg:not(.dynamicform-table-show-rows)+table .Title{
    /* Button Under Table Lists */
    min-width: 100px;
    margin: 0 !important;
    transition: 0.6s;
    background: #ebebeb;
    color: #0F3265;
    outline: solid 1px #0F3265;
    font-size: 16px;
    padding: 8px 15px;
    outline-offset: 0px;
    border: solid 1px transparent !important;    
    border-radius: 7px;
    display: inline-block;
    text-align: center;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th,.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type td,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th,.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type td{
    /* Header Of Table */
    background-color: #ebebeb;
    border:none !important;
    border-bottom: solid 1px #0F3265 !important;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 8px !important;    
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th img,
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th img,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type td img,
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type td img,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGItem td img,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGItem td img,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGAlt td img,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGAlt td img{
    /* All Td Th Elements's Images */
    width: auto !important;
    aspect-ratio: 1/1;
    max-width: 100%;
}

.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th img[src="/images/blank.gif"],tr:first-of-type td img[src="/images/blank.gif"],
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th img[src="/images/blank.gif"],tr:first-of-type td img[src="/images/blank.gif"]{
    display: none !important;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGItem td,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGItem td,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGAlt td,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGAlt td{
    /* All Table Cells */
    border: none !important;
    border-bottom-width: 1px;
    border-bottom-color: #e01d2342 important;
    border-bottom-style: solid;
    text-align: center;
    padding: 8px 5px;
    font-size: 14px;
    word-break: break-word;
}
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGItem td a,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGItem td a,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGAlt td a,
.auto-tab table.dg:not(.dynamicform-table-show-rows) .DGAlt td a{
    /* All Table Cells Links*/
    color: #0F3265 !important;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) ,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) {
    border-radius: 7px;
    box-shadow: 0 0 0 1px #0F3265;
    overflow: hidden;
    width: 80%;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th:first-of-type,.auto-tab table.dg:not(.dynamicform-table-show-rows)  tr:first-of-type td:first-of-type,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th:first-of-type,.SiPo-FORM table.dg:not(.dynamicform-table-show-rows)  tr:first-of-type td:first-of-type{
    border-radius: 0 !important;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th:last-of-type,.auto-tab table.dg:not(.dynamicform-table-show-rows)  tr:first-of-type td:last-of-type,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type th:last-of-type,.SiPo-FORM table.dg:not(.dynamicform-table-show-rows)  tr:first-of-type td:last-of-type{
    border-radius: 0 !important;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr.DGAlt,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr.DGAlt{
    background-color: #e4e4e454 !important;
}
.auto-tab table.dg:not(.dynamicform-table-show-rows) tr.DGItem,
.SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr.DGItem{
    background-color: #fff !important;
}
#tblListForm>tbody>tr:last-child>td{
    /* the headers of result table is the last row of form table */
    text-align: right;
}
[id*='SortOptionContent']{
    /* sort result table element */
    display: inline-block;
    width: 100%;
    padding: 10px !important;
}
[id*='SortOptionContent'] input[type=checkbox],
[id*='SortOptionContent'] input[type=radio]{
    transform: translateY(5px);
}
[id*='SortOptionContent']+div[style]{
    background-color: transparent !important;
    text-align: center !important;
    padding: 0px !important;
}
[id*='SortOptionContent']+div[style]>.FormButton{
    min-width: 50px !important;
    padding: 4px 13px !important;
    margin: 5px 0 10px !important;
    font-size: 13px;
}

[id*='ExcelPanel']{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
}
[id*='ExcelPanel'] a~a{
    min-width: 100px;
    margin: 5px 0 !important;
    transition: 0.6s;
    color: #333;
    font-size: 16px;
    padding: 8px 15px;
    outline-offset: 0px;
    border-radius: 6px;
    border: solid 1px #333 !important;
    margin-left: 10px;
    display: inline-block;
}
[id*='ExcelPanel'] a~a:hover{
    color: #e0e0e0;
    background-color: #333;
}
[id*='ExcelPanel'] a~a::after{
    /* download icon */
    content: "\e949";
    font-family: 'icon';
    display: inline-block;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    vertical-align: sub;
    transition: 0.6s;
}
[id*='ExcelPanel'] a~a:hover::after{
    filter: invert(1);
}

@media only screen and (max-width: 1023px){
    /* tr{
        display: table-row !important;
    } */
    [id*='SortOptionContent'] tr {
        display: flex;
    }
    [id*='SortOptionContent'] tr td{
        text-align: center;
    }
    .SiPo-FORM [id*='SortOptionContent'] tr>td:nth-child(3){
        flex-shrink: 0;
        width: 50% !important;
    }
}
@media only screen and (max-width: 991px){
    /* .SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr{
        display: initial !important;
    } */
    .SiPo-FORM table.dg tr.DGItem{
        height: auto;
        width: 100% !important;
    }
    .auto-tab table.dg:not(.dynamicform-table-show-rows):not(.dynamicform-content-table-row) ,
    .SiPo-FORM table.dg:not(.dynamicform-table-show-rows):not(.dynamicform-content-table-row) {
        width: 100%;
        overflow: auto;
        /* egfi only */
        min-width: 1000px;
    }
    .SiPo-FORM #SearchResults table.dg>tbody{
        display: block;
    }
    .SiPo-FORM table.dg:not(.dynamicform-table-show-rows) tr:first-of-type{
        display: none !important;
    }
    .SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGItem td,
    .SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGAlt td{
        padding-right: 10px;
        padding-left: 10px;
    }
    .SiPo-FORM table.dg:not(.dynamicform-table-show-rows) .DGAlt td{
        background-color: #e4e4e454 !important;
    }
    .auto-tab tr{
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
    }
    .auto-tab tr:first-child{
        /* Headers In Mobile List View Shouldn't Be Visible */
        display: none !important;
    }
    .auto-tab tr>th,
    .auto-tab tr>td{
        width: 100% !important;
        text-align: right !important;
    }

}
/* #endregion list_forms */

/* #region show_forms */
.FormPageHeader{
    display: none;
}
.dynamicform-table-command-bar{
    display: none;
}

.auto-tab legend,
.SiPo-FORM legend{
    font-size: 16px;
    text-align: right;
    padding-right: 5px;
}
.MainUpdatePanel>.PartHeader{
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}
.SiPo-FORM table.dynamicform-table-Content{
    border-radius: 7px;
    box-shadow: 0 0 0 1px #0F3265;
    overflow: hidden;
    margin-top: 10px;
}
.SiPo-FORM table.dynamicform-table-Content td span:first-child{
    /* Form-Caption */
    padding-left: 10px;
    margin: 10px 0;
}
.SiPo-FORM table.dynamicform-table-Content,
.auto-tab table.dynamicform-table-Content{
    margin-bottom: 15px !important;
}

.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="Download"]),
.auto-tab table.dynamicform-table-Content a:has(img[alt="Download"]),
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="حذف"]),
.auto-tab table.dynamicform-table-Content a:has(img[alt="حذف"]),
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="ويرايش"]),
.auto-tab table.dynamicform-table-Content a:has(img[alt="ويرايش"]){
    /* download link */
    /* Edit link */
    /* Remove link */
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-top: 5px;
    padding: 0 5px;
}
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="Download"])::after,
.auto-tab table.dynamicform-table-Content a:has(img[alt="Download"])::after,
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="حذف"])::after,
.auto-tab table.dynamicform-table-Content a:has(img[alt="حذف"])::after,
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="ويرايش"])::after,
.auto-tab table.dynamicform-table-Content a:has(img[alt="ويرايش"])::after{
    /* Download Icon */
    /* Edit link */
    /* Remove link */    
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    font-family: 'icon';
    background-size: 100%;
    padding: 0 5px;
}
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="Download"]) img[alt="Download"],
.auto-tab table.dynamicform-table-Content a:has(img[alt="Download"]) img[alt="Download"],
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="حذف"]) img[alt="حذف"],
.auto-tab table.dynamicform-table-Content a:has(img[alt="حذف"]) img[alt="حذف"],
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="ويرايش"]) img[alt="ويرايش"],
.auto-tab table.dynamicform-table-Content a:has(img[alt="ويرايش"]) img[alt="ويرايش"]{
    /* Download Image */
    /* Edit Image */
    /* Remove Image */
    display: none;    
}
.auto-tab table.dynamicform-table-Content a:has(img[alt="ويرايش"])::after,
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="ويرايش"])::after{
    /* Edit Icon */
    content: "\e916";
    padding: 0 5px;
}
.auto-tab table.dynamicform-table-Content a:has(img[alt="حذف"]) img[alt="حذف"],
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="حذف"]) img[alt="حذف"]{
    /*     Remove  Icon */
    content: "\e915";
    padding: 0 5px;
}
.SiPo-FORM table.dynamicform-table-Content a:has(img[alt="Download"])::after,
.auto-tab table.dynamicform-table-Content a:has(img[alt="Download"])::after{
    /*     Download  Icon */
    content: "\e949" ;
    padding: 0 5px;
}


.dynamicform-table-Content+table .Title{
    /* Button Under Table Lists */
    min-width: 100px;
    margin: 0 !important;
    transition: 0.6s;
    background: #ebebeb;
    color: #0F3265;
    outline: solid 1px #0F3265;
    font-size: 16px;
    padding: 8px 15px;
    outline-offset: 0px;
    border: solid 1px transparent !important;    
    border-radius: 7px;
    display: inline-block;
    text-align: center;
}
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type th img,
.auto-tab table.dynamicform-table-Content tr:first-of-type th img,
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type td img,
.auto-tab table.dynamicform-table-Content tr:first-of-type td img,
.SiPo-FORM table.dynamicform-table-Content   td img,
.auto-tab table.dynamicform-table-Content   td img,
.SiPo-FORM table.dynamicform-table-Content  td img,
.auto-tab table.dynamicform-table-Content  td img{
    /* All Td Th Elements's Images */
    width: auto !important;
    aspect-ratio: 1/1;
    max-width: 100%;
}

.auto-tab table.dynamicform-table-Content tr:first-of-type th img[src="/images/blank.gif"],
.auto-tab table.dynamicform-table-Content tr:first-of-type td img[src="/images/blank.gif"],
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type th img[src="/images/blank.gif"],
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type td img[src="/images/blank.gif"]{
    display: none !important;
}
.SiPo-FORM table.dynamicform-table-Content td,
.auto-tab table.dynamicform-table-Content td,
.SiPo-FORM table.dynamicform-table-Content td,
.auto-tab table.dynamicform-table-Content td{
    /* All Table Cells */
    border: none !important;
    border-bottom: solid 1px #e01d2357 !important;
    text-align: center;
    padding: 8px 5px;
    font-size: 14px;
}
.SiPo-FORM table.dynamicform-table-Content td a,
.auto-tab table.dynamicform-table-Content td a,
.SiPo-FORM table.dynamicform-table-Content  td a,
.auto-tab table.dynamicform-table-Content  td a{
    /* All Table Cells Links*/
    color: #0F3265 !important;
}
.auto-tab table.dynamicform-table-Content ,
.SiPo-FORM table.dynamicform-table-Content {
    border-radius: 7px;
    box-shadow: 0 0 0 1px #0F3265;
    overflow: hidden;
}
.auto-tab table.dynamicform-table-Content tr:first-of-type th:first-of-type,
.auto-tab table.dynamicform-table-Content  tr:first-of-type td:first-of-type,
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type th:first-of-type,
.SiPo-FORM table.dynamicform-table-Content  tr:first-of-type td:first-of-type{
    border-radius: 0 !important;
}
.auto-tab table.dynamicform-table-Content tr:first-of-type th:last-of-type,
.auto-tab table.dynamicform-table-Content  tr:first-of-type td:last-of-type,
.SiPo-FORM table.dynamicform-table-Content tr:first-of-type th:last-of-type,
.SiPo-FORM table.dynamicform-table-Content  tr:first-of-type td:last-of-type{
    border-radius: 0 !important;
}
.auto-tab table.dynamicform-table-Content tr:nth-child(odd),
.SiPo-FORM table.dynamicform-table-Content tr:nth-child(odd){
    background-color: #e4e4e454 !important;
}
.auto-tab table.dynamicform-table-Content tr,
.SiPo-FORM table.dynamicform-table-Content tr{
    background-color: #fff !important;
}

/**************************************/
/******                          ******/
/******     List Tables Start    ******/
/******                          ******/
/**************************************/
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr{
    /* List Table Rows */
    display: grid;
    grid-template-columns: repeat(13 , 1fr);
    align-items: stretch;
    height: auto;
    width: 100% !important;
    /* border-bottom: solid 1px gray; */
}
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr th,
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td{
    width: 100% !important;
    border-bottom: none !important;
}
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr~tr{
    /* All Rows Except First Row */
    padding-top: 8px;
    padding-bottom: 8px;
}
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr:last-child{
    border: none;
}
.SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td:empty{
    /* table orders are ruined because of this, user might leave some inputs empty we shouldn't remove their place and cause others to fill that place */
    display: block !important;
}
.SiPo-FORM [id*='SearchPanel'] td>span:first-child:not(.FormCaption){
    margin-left: 12px;
    margin-right: 5px;
}
.SiPo-FORM [id*='SearchPanel'] .FormButtonNoWidth,
.SiPo-FORM [id*='SearchPanel'] .ui-datepicker-trigger,
.SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .FormButtonNoWidth, .dynamic-form-td tbody>tr>td .ui-datepicker-trigger{
    left: 20px !important;
}
.SiPo-FORM [id*='SearchPanel']  .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime{
    width: 94%;
}
.SiPo-FORM [id*='SearchPanel']  .dynamic-form-td tbody>tr>td .ui-datepicker-trigger{
    border-radius: 3px;
}
@media only screen and (max-width: 1199px){
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
        width: 89.5%;
    }
}
@media only screen and (max-width: 1023px){
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
        width: 93.5%;
        margin: 7px 0;
    }
}
@media only screen and (max-width: 768px){
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
        width: 91.5%;
    }
}
@media only screen and (max-width: 576px){
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
        width: 90%;
    }
}
@media only screen and (max-width: 400px){
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .dynamic-form-filter-datetime {
        width: 100%;
    }
    .SiPo-FORM [id*='SearchPanel'] .FormButtonNoWidth,
    [id*='SearchPanel'] .ui-datepicker-trigger,
    .SiPo-FORM [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .FormButtonNoWidth,
    [id*='SearchPanel'] .dynamic-form-td tbody>tr>td .ui-datepicker-trigger{
        top: 50% !important;
    }
}

/**************************************/
/******                          ******/
/******     List Tables End      ******/
/******                          ******/
/**************************************/
@media only screen and (max-width: 1023px){
    /*#region data-th way*/
    /**************************************/
    /******                          ******/
    /******         data-th way      ******/
    /******                          ******/
    /**************************************/
    /* for responsive list tables i can't use overflow so i have to choose old data-th way */
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr:first-child{
        /* table captions should be hidden in this responsive method, they'll be added to elements as data-th */
        display: none;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr{
        /* List Table Rows */
        grid-template-columns: 1fr;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr~tr{
        padding: 0;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td{
        display: flex !important;
        padding: 8px 15px !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        border-bottom-color: gray ;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td> span::before{
        content: " : "
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td> span[dir='ltr']::before{
        content: unset
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td> span[dir='ltr']::after{
        content: " : "
    }
    /**************************************/
    /******                          ******/
    /******         data-th way      ******/
    /******                          ******/
    /**************************************/
    /*#endregion data-th way*/
    /* #region overflow way */
    /**************************************/
    /******                          ******/
    /******        overflow way      ******/
    /******                          ******/
    /**************************************/
    .SiPo-FORM .MainUpdatePanel table.dg:not(.dynamicform-table-show-rows) tr:first-of-type{
        display: grid !important;
    }
    .SiPo-FORM>div>table,
    /* first table of SiPo-FORM */
    .SiPo-FORM>div>table>tbody,
    /* first tbody of SiPo-FORM */
    .SiPo-FORM>div>table>tbody>tr
    /* first tr elements of SiPo-FORM */
    {
        display: block;
        width: 100%;
    }
    .SiPo-FORM  .MainUpdatePanel{
        max-width: 100%;
        overflow: auto;
        padding: 0 2px;
    }
    .inner-wrapper .SiPo-FORM  .MainUpdatePanel>table{
        width: 1200px !important;
        min-width: 1200px !important;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td{
        display: block !important;
    }
    .SiPo-FORM .MainUpdatePanel table:not(.pagination) tbody tr.row-mob-hidden~tr td[data-th]>a:first-child::before,
    .SiPo-FORM .MainUpdatePanel table:not(.pagination) tbody tr.row-mob-hidden~tr td[data-th]>span:first-child::before{
        content: unset !important;
    }
    .SiPo-FORM  .MainUpdatePanel .dg>tbody>tr td> span::after{
        content: unset !important;
    }
    .SiPo-FORM div table:not(.pagination) div.MainUpdatePanel table.dg tbody tr td[data-th]:before{
        content: unset !important;
    }
    /**************************************/
    /******                          ******/
    /******        overflow way      ******/
    /******                          ******/
    /**************************************/
    /* #endregion overflow way */
}
@media only screen and (max-width: 991px){
    
    .SiPo-FORM :not(.MainUpdatePanel)>table.dg:not(.dynamicform-table-show-rows) tr:first-of-type{
        /******     List Tables      ******/
        display: grid !important;
    }
    .SiPo-FORM table.dynamicform-table-Content tr{
        display: initial !important;
    }
    .SiPo-FORM table.dynamicform-table-Content tr:first-of-type{
        display: none !important;
    }
    .SiPo-FORM table.dynamicform-table-Content td,
    .SiPo-FORM table.dynamicform-table-Content  td{
        padding-right: 10px;
        padding-left: 10px;
    }
    .SiPo-FORM table.dynamicform-table-Content  td{
        background-color: #e4e4e454 !important;
    }
    .SiPo-FORM table.dynamicform-table-Content  td:nth-child(odd){
        background-color: #ebebeb !important;
    }
    .SiPo-FORM table.dynamicform-table-Content  td:nth-child(even){
        background-color: #ebebeb !important;
    }
    .auto-tab table.dynamicform-table-Content tr{
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
    }
    .auto-tab table.dynamicform-table-Content tr:first-child{
        /* Headers In Mobile List View Shouldn't Be Visible */
        display: none !important;
    }
    .auto-tab table.dynamicform-table-Content tr>th,
    .auto-tab table.dynamicform-table-Content tr>td{
        width: 100% !important;
        text-align: right !important;
    }

    .SiPo-FORM table.dynamicform-table-Content tr:first-of-type{
        display: none !important;
    }
    /********************************************************************************************************/
    /*        Fix Table In Table Problem, This Part Of Code Needs a Class Named "has-subform" To Work      */
    /********************************************************************************************************/
    .SiPo-FORM fieldset:not(.has-subform) table.dynamicform-table-Content tr:first-of-type{
        display: block !important;
    }
    .SiPo-FORM fieldset.has-subform table.dynamicform-table-Content tr tr:first-of-type,
    .SiPo-FORM fieldset.has-subform table.dynamicform-table-Content .dg tr tr:first-of-type{
        /* First tr elements are hidden in reponsive to prevent showing labels but */
        /* here it will make some tables to disappear at all! so i'm trying to prevent this */
        display: block !important;
    }
}
/* #endregion show_forms */


.ListData{
    display: flex;
    flex-wrap: wrap !important;
}

.SiPo-FORM .Table-pagination {
    margin-top: 15px !important;
}

/****************************/
/*        Login Style       */
/****************************/
.Login tr>td:first-child{
    display: none !important;
}
.LoginLink img{
    display: none;
}
.LoginLink::after{
    content: '';
    display: inline-block;
    margin: 0 !important;
    transition: 0.6s;
    background: url('../img/user.svg');
    background-size: 60%;
    background-position: top center;
    background-repeat: no-repeat;
    color: #0F3265;
    /* outline: solid 1px #0F3265; */
    font-size: 16px;
    padding: 8px 15px;
    outline-offset: 0px;
    /* border: solid 1px transparent;     */
    border-radius: 6px;
    filter: invert(1);
}
.LoginLink[href*='Logout']::after{
    background-image: url('../img/logout.svg');
}
.LoginLink:hover::after{    
    outline-offset: 4px;
    outline-color: transparent;
    color: #0F3265 !important;
    border-color: #aaa;
}

/****************************/
/*        Result Style      */
/****************************/
.actionDataLabelClass {
    margin: auto;
    display: block;
    width: 70%;
    text-align: center;
    font-size: 16px;
    margin: 15px auto !important;
}
.MainUpdatePanel,
.dynamicform-finish-label {
    padding: 30px !important;
    /*background: #dadadadb;*/
    display: inline-block;
/*    border-right: 5px solid #d6d6d6;*/
    font-size: 16px;
    font-weight: bold;
    color: #0F3265;
    text-align: right;
    min-width: 100%;
    margin: 15px 0 !important;
}
.MainUpdatePanel:has(table.dg>tbody>tr:empty){
    padding: 0px !important;
}
/***********************************************************************/
/***********************************************************************/
/*                                                                     */
/*                    Custom Style For Search Buttons                  */
/*                                                                     */
/***********************************************************************/
/***********************************************************************/
/*        This Requires Some JS Code :                                 */
/*                                                                     **


//input element should has search-input class or anything else you want
//search button element's FATHER (div) should has .searchbtn class or ...
//this jquery is also needed to find and arrange those elements

$(".search-input").parent().addClass("search-box-wrapper")
$(".search-box-wrapper").append( $(".searchbtn") )
$(".searchbtn").addClass("icon-search").find("input").val("")


**                                                                     */
/***********************************************************************/
/***********************************************************************/
.SiPo-FORM div table:not(.pagination) tbody td.search-box-wrapper ,
.search-box-wrapper{
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
fieldset[elementview="TwoColumn"][elementviewcount="1"] input.dynamic-form-textbox,
.search-input{
    /* first selector is present only because it's stronger than just search-input and search-input can't overwrite it*/
    width: 100% !important;
    flex-grow: 1;
}
div[id*='NavigationButtons'][class],
/* first selector is present only because it's stronger than just searchbtn and searchbtn can't overwrite it*/
.searchbtn{
    /* orphen buttens */
    height: 45px;
    top: -3px;
    margin: 10px auto;
}
@media only screen and (max-width: 991px){
    div[id*='NavigationButtons'][class], .searchbtn{
        top: -8px;
    }
}
.searchbtn:before {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 55%;
    transform: translate(0,-50%);
}
div[id*='NavigationButtons'][class] .searchbtn .FormButton,
.searchbtn input{
    position: absolute;
    padding: 10px 5px;
    top: 50%;
    right: 10px;
    width: 100%;
    height: 90%;
    min-width: 0;
    margin: 0 !important;
    transform: translateY(-50%);
}


/* #region nested-tales */
/********************************************************************************************************/
/*        Fix Table In Table Problem, This Part Of Code Needs a Class Named "has-subform" To Work      */
/********************************************************************************************************/
    
.has-subform td:empty,
.has-subform tr:empty,
.has-subform th:empty,
.has-subform table:empty,
.has-subform tbody:empty{
    /* hide any empty element (Note: In JS File We Already Tried To Remove These Garbages */
    display: none !important;
}
.auto-tab .has-subform  table.dynamicform-table-Content tr,
.SiPo-FORM .has-subform  table.dynamicform-table-Content tr,
.auto-tab .has-subform table.dynamicform-table-Content tr:nth-child(odd),
.SiPo-FORM .has-subform table.dynamicform-table-Content tr:nth-child(odd){
    /* remove striped color */
    background-color: transparent !important;
}
.SiPo-FORM .has-subform table.dynamicform-table-Content td,
.auto-tab .has-subform table.dynamicform-table-Content td,
.SiPo-FORM .has-subform table.dynamicform-table-Content td,
.auto-tab .has-subform table.dynamicform-table-Content td{
    /* remove lines between rows */
    border-bottom: none !important;
}
.auto-tab .has-subform table.dynamicform-table-Content,
.SiPo-FORM .has-subform table.dynamicform-table-Content{
    /* remove main table's border */
    box-shadow: none !important;
}
.SiPo-FORM .has-subform table.dynamicform-table-Content td,
.auto-tab .has-subform table.dynamicform-table-Content td,
.SiPo-FORM .has-subform table.dynamicform-table-Content td,
.auto-tab .has-subform table.dynamicform-table-Content td{
    /* remove extra paddings to make it condensed */
    padding: 0 !important;
}
.dynamicform-table-show-rows .FormPageContent .has-subform legend{
    /* visible legends is required from support team (for sub-forms) */
    display: block !important;
}
.SiPo-FORM .has-subform .FormCaption:empty,
.SiPo-FORM table.dynamicform-table-Content .has-subform td span:empty{
    /* this tiny element has unwanted padding and is empty in subforms*/
    display: none !important;
}
.SiPo-FORM .has-subform table{
    /* inner tables should not be smaller than others so i'll increase their width from 98 to 99.8 */
    width: 99.8% !important;
}
.has-subform div#SearchResults , .has-subform div.MainUpdatePanel{
    /*
    i don't know why but subforms are clipped(cutted) from their top and 
    some of their data is lost, this padding will fix it
    */
    padding-top: 3px;
}
.auto-tab .has-subform table.dynamicform-table-Content tr tr:nth-child(odd) ,
.SiPo-FORM .has-subform table.dynamicform-table-Content  tr tr:nth-child(odd){
    /* striped effect*/
    background: #e4e4e454 !important;
}
.auto-tab .has-subform table.dynamicform-table-Content tr .dg tr td,
.SiPo-FORM .has-subform table.dynamicform-table-Content  tr .dg tr td{
    padding: 10px 5px !important;
}
@media only screen and (max-width: 991px){
    .SiPo-FORM fieldset:not(.has-subform) table.dynamicform-table-Content tr:first-of-type{
        display: block !important;
    }
    .SiPo-FORM fieldset.has-subform table.dynamicform-table-Content tr tr:first-of-type,
    .SiPo-FORM fieldset.has-subform table.dynamicform-table-Content .dg tr tr:first-of-type{
        /* First tr elements are hidden in reponsive to prevent showing labels but */
        /* here it will make some tables to disappear at all! so i'm trying to prevent this */
        display: block !important;
    }
}
/* #endregion nested-tales */
/* #region separate-form-tables-from-normal-tables */
/****************************************************/
/*                                                  */
/*   Fix Default Tables And Form Tables Conflicts   */
/*                                                  */
/****************************************************/
.inner-wrapper div:not(.SiPo-PageToolbox) table tr:nth-child(odd),
.mohtava-wrapper div:not(.SiPo-PageToolbox) table tr:nth-child(odd){
    background-color: transparent;
}
.inner-wrapper div:not(.SiPo-PageToolbox) table tr:hover:not(:first-child),
.mohtava-wrapper div:not(.SiPo-PageToolbox) table tr:hover:not(:first-child){
    background-color: transparent;
}
.inner-wrapper div:not(.SiPo-PageToolbox) table td,
.inner-wrapper div:not(.SiPo-PageToolbox) table th,
.mohtava-wrapper div:not(.SiPo-PageToolbox) table td,
.mohtava-wrapper div:not(.SiPo-PageToolbox) table th{
    border: none;
    padding: 0 !important;
    /* padding-bottom: 25px !important;
    padding-top: 5px !important; */
}
.inner-wrapper div:not(.SiPo-PageToolbox) table tr.dynamic-form-tr-caption td,
.inner-wrapper div:not(.SiPo-PageToolbox) table tr.dynamic-form-tr-caption th,
.mohtava-wrapper div:not(.SiPo-PageToolbox) table tr.dynamic-form-tr-caption td,
.mohtava-wrapper div:not(.SiPo-PageToolbox) table tr.dynamic-form-tr-caption th{
    padding: 0 !important;
}
.inner-wrapper .SiPo-FORM table,
.mohtava-wrapper .SiPo-FORM table{
    min-width: 0  !important;
}
/* #endregion separate-form-tables-from-normal-tables */
/* #region two_column_two_row2 */
/*    portal has bug on two column two row, it puts two labels in --> */
/*    one row  and two inputs on another... which is impossible to -> */
/*    make it responsive                                              */
/*                                                                    */
/*    this part will make two column two row into two column one row  */
/*                                                                    */
/*    label label                                                     */
/*    input input                                                     */
/*                                                                    */
/*  remove this part if you want portal's default two column two row  */
/*******************************************/
/******                               ******/
/******   Start Two Column Two Row 2  ******/
/******        دو ستون سطر           ******/
/******                               ******/
/*******************************************/
fieldset[elementview="TwoColumn"][elementviewcount="2"] tr{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: space-between;
    margin-top: 15px;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] td{
    width: 49%;
}
/* convert two column two column into two column two row */
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table:not(.dg)>tbody>tr>td:nth-child(3){
    order: 2;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table:not(.dg)>tbody>tr>td:nth-child(2){
    order: 3;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table:not(.dg)>tbody>tr>td:nth-child(4){
    order: 4;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"]>table:not(.dg)>tbody>tr>td:nth-child(2):last-child{
    /* i am changing elements order to convert two column two column into two column two row */
    /* but if the last item has only one child instead of two, the input and label will be shown in front of each other */
    /* while in other inputs label is shown above input */
    /* by adding this margin i'll make input to get down of devil's horse*/
    margin-left: 40%;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .subform-table td:nth-child(2):last-child{
    /* subform input elements */
    margin-left: 0% !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td .sipocombo-span-icon + div input:not([type="image"])[type="input"],
.sipocombo-span-icon+div input[type='input']{
    width: 98% !important;
}


fieldset[elementview="TwoColumn"][elementviewcount="2"] .subform-table-wrapper,
fieldset[elementview="TwoColumn"][elementviewcount="2"] .EditFormContainer_div{
    /* EditFormContainer_div is one of main divisions of form and is used both in form and subforms */
    /* two column two column converted to two column one row, subforms who we want to remain at where they are */
    width: 100% !important;
}
@media only screen and (max-width: 1023px){
    fieldset[elementview="TwoColumn"][elementviewcount="2"]>table:not(.dg)>tbody>tr>td:nth-child(3){
        order: 3;
    }
}
@media only screen and (max-width: 991px){
    fieldset[elementview="TwoColumn"][elementviewcount="2"] td{
        order: 0 !important;
        /* ltr */
        /* text-align: left !important; */
        /* rtl */
        text-align: right !important;
    }
    .siposearchable-select{
        width: 100% !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="2"] .dynamic-form-td .sipocombo-span-icon + div input:not([type="image"])[type="input"],
    .sipocombo-span-icon + div input[type="input"]{
        width: 98% !important;
    }
}
/*******************************************/
/******                               ******/
/******    End  Two Column Two Row 2  ******/
/******        دو ستون سطر           ******/
/******                               ******/
/*******************************************/
/* #endregion two_column_two_row */




/* #region three_column_two_col */
/*******************************************/
/******                               ******/
/******   Start Three Column Two Col  ******/
/******        دو ستون سه سطر        ******/
/******                               ******/
/*******************************************/
fieldset[elementview="TwoColumn"][elementviewcount="3"] tr{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"] td{
    width: 32% !important;
}
/* convert two column two column into two column two row */
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(3){
    order: 2;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(2){
    order: 4;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(4){
    order: 5;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(5){
    order: 3;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(6){
    order: 6;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"]>table:not(.dg)>tbody>tr>td:nth-child(2):last-child{
    /* i am changing elements order to convert two column two column into two column two row */
    /* but if the last item has only one child instead of two, the input and label will be shown in front of each other */
    /* while in other inputs label is shown above input */
    /* by adding this margin i'll make input to get down of devil's horse*/
    margin-left: 40%;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"] .subform-table td:nth-child(2):last-child{
    /* subform input elements */
    margin-left: 0% !important;
}
.SiPo-FORM fieldset[elementview="TwoColumn"][elementviewcount="3"] .dynamic-form-td input:not([type='file']):not([type='submit']){
    width: 100% !important
}
.SiPo-FORM fieldset[elementview="TwoColumn"][elementviewcount="3"] .dynamic-form-td .sipocombo-span-icon + div input:not([type="image"])[type="input"],
.SiPo-FORM .sipocombo-span-icon+div input[type='input']{
    width: 100% !important;
}


fieldset[elementview="TwoColumn"][elementviewcount="3"] .subform-table-wrapper,
fieldset[elementview="TwoColumn"][elementviewcount="3"] .EditFormContainer_div{
    /* EditFormContainer_div is one of main divisions of form and is used both in form and subforms */
    /* two column two column converted to two column one row, subforms who we want to remain at where they are */
    width: 100% !important;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"] .dynamic-form-validator[style='display: inline;']{
    display: flex !important;
    padding: 5px 25px 5px 0;
    padding: 10px 25px 10px 10px;
    border-radius: 5px;
}
fieldset[elementview="TwoColumn"][elementviewcount="3"] .dynamic-form-validator[style='display: inline;'] br{
    display: none !important;
}
@media only screen and (max-width: 1023px){
    .SiPo-FORM div table:not(.pagination) fieldset[elementview="TwoColumn"][elementviewcount="3"] tbody td{
        width: 33% !important;
    }
}
@media only screen and (max-width: 991px){
    .SiPo-FORM div table:not(.pagination) fieldset[elementview="TwoColumn"][elementviewcount="3"] tbody td{
        order: 0 !important;
        width: 100% !important;
        /* ltr */
        /* text-align: left !important; */
        /* rtl */
        text-align: right !important;
    }
    .siposearchable-select{
        width: 100% !important;
    }
    fieldset[elementview="TwoColumn"][elementviewcount="3"] .dynamic-form-td .sipocombo-span-icon + div input:not([type="image"])[type="input"],
    .sipocombo-span-icon + div input[type="input"]{
        width: 98% !important;
    }
}
/*******************************************/
/******                               ******/
/******    End  Three Column Two Col  ******/
/******        دو ستون سه سطر        ******/
/******                               ******/
/*******************************************/
/* #endregion three_column_two_col */
.auto-tab td:empty,
.SiPo-FORM td:empty{
    display: none !important;
}


/********************************/
/******                    ******/
/******  Normalize Portal  ******/
/******                    ******/
/********************************/
/*   just to make orders right  */
fieldset>table>tbody input.placeholder-right,
fieldset>table>tbody input.placeholder-right::placeholder,
.placeholder-right,
.placeholder-right::placeholder{
    text-align: right !important;
}
fieldset>table>tbody input.placeholder-left,
fieldset>table>tbody input.placeholder-left::placeholder,
.placeholder-left,
.placeholder-left::placeholder{
    text-align: left !important;
}




/* #region step tabs */
/********************************/
/******                    ******/
/****** Step Tabs Styles   ******/
/******                    ******/
/********************************/
div[class*='sidebar-wizard-horizontal'] ul{
    /* tabs wrapper */
    white-space: wrap;
    overflow: visible;
    padding-bottom: 80px;
    width: 100%;
}
div[class*='sidebar-wizard-horizontal'] ul>li{
    /* all tab items */
    position: relative;
    min-width: 20px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    float: none;
    display: inline-block;
    margin: 5px 3%;
    border: solid 2px #707070;    
}
div[class*='sidebar-wizard-horizontal'] ul>li.active{
    /* active item should has longer lines because it has it's name shown */
    margin: 5px 60px;
}
div[class*='sidebar-wizard-horizontal'] ul>li.active>a,
div[class*='sidebar-wizard-horizontal'] ul>li.active>a{
    /* show active name by default */
    transform: translateX(-50%) translateY(10px);
    opacity: 1;
    visibility: visible;
}
div[class*='sidebar-wizard-'] ul>li.active>a,
div[class*='sidebar-wizard-'] ul>li.active>a:hover,
div[class*='sidebar-wizard-'] ul>li.active>a:focus{
    /* change default background of portal */
    background-color: #aaa !important;
}
div[class*='sidebar-wizard-'] ul>li.done:hover>a,
div[class*='sidebar-wizard-'] ul>li:hover>a{
    /* change default background of portal on hover*/

}
div.sidebar-wizard-horizontal-ltr ul>li:last-child>a,
.sidebar-wizard-horizontal-rtl ul>li:first-child>a{
    /* change default radius of first and last element given by portal */
    border-radius: 4px;

}
div.sidebar-wizard-horizontal-rtl ul>li>a{
    /* hide step names, show them on hover or selected (portal js will add selected class) */
    padding: 0 !important;
    padding: 10px 20px !important;
    position: absolute;
    top: 100%;
    background: #aaa;
    color: #707070;
    width: 150px;
    width: max-content;
    max-width: unset;
    left: 50%;
    transform: translateX(-50%) translateY(25px);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s;
    border-radius: 4px;
    text-align: center;
}
div.sidebar-wizard-horizontal-rtl ul>li>a::before,
div.sidebar-wizard-horizontal-rtl ul>li>a::after{
    /* remove portal's default arrow effect */
    content: unset !important;;
}
div.sidebar-wizard-horizontal-rtl ul>li:hover>a,
div.sidebar-wizard-horizontal-rtl ul.selected>a{
    /* show name as popup */
    transform: translateX(-50%) translateY(10px);
    opacity: 1;
    visibility: visible;
}
div[class*='sidebar-wizard-horizontal'] ul>li::after{
    /* line, each item has one line after it */
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 64px;
    height: 2px;
    background: #707070;
    transform: translateY(-50%);
}
div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
    width: 95px;
}
div[class*='sidebar-wizard-horizontal'] ul>li::before {
    right: unset;
    left: 100%;
}
div[class*='sidebar-wizard-horizontal'] ul>li:first-of-type::before {
    content: unset;
}
div[class*='sidebar-wizard-horizontal'] ul>li:last-of-type::after {
    content: unset;
}
div[class*='sidebar-wizard-horizontal'] ul>li.active>a::after {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    content: '' !important;
    top: unset !important;
    position: absolute;
    border:solid 5px transparent !important;
    padding: 0 !important;
    border-bottom-color: #d5d5d5 !important;
    bottom: 103%;
    right: 50%;
    transform: translateX(50%);
}
div[class*='sidebar-wizard-horizontal'] ul>li.active>a::after {
    border-bottom-color: #aaa !important;
}

.wizard-prev,
.wizard-next{
    display: none !important;
}
div[class*='sidebar-wizard-horizontal'] ul>li:before {
    content: '\e903' !important; /*use your own unicodes*/
    font-family: 'icon';
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* Calendar ICON */
input[type='image'].ui-datepicker-trigger{
    width: 25px !important;
    border: none !important;
    display: none;    
}
@media only screen and (max-width:1349px) {
    div[class*='sidebar-wizard-horizontal'] ul>li::after{
        width: 55px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
        width: 92px;
    }
}
@media only screen and (max-width:1199px) {
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
        /* line, each item has one line after it */
        /* reduce space between active and other items */
        width: 85px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li{
        /* all tab items */
        margin: 5px 3%;
        
    }
    div[class*='sidebar-wizard-horizontal'] ul>li::after{
        /* all tab item lines */
        width: 42px;
    }
}
@media only screen and (max-width:1023px) {
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
        /* line, each item has one line after it */
        /* reduce space between active and other items */
        width: 83px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li::after{
        /* all tab item lines */
        width: 38px;
    }
}

@media only screen and (max-width:991px) {
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after {
        /* reduce space between active and other items */
        width: 70px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li::after{
        /* all tab item lines */
        width: 15px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li{
        /* all tab items */
        margin: 5px 1%;
    }
}
@media only screen and (max-width:700px) {
    div[class*='sidebar-wizard-horizontal'] ul>li{
        width: 30px !important;
        min-width: 30px !important;
        max-height: 30px !important;
        overflow: visible !important;
    }
}
@media only screen and (max-width:481px) {
    div[class*='sidebar-wizard-horizontal'] ul>li.selected{
        display: inline-block;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.active{
        margin: 5px 20px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
        width: 30px;
    }
}
@media only screen and (max-width:430px) {
    div.sidebar-wizard-horizontal-rtl ul>li>a{
        right: 0;
        left: unset;
        transform: translateY(10px) !important;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.active>a::after{
        right: 8px;
        left: unset;
        bottom: 102%;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li{
        width: 25px !important;
        min-width: 25px !important;
        max-height: 25px !important;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.active{
        margin: 5px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li.pre-active::after,
    div[class*='sidebar-wizard-horizontal'] ul>li.active::after{
        width: 15px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li::after {
        width: 13px;
    }
    div[class*='sidebar-wizard-horizontal'] ul>li>a::after {
        right: 5px;
        transform: translateX(0);
    }
}
/********************************/
/******                    ******/
/****** Step Tabs Styles   ******/
/******                    ******/
/********************************/

table:not(.dg)>tbody>tr>.FormCaption{
    display: none !important;
}

/* #endregion step tabs */

/*****************************************************************************/
/*****************************************************************************/
/******                                                                  *****/
/******               CUSTOM  STYLES  FOR  EGFI                      *****/
/******                                                                  *****/
/*****************************************************************************/
/*****************************************************************************/
/**************************************/
/******                          ******/
/******     Date Picker Start    ******/
/******                          ******/
/**************************************/
.ui-datepicker.ui-widget .ui-widget-header{
    background: #0F3265;
    border-color: #052047;
}
/**************************************/
/******                          ******/
/******      Date Picker  End    ******/
/******                          ******/
/**************************************/