@import url(../fonts/IS/css/fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
@import url(../fonts/Nastaliq/stylesheet.css);

h1, h2, h3, h4, h5, h6,input, textarea {
	font-family: IS !important;
}

*:not(i):not(mat-icon) {
  font-family:  IS !important;
  font-size: 14px;
  direction: rtl;
  text-align: right;
}
h1, h2, h3, h4, h5, h6,input, textarea, button {
	font-family:  IS !important;
}

p, span, div, input {
    font-family:  IS !important;
    font-weight: 600;
    transition:all 0.3s ease;
}

body {
  background-color: gainsboro;
	font-family:  IS !important;
	font-weight: 300;
  } 




.mat-horizontal-content-container{
    padding:0 !important;
  }

  .mat-tab-nav-bar.mat-primary .mat-ink-bar{
      /* background-color: #34bda4 !important;
      height: 14px !important;
      border-radius: 50% !important;
      margin-bottom: -7px; */
  }

  .ql-editor, .ql-editor p, .ql-editor span, .ql-editor div, .ql-editor ul, .ql-editor li, .ql-editor ol, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor blockquote, .ql-editor pre, .ql-editor label{
    line-height: 1.65rem !important;
  }

  .mat-tab-links{
    width: 500px;
    margin: 0 auto;
    z-index:999;
  }


  .mat-tab-link.StuMenu {
    height:38px !important;
    /* border: solid 1px #757575; */
    border-radius: 12px;
    margin: 6px;
  }
  .mat-tab-link.StuMenu:not(.niceLinkActive) {
    background: #ececec;
  }
  

  .link {
    /* RESET */
    text-decoration: none;
    line-height: 1;
    
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 5px 5px;
    overflow: hidden;
    color: #333;
    vertical-align: bottom;
    transition: color .3s ease-out;
  }
  
  .niceLink::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translateY(calc(100% - 0px));
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%); */
    background: #283593c9;
    transition: transform .25s ease-out;
  }
  
 
  .niceLink:hover::before {
    transform: translateY(0);
    transition: transform .25s ease-out;
  }
  
  .niceLinkActive { 
    color: #ffffff !important;
    /* text-shadow: 1px 1px 9px white; */
  }
  .niceLinkActive::before {
    transform: translateY(0);
    transition: transform .25s ease-out;
  }

  .routeButton:hover{
    background-color: #2865dd !important ;
  }
  .routeButton,  .routeButton:hover mat-icon{
    animation:  shake 1.2s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
  }
  @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
      
      30%, 50%, 70% {
        transform: translate3d(-2px, 0, 0);
      }
      40%, 60% {
        transform: translate3d(2px, 0, 0);
    }
  }

  @media screen and (max-width: 500px) {
    .mat-tab-links{
      width:100%;
    }
  }

  @media screen and (max-width: 576px) {
    .mat-tab-nav-bar{
      margin-top: 0px !important;
    }
    .mat-stepper-horizontal .mat-select {
      margin-right: 0 !important;
    }
    .mat-step-header{
      overflow: visible !important;
    }
    .mat-horizontal-stepper-header:first-child{
      padding-right:0 !important;
    }
    .app.indigo-light .mat-step-header .mat-step-label, .app.indigo-light .mat-step-header .mat-step-optional {
      position: absolute !important;
      bottom: 0 !important;
      font-size: 0.8rem !important;
      margin-right: 0 !important;
    }
  }




  qrcode svg{
    width: 100%;
  }
  ngx-barcode svg{
    width: 100%;
  }

  


/* check */
  .ReqListBox svg {
  width: 32px;
  display: block;
  margin: -4px auto;
  position: absolute;
  right: 5px;
}
.ReqListBox .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.ReqListBox .path.circle {
  -webkit-animation: dash 0.9s ease-in-out;
  animation: dash 0.9s ease-in-out;
}
.ReqListBox .path.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}
.ReqListBox .path.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
  animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

.ReqListBox p.success {
  color: #73af55;
}
.ReqListBox p.error {
  color: #d06079;
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

  @media screen and (max-width: 768px) {
    .ReqListBox svg {
      width: 22px;
      display: block;
      margin: -2px 22px;
      position: absolute;
      right: 2px;
    }
    .reqCard .mat-card-header .mat-card-title{
      margin-right:30px !important;
    }
  }


  @media (max-width: 599px){
    .ReqListBox .mat-card {
        padding: 24px 24px 24px 8px !important;
    }
  }