/*Text style*/
/*input[type=text], input[type=password], input[type=search], select, textarea {
    font-family: font_arabic;
    display: block;
    padding: 5px; 
    border: 0.5px solid var(--mainColorDark);
    position: relative; 
    border-radius: 3px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px;
    width: 225px;
}
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, select:focus, textarea:focus {
    background-color: var(--mainColorLight0);
}*/
select {
    padding: 4px; 
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/*Link style*/
a {
    color: var(--colorFormHeader);
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: var(--colorFormHeader);
    text-decoration: underline;
}

p {
    text-align: justify;
}


/*Button style
button {
    font-family: font_arabic;
    font-weight: bold;
    display: inline-block;
    margin: 10px 0 0 10px;
    padding: 10px 25px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-color: var(--mainColorDark);
    color: #fff;
    border: solid 2px var(--mainColorDark);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: right 5px center;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px;
    width: 100px;
}
button:focus {
    background-color: rgba(0,0,0,0);
    color: var(--colorFont);
}
button:hover {
    background-color: rgba(0,0,0,0);
    color: var(--colorFont);
}
button:active {
    transform: translateY(4px);
}*/




.fileUpload {
    position: relative;
    overflow: hidden;
    display: block;
    color: var(--mainColorDark);
    font-weight: bold;
    text-decoration: none;
}
.fileUpload:hover {
    color: var(--mainColorLight1);
    text-decoration: underline;
}
.fileUpload:active {
    /*background-color: #b251bd;
    box-shadow: 0 1px #666;
    transform: translateY(4px);*/
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}





form{

}


form.operation{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    box-shadow: #aaa 0 0 2px 0;
}


form.operation>.header{
    position: relative;
    padding: 10px 15px;
    background: var(--colorFormHeader);
    border-radius: 15px 15px 0 0;
    /*box-shadow: 0 1px 1px #aaa;*/
    height: 50px;
    display: flex;
}
form.operation>.header>.title{
    color: #fff;
    margin-top: auto;
    margin-bottom: auto;
}
form.operation>.header>.title>h3{
    margin: 0;
}
form.operation>.header>.button{
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}
form.operation>.header>.button>a{
    border-radius: 50%;
    padding: 5px;
    text-decoration: none;
    font-size: 12pt;
    height: 30px;
    width: 30px;
    text-align: center;
    color: var(--colorFormHeader);
    background-color: #fff;
    display: flex;
    margin-right: 5px;
}
form.operation>.header>.button>a::before{
    margin: auto;
}
form.operation>.header>.button>a:hover {
    background-color: var(--colorYellow);
}
form.operation>.header>.button>a:active {
    transform: translateY(3px);
}


form.operation>.footer{
    position: relative;
    padding: 10px 15px;
    background: var(--colorFormFooter);
    border-radius: 0 0 15px 15px;
    /*box-shadow: 0 -1px 1px #aaa;*/
    direction: ltr;
}
form.operation>.footer>button{
    font-family: font_english, font_arabic;
    display: inline-block;
    padding: 2px 10px;
    height: 35px;
    width: 100px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: var(--colorFormFooter);
    background-color: #fff;
    border-radius: 5px;
    border: none;
    margin-top: auto;
    margin-bottom: auto;
}
form.operation>.footer>button:focus{
    background-color: var(--colorYellow);
}
form.operation>.footer>button:hover{
    background-color: var(--colorYellow);
}
form.operation>.footer>button:active {
    transform: translateY(3px);
}


form.operation>.controls{
    padding: 15px 5px;
    background: #fff;
}
form.operation>.controls>.warp{
    display: flex; 
    -webkit-display: flex; 
    -moz-display: flex; 
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
}
form.operation>.controls>.warp .field{
    flex: 1 200px;
	-webkit-flex: 1 200px;
	-moz-flex: 1 200px;
}
form.operation>.controls .field{
    margin: 0 5px 4px 5px;
    display: inline-block;
    text-align: right;
}
form.operation>.controls .field>label{
    margin-right: 10px;
}


form.operation>.controls input[type=text], 
form.operation>.controls input[type=password], 
form.operation>.controls input[type=search], 
form.operation>.controls input[type=number], 
form.operation>.controls select, 
form.operation>.controls textarea{
    font-size: 10pt;
    font-family: font_english, font_arabic;
    display: flex;
    padding: 2px 5px; 
    border: 1px solid #bbb;
    position: relative; 
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 1px #aaa;
    width: -moz-available;
    width: -webkit-fill-available;
    width: 100%;
    height: 28px;
}

form.operation>.controls input[inputmode=numeric],
form.operation>.controls input[inputmode=decimal]{
    direction: ltr;
    text-align: right;
}

form.operation>.controls .container_check{
    display: block;
    position: relative;
    padding-right: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
form.operation>.controls .container_check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
form.operation>.controls .checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #bbb; 
    border-radius: 4px;
    box-shadow:  0 0 1px #aaa;
}
form.operation>.controls .container_check input:checked ~ .checkmark {
    background-color: var(--colorFormHeader);
}
form.operation>.controls .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
form.operation>.controls .container_check input:checked ~ .checkmark:after {
  display: block;
}
form.operation>.controls .container_check .checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}





.container_radio {
    display: block;
    position: relative;
    padding-right: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 5px;
}
.container_radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radiomark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #bbb; 
    border-radius: 50%;
    box-shadow:  0 0 1px #aaa;
}
.container_radio input:checked ~ .radiomark {
}
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}
.container_radio input:checked ~ .radiomark:after {
    display: block;
}
.container_radio .radiomark:after {
    top: 4px;
    left: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--colorHeader);
}

form.operation>.controls .container_radio .radiomark:after {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--colorFormHeader);
}


form.operation>.controls .listcheckbox {
    overflow-y: auto;
    display: block;
    padding: 8px; 
    border: 1px solid #bbb;
    position: relative; 
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 1px #aaa;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    height: 125px; 
}
form.operation>.controls .listcheckbox>.container_check {
    margin-bottom: 5px;
}

a.lnk_button {
    color: #808080;
    text-decoration: none;
    padding: 0 5px;
    font-size: 11pt;
}
a.lnk_button:hover {
    text-decoration: none;
    color: var(--colorFormHeader);
}

a.btn_delete_row {
    color: #808080;
    text-decoration: none;
    font-size: 11pt;
    padding: 0; 
    margin-left: auto; 
    margin-right: auto;
}
a.btn_delete_row:hover {
    text-decoration: none;
    color: var(--colorRed);
}
a.btn_delete_row:focus {
    text-decoration: none;
    color: var(--colorRed);
}





div.date_time_picker{
    font-size: 10pt;
    font-family: font_english, font_arabic;
    display: flex;
    padding: 2px; 
    border: 1px solid #bbb;
    position: relative; 
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 1px #aaa;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    height: 28px;
}
div.date_time_picker:focus {
    background-color: var(--mainColorLight0);
}
form.operation>.controls div.date_time_picker input{
    display: inline-block;
    padding: 0; 
    margin: 0;
    margin-right: 5px;
    margin-left: 5px;
    border: none; 
    position: relative; 
    border-radius: 0;
    background-color:none;
    box-shadow: none;
    text-align: center;
    height: 24px;
}
form.operation>.controls input.date_day, 
form.operation>.controls input.date_month{
    width: 30px;
}
form.operation>.controls input.date_year{
    width: 50px;
}






form.operation>.controls .validation-summary-valid{
    display: none;
}
form.operation>.controls .validation-summary-errors{
    background-color: var(--colorRed);
    border: 2px solid var(--colorRed);
    margin-bottom: 15px;
    border-radius: 15px;
    box-shadow:  0 0 5px #aaa;
}
form.operation>.controls .validation-summary-errors .errors-close{
    float: left;
}
form.operation>.controls .validation-summary-errors > div{
    background: var(--colorRed);
    padding: 7px;
    color: #fff;
    border-radius: 15px 15px 0 0;
}
form.operation>.controls .validation-summary-errors > div > a{
    float: right;
    color: #fff;
    text-decoration: none;
}
form.operation>.controls .validation-summary-errors > ul{
    color: #fff; 
    font-weight: bold;
    list-style-type: none;
    padding-left: 10px;
    padding-right: 10px;
}
form.operation>.controls .validation-summary-errors > ul> li::before{
    content: '- ';
}



a.command_bar {
    text-align: center;
    padding: 7px;
    margin-left: 5px;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12pt;
    color: #fff;
    text-decoration: none;
}
a.command_bar:hover {
    color: var(--colorHeader);
    background: #fff;
}
.vertical_line_split:after {
    content: "\007C";
    margin-left: 5px;
}





/*.div_form{
    margin: 1px;
    padding-top: 8px;
    padding-left: 5px;
    display: inline-block;
}
.div_form_button{
    margin: 1px;
    padding-top: 15px;
    display: block;
}*/









.search_account {
    position: relative;
}
.search_account input[type='text'] {
    display: inline-block;
}
.search_account span,
.search_account div span {
    display: none;
    position: absolute;
    color: green;
    opacity: 0.6;
    top: 9px;
    left: 20px;
}
.search_account #iconSearch {
    display: inline-block;
    position: absolute;
    color: #505050;
    top: 8px;
    left: 4px;
    text-decoration: none;
    cursor: pointer;
}
.search_account a:hover {
    color: var(--colorFormHeader);
}


.main_parts{
    display: flex; 
    flex-wrap: wrap;
}
.main_parts > div{
    height: 200px; 
    background-color: #fdfdfd; 
    flex: 1 300px; 
    margin: 5px;
    border-radius: 3px;
    box-shadow: 0 0 3px #aaa;
}
.main_parts > div > .title_part{
    background-color: #eee; 
    padding: 7px;
    box-shadow: 0 1px 1px #aaa;

}
.main_parts > div > .title_part > h4{
    margin: 0;
}




form.report {
    max-width: 21cm;
    margin-left: auto;
    margin-right: auto;
}
    form.report > .header {
        position: relative;
        padding: 10px 15px;
        margin-bottom: 10px;
        background: #888;
        height: 50px;
        display: flex;
    }
form.report > .header > .title {
    color: #fff;
    margin-top: auto;
    margin-bottom: auto;
}
form.report > .header > .title > h3 {
    margin: 0;
}
form.report > .header > .button {
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}
form.report > .header > .button > a {
    border-radius: 50%;
    padding: 5px;
    text-decoration: none;
    font-size: 12pt;
    height: 30px;
    width: 30px;
    text-align: center;
    color: var(--colorFormHeader);
    background-color: #fff;
    display: flex;
    margin-right: 5px;
}
form.report > .header > .button > a::before {
    margin: auto;
}
form.report > .header > .button > a:hover {
    background-color: var(--colorYellow);
}
form.report > .header > .button > a:active {
    transform: translateY(3px);
}
form.report > .controls {
    padding: 15px 5px;
    background: #fff;
}
form.report > .controls > .warp {
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
}
form.report > .controls > .warp .field {
    flex: 1 200px;
    -webkit-flex: 1 200px;
    -moz-flex: 1 200px;
}
form.report > .controls .field {
    margin: 0 5px 4px 5px;
    display: inline-block;
    text-align: right;
}

form.report > .controls input[type=text],
form.report > .controls .text,
form.report > .controls select,
form.report > .controls textarea {
    font-size: 10pt;
    font-family: font_english, font_arabic;
    display: flex;
    padding: 2px 5px;
    border: none;
    border-bottom: 1px solid #bbb;
    position: relative;
    background-color: #fff;
    width: -moz-available;
    width: -webkit-fill-available;
    width: 100%;
    height: 28px;
}
form.report > .controls input[inputmode=numeric],
form.report > .controls input[inputmode=decimal] {
    direction: ltr;
    text-align: right;
}