@font-face {

  font-family: 'BYekan';

  src: url('../fonts/yekan.eot');

  src:
    local('BYekan'),
    url('../fonts/yekan.woff') format('woff'),
    url('../fonts/yekan.ttf') format('truetype'),
    url('../fonts/yekan.svg') format('svg');

  font-weight: normal;
  font-style: normal;
}


@font-face {

  font-family: 'casablanca';

  src:
    url('../fonts/casablanca.woff') format('woff'),
    url('../fonts/casablanca.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}


/* =========================
   Reset
========================= */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;
  padding: 0;

}


body {

  direction: rtl;

  background:
    url('../images/crossword.png')
    repeat;

  color: #333;

  font-family:
    'BYekan',
    Tahoma,
    sans-serif;

}


/* =========================
   Site Header
========================= */

#site_header {

  width: 900px;

  height: 100px;

  margin: 10px auto 0;

}


.site_header_right {

  width: 450px;

  float: right;

}


.site_header_right a {

  color: inherit;

  text-decoration: none;

}


.logo {

  float: right;

  font-family: 'casablanca';

  font-size: 50px;

  color: #5f5f5f;

  display: none;

}


.dis_top,
.dis_down {

  width: 350px;

  float: left;

  position: relative;

  top: 20px;

  font-family: 'BYekan';

  font-size: 16px;

  color: #5f5f5f;

  text-align: right;

  display: none;

}


/* =========================
   Title
========================= */

#title {

  width: 900px;

  min-height: 50px;

  margin: 0 auto;

  font-size: 24px;

  line-height: 50px;

  text-align: right;

  color: #999;

}


/* =========================
   Menu
========================= */

#menu {

  width: 900px;

  min-height: 50px;

  margin: 0 auto;

  border-top: 1px solid #c7c7c7;

  border-bottom: 1px solid #c7c7c7;

  text-align: left;

  overflow: hidden;

}


#menu a {

  display: inline-block;

  margin-left: 20px;

  line-height: 50px;

  font-family: 'casablanca';

  font-size: 13px;

  color: #000;

  text-decoration: none;

}


#menu button {

  width: 140px;

  height: 30px;

  float: right;

  margin-top: 10px;

  margin-left: 10px;

  border: 0;

  border-radius: 3px;

  color: #fff;

  font-family: 'casablanca';

  font-size: 16px;

  cursor: pointer;

}


#addrow {

  background: #00970c;

}


#help {

  background: #d40000;

}


#clear_factor {

  background: #555;

}


/* =========================
   Factor Container
========================= */

#factor_container {

  width: 950px;

  min-height: 400px;

  margin: 10px auto;

  border: 2px solid #000;

  border-radius: 3px;

  background: #fff;

  overflow: hidden;

}


/* =========================
   Factor Header
========================= */

#factor_header {

  width: 100%;

  min-height: 120px;

  border-bottom: 2px solid #000;

  display: grid;

  grid-template-columns:
        1fr
        1.15fr
        1fr;

  align-items: center;

}


.factor_customer {

  padding: 15px;

}


.factor_title {

  text-align: center;

}


.factor_info {

  padding: 15px;

}


.factor_title_text {

  font-size: 36px;

}


.header_box {

  width: 100%;

  min-height: 32px;

  margin-bottom: 5px;

  white-space: nowrap;

}


.header_box label {

  font-size: 14px;

}


.header_box input {

  float: left;

}


/* =========================
   Inputs
========================= */

input,
textarea {

  border: 0;

  border-bottom: 1px solid #efefef;

  outline: none;

  background: transparent;

  font-family: 'BYekan';

  font-size: 14px;

  transition:
    border-color .2s;

}


input:focus,
textarea:focus {

  border-bottom-color: #999;

}


#customer_name {

  width: 120px;

}


#customer_phone {

  width: 180px;

}


#customer_address {

  width: 180px;

}


#factor_date {

  width: 85px;

}


#factor_number {

  width: 80px;

}


#factor_title {

  width: 300px;

  height: 45px;

  font-size: 24px;

  text-align: center;

}


/* =========================
   Table
========================= */

#factor_body {

  padding: 10px 0;

}


.table_wrapper {

  width: 100%;

  overflow-x: auto;

}


.table1,
.table2 {

  border-collapse: collapse;

}


.table1 {

  width: 95%;

  margin: 10px auto;

}


.table1 th,
.table1 td {

  height: 34px;

  padding: 4px;

  border: 1px solid #000;

  font-size: 13px;

  text-align: center;

}


.table1 td[contenteditable="true"] {

  outline: none;

  background: #bdffb3;

}


.table1 tbody td:nth-child(3) {

  font-family: Arial, sans-serif;

}


.col_row {

  width: 45px;

}


.col_code {

  width: 100px;

}


.col_name {

  width: 180px;

}


.col_quantity {

  width: 70px;

}


.col_price {

  width: 120px;

}


.col_total {

  width: 130px;

}


.col_description {

  width: 180px;

}


.col_delete {

  width: 45px;

}


/* =========================
   Delete Row
========================= */

.delete_row {

  width: 28px;

  height: 25px;

  border: 0;

  border-radius: 3px;

  background: #d40000;

  color: #fff;

  cursor: pointer;

  font-family: Arial;

}


/* =========================
   Totals
========================= */

.table2 {

  width: 450px;

  margin: 20px 2.5% 20px auto;

}


.table2 th,
.table2 td {

  height: 35px;

  padding: 5px;

  border: 1px solid #000;

  text-align: center;

  font-size: 14px;

}


.table2 th {

  width: 180px;

  font-weight: normal;

}


.table2 td[contenteditable="true"] {

  cursor: text;

}


.final_total_row th,
.final_total_row td {

  font-weight: bold;

}


.percent_symbol {

  font-family: Arial;

}


/* =========================
   Footer
========================= */

#factor_footer {

  min-height: 180px;

  padding: 10px;

  border-top: 2px solid #000;

}


#footer_top {

  overflow: hidden;

}


#footer_top label {

  display: block;

  margin-bottom: 5px;

}


#factor_description {

  width: 100%;

  height: 75px;

  resize: none;

}


.footer_signatures {

  display: flex;

  justify-content: space-around;

  margin-top: 30px;

}


.footer_signature {

  width: 250px;

  text-align: center;

}


/* =========================
   Site Footer
========================= */

#footer {

  width: 900px;

  height: 50px;

  margin: 0 auto;

  border-top: 1px solid #c7c7c7;

  line-height: 50px;

  text-align: center;

  font-family: Tahoma, sans-serif;

  font-size: 11px;

}


/* =========================
   Mobile
========================= */

@media screen and (max-width: 980px) {

  #site_header,
  #title,
  #menu,
  #footer {

    width: calc(100% - 20px);

  }


  #factor_container {

    width: calc(100% - 20px);

  }


  #factor_header {

    grid-template-columns: 1fr;

    padding: 10px;

  }


  .factor_customer,
  .factor_info {

    padding: 5px;

  }


  .factor_title {

    order: -1;

    margin-bottom: 10px;

  }


  .header_box {

    max-width: 500px;

    margin-right: auto;

    margin-left: auto;

  }


  #title {

    min-height: 60px;

    line-height: 30px;

    padding: 10px 0;

    font-size: 20px;

  }

}


@media screen and (max-width: 600px) {

  #menu button {

    width: 110px;

    font-size: 13px;

  }


  #menu a {

    display: block;

    line-height: 30px;

    margin: 5px 10px;

  }


  .table1 {

    min-width: 850px;

  }


  .table2 {

    width: 95%;

    margin: 15px auto;

  }


  .footer_signatures {

    flex-direction: column;

    gap: 30px;

  }


  .footer_signature {

    width: 100%;

  }

}


/* =========================
   Print
========================= */

@page {

  size: A4;

  margin: 10mm;

}


@media print {

  html,
  body {

    margin: 0;

    padding: 0;

    background: #fff;

  }


  #site_header,
  #title,
  #menu,
  #footer {

    display: none !important;

  }


  #factor_container {

    width: 100%;

    margin: 0;

    border: 2px solid #000;

    border-radius: 0;

  }


  #factor_header,
  #factor_footer {

    page-break-inside: avoid;

  }


  table {

    page-break-inside: auto;

  }


  tr {

    page-break-inside: avoid;

  }


  input,
  textarea {

    border: 0 !important;

    box-shadow: none !important;

  }


  .delete_row {

    display: none !important;

  }


  .col_delete {

    display: none !important;

  }

}