@font-face {
  font-family: "vazir"!important;
  src: url("../fonts/Vazirmatn-Regular.woff2") format("eot"), url("../fonts/Vazirmatn-Regular.woff2") format("truetype"), url("../fonts/Vazirmatn-Regular.woff2") format("woff");
}

@font-face {
  font-family: "Lato"!important;
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'IranNastaliq';
  src:url('../fonts/IranNastaliq.woff2') format('woff2'),
      url('../fonts/IranNastaliq.woff') format('woff');
      font-weight: normal;
      font-style: normal;
}


  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'vazir';
  }
  body,
  html {
    height: auto;
    font-family: 'vazir';
    direction: rtl;
    background: -webkit-linear-gradient(left, #bbd2c6 0%, #536975 100%);
    background-size: auto;
    background-attachment: fixed;
    padding-bottom: 10px;
  }
  a {
    margin: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
  }
  a:focus {
    outline: none !important;
  }
  a:hover {
    text-decoration: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }
  p {
    margin: 0;
  }
  ul,
  li {
    margin: 0;
    list-style-type: none;
  }
  input {
    display: block;
    outline: none;
    border: none !important;
  }
  textarea {
    display: block;
    outline: none;
  }
  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }
  button {
    font-weight: 700;
    outline: none !important;
    border: none;
    background: #e3e3e3;
    padding: 2px 8px;
    box-shadow: 2px 2px 1px #5e5656;
    margin: 3px 1px;
  }
  button:hover {
    cursor: pointer;
    background:#b6b3b3;
  }
  iframe {
    border: none !important;
  }

  .container-table100 {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 33px 30px;
  }
  .wrap-table100 {
    width: 960px;
    border-radius: 10px;
    overflow: hidden;
  }
  .table {
    display: inline-table;
    width: 450px !important;
    margin: 4px;
    border-spacing: 2px 4px;
    box-shadow: 2px 2px 4px #464d50;
    direction: ltr;
    position: relative;
  }


  .row {
    display: table-row;
    background: #cde2f3;
    outline: 1px solid #cdc8c8;
  }
  .row.rowheader {
    color: #fff;
    height: 51px;
  }


  .cell {
    display: table-cell;
  }

  .row .cell {
    font-family:'vazir';
    width: 34%;
    text-align: center;
    border-left: 1px solid #c9bcbc;
    padding: 3px;
    vertical-align: middle;
    border: 1px solid black;
    border-radius: 2px;
    text-shadow: 1px 1px 1px #adadad;
  }
  .row.rowheader .cell {
    font-family:'vazir';
    padding: 7px 0px;
    font-weight: 500;
  }

  
  .row:hover {
    cursor: pointer;
  }

.container{
  margin: 0px auto;
  display: flex;
  justify-content: center;
  min-width: 1500px;
}
.main{
  text-align: center;
  width: 1373px;
  display: grid;
  grid-template-columns: 450px 450px 450px;
  column-gap: 8px;
}


.nokia .cell{
  background: #3e4507!important;
  text-shadow: 1px 1px 1px #201f1f;
}
.samsung .cell{
  background: #214242!important;
  text-shadow: 1px 1px 1px #201f1f;
}

.xiaomi .cell{
  background: #2e2825!important;
  text-shadow: 1px 1px 1px #201f1f;
}

.row .cell:first-child{
  text-shadow: 1px 1px 1px #7a7272;
  font-size: 1.1rem;
  font-family: Lato;
  color: #161515;
}

.header{
  text-align: center;
  /* margin: 3rem; */
  text-shadow: 2px 2px 2px #5e5e5e;
  font-size: 1.6rem;
  min-width: 1500px;
}

.header h1 {
  word-spacing: 3px;
  color: #84b7ff !important;
}
#hphone{
  color: #ee5050;
  margin: 7px;
  text-shadow: rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px;
}

#hdate{
  color: #f9f929;
  text-shadow:rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px;
}
#haddress{
color: #f9f929 !important;
text-shadow:rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px;
margin-bottom: 2rem;
}
#title
{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'IranNastaliq';
  font-size: 5rem;
  color: #f9f929!important;
}
.headd,.headp{
  font-family:'IranNastaliq'!important;
}
.headp{
  color: #2cccda;
}
.header h1:nth-child(2n){
  text-shadow:rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px;
}
#notify{
  background: #1c860d;
  margin: 0px auto;
  width: 1329px;
  color: whitesmoke;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
}

#editbtn{
  background: #f3a450;
  color: whitesmoke;
}

#addbtn{
  background: #236818;
    color: whitesmoke;
}

#delbtn{
  background: #d2512d;
  color: whitesmoke;
}
.addtable{
  background: #45a403;
  text-align: center;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 1px 2px 2px #4d4949;
  margin: 0px 0.79rem;
}
.addtable:hover{
  background: #567e4d;
}


.brand .cell{
  background: #214242;
  text-shadow: 1px 1px 1px #201f1f;
}

#tinput{
  height: 49px;
  font-size: 1rem;
  text-align: center;
  background: #e4dddd;
  transition:all ease .2s;
}

.contable{
  display:flex;
  direction: flex-column;
}


.logo{
  height: 113px;
  background-size: cover!important;
  background-position: center!important;
  width: 113px;
}

.logo:hover{
  cursor:pointer;
  opacity:0.6;
  transform:scale(.96);
}
#logout
{
  background: url('../otherpic/logout.png');
}
#chpass
{
  background: url('../otherpic/chpass.png');
}

#tinput:focus{
  outline:3px solid #34763d;
  background:#e6ede4;
  
}
#deletetable{
  transition:all ease .2s;
}

#editbtn:hover,#delbtn:hover,#addbtn:hover,#deletetable:hover{
  opacity:.9;
  border-radius:3px;
}
.row .cell:nth-child(1){
  width: 35%;
}

.row .cell:nth-child(2){
  width: 22%;
}
.row .cell:nth-child(3){
  width: 36%;
}

.brand .cell{
  background:#214242!important;
}

.extable{
    position: absolute!important;
    top: 371px!important;
    right: 10px!important;
    direction: rtl!important;
    width: 252px !important;
}
.extable .row .cell{
  background: #323e3e!important;
  color: white;
  font-family: "vazir";
  font-weight: 400;
}
#xiaomi{
  grid-row-start: 1;
  grid-row-end: 4;
  order:1;
}
#samsung{
  grid-row-start: 1;
  grid-row-end: 4;
  order:2;
}

#nokia
{
order:3;
}
#apple
{
order:4;
}
#gplus{
order:5;
}

#tablet{
order:6;
}
#headphone{
order:7;
}
#huawi{
order:8;
}
#daria
{
order:9;
}
#kgtel{
order:10;
}
#realme{
order:11;
}
#sicco{
order:12;
}
#vocal{
order:13;
}