@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir-Light-FD.ttf') format('truetype');
}
@font-face {
  font-family: 'peyda';
  src: url('../fonts/Peyda-Regular.ttf') format("truetype");
}
@font-face {
  font-family: 'peyda-b';
  src: url('../fonts/Peyda-Bold.ttf') format("truetype");
}
@font-face {
  font-family: 'peyda-eb';
  src: url('../fonts/Peyda-ExtraBold.ttf') format("truetype");
}
@font-face {
  font-family: 'peyda-bb';
  src: url('../fonts/Peyda-Black.ttf') format("truetype");
}
:root{
  --color: #1071ff;
  --color-light: #6724b5;
  --bg: #eee;
  --bg-dark: #999;
  --green: #46be7e;
  --red: #ed4040;
  --gold: #febb02;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background: none;
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 100px;
}
::-moz-selection{
  color: #000;
  background: var(--color);
}
::selection{
  color: #fff;
  background: var(--color);
}
.datepicker-plot-area{
  font-family: YekanLight !important
}
.btn , .form-control{
  border-radius: 0 !important
}

a{
  transition: .2s;
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}
html{
  direction: rtl !important;
}
body{
  font-family: peyda;
  background: #fff;
  direction: rtl !important;
}


header{
  height: 75px;
  background: var(--color);
  position: relative;
}
header span{
  font-family: peyda-b;
  color: #fff;
  position: absolute;
  top: 50%;
  font-size: 4vw;
  right: 15px;
  transform: translate(0,-50%);
}
header span.left{
  right: auto;
  left: 15px;
}

.welcome{
  padding: 15px !important;
  font-size: 3.5vw;
  position: relative;
  line-height: 6vw;
}
.welcome span{
  font-family: peyda-eb;
}
article{
  width: calc(100% - 30px) !important;
  height: auto;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-left: 15px;
  background: #f1f1f1;
  padding: 10px;
  position: relative;
}
article.float{
  position: fixed;
  bottom: 25px;
  left: 0 !important;
  margin: 0 !important;
  padding: 0;
  right: 0;
  height: auto;
  background: none;
}
article.mt{
  margin-top: 35px;
}
article.pm{
  width: calc(70% + 15px) !important;
}
article.pm.left{
  float: left;
  margin-right: 0;
  margin-left: 15px;
  border-radius: 20px 20px 20px 0;
  margin-bottom: 0;
}
article.pm.right{
  float: right;
  margin-right: 15px;
  border-radius: 20px 20px 0 20px;
  background: var(--color);
  color: #fff;
  margin-bottom: 0;
}
article p{
  display: block;
  margin-bottom: 25px;
}
article.pm p{
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
article h2{
  padding: 0;
  font-family: peyda-bb;
  font-size: 6vw;
}
article h6{
  padding: 0;
  font-family: peyda-b;
  font-size: 3vw;
}
article input{
  font-size: 16px;
  width: 100%;
  border: none;
  background: #fff;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
article a{
  position: absolute;
  bottom: -10px;
  left: 15px;
  background: var(--color);
  color: #fff;
  font-family: peyda-eb;
  padding: 8px 15px;
  font-size: 3.5vw;
}
article .bt{
  position: absolute;
  bottom: -35px;
  left: auto;
  right: 15px;
  background: var(--color);
  color: #fff;
  font-family: peyda-eb;
  padding: 10px 15px 8px 15px;
  font-size: 3.5vw;
  border: none;
  outline: none;
}
article button.bt{
  position: absolute;
  bottom: -30px;
  left: 15px;
  right: 15px;
}
article a.gold{
  background: var(--gold);
  color: #000;
}
article .bt.gold{
  background: var(--gold);
  color: #000;
}
article textarea{
  border: none;
  resize: none;
  width: 100%;
  height: 150px;
  background: none;
  outline: none;
  font-size: 16px;
}
article div{
  width: 100%;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
  background: #ddd;
  padding: 7px;
}
article div.gold{
  background: var(--green);
}
.footer-btn{
  background: #f1f1f1;
  color: #565656 !important;
  text-align: center;
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  font-size: 2.8vw;
  font-family: peyda-b;
}

article.float input{
  border: none;
  resize: none;
  width: 100%;
  height: 150px;
  background: none;
  outline: none;
  font-size: 16px;
  height: 50px !important;
  width: calc(100% - 60px) !important;
  padding: 0;
  float: right;
  background: #ddd;
  padding: 16px;
  border-radius: 0;
  text-align: right !important;
}
article.float input::placeholder{
  color: #777;
}
article.float h5{
  width: calc(100% + 30px);
  display: block;
  float: left;
  margin-left: -30px !important;
  text-align: center;
  background: var(--gold);
  padding: 15px;
}
article.float button{
  width: 90px !important;
  float: left !important;
  height: 50px !important;
  display: block;
  top: 0;
  right: auto;
  left: -30px;
}

.desktop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--color);
}