html {
  color: rgb(255, 255, 255);
  
}
    .markaz-front-side,
    .markaz-back-side {
        direction:rtl;
      width: 390px;
      height: 200px;
      display: grid;
      grid-template-columns: 2% 96% 2%;
      grid-template-rows: 4% 92% 4%;
      position: relative;
      margin: 20px auto;
      overflow: hidden;
      box-shadow: 2px 5px 15px 0px #17161694;
      background-color: #65d6ed;
    }
    .markaz-color-grid {
      display: grid;
      grid-template-columns: repeat(3, 150px);
      grid-template-rows: repeat(8, 50px);
      grid-gap: 8px;
      width: 150px;
      height: 400px;
      transform: rotate(-45deg);
    }
    .markaz-black {
      background-color: #bebfaf;;
      grid-column: 2 / span 2;
      grid-row: 1 / span 3;
    }
    .markaz-red1 {
      background-color: #9581cb;;
      grid-row: 2 / span 5;
    }
    .markaz-red2 {
      background-color: #e45e4f;
      grid-column: 2 / span 2;
      grid-row: 4/7;
    }
    .markaz-green {
      background-color: #007e67;
      grid-column: 2/4;
      grid-row: 7/9;
    }
    
    .markaz-info-grid {
      grid-column: 2/3;
      grid-row: 2/3;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.432);
      border-radius: 6px;
      font-size: 0.7rem; /*12px;*/
      display: grid;
      grid-template-columns: 10% 40% 20% 20% 10%;
      /*grid-template-rows: repeat(3, 1fr);*/
      grid-template-rows: 25% 3% 34% 29% 9%;
    
      line-height: 1px;
    }
    .markaz-info-grid .markaz-type {
      grid-column: 4 / span 2;
      grid-row: 1 / span 1;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /*margin-top: 8px;*/
    }
    .markaz-info-grid .markaz-name {
      grid-column: 1 / span 3;
      grid-row: 1 / span 2;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .markaz-info-grid .markaz-name h5{
      font-weight: unset;
    }
    .markaz-info-grid .markaz-addr {
      grid-column: 1 / span 3;
      grid-row: 3 / span 1;
      font-size: 0.9em;
      margin-right: 2px;
      margin-left: 2px;
    }
    
    .markaz-info-grid .markaz-phoneNo {
      grid-column: 4 / span 2;
      grid-row: 3;
      font-size: 1em;
      
    }
    
    .markaz-info-grid .markaz-service {
      grid-column: 1 / span 2;
      grid-row: 4 / span 2;
      /*text-align: end;*/
      font-size: 1.6em;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 2px;
    }
    
    .markaz-info-grid .markaz-service_to {
      grid-column: 3 / span 2;
      grid-row: 4 / span 2;
      /*text-align: end;*/
      font-size: 0.9em;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .markaz-info-grid .markaz-uni_arm {
      grid-column: 5 / span 1;
      grid-row: 4 / span 2;
      /*text-align: end;*/
      font-size: 1em;
      display: flex;
      justify-content: center;
      align-items: self-end;
    }
    .markaz-info-grid .markaz-expired {
      grid-column: 1 / span 2;
      grid-row: 5 / span 1;
      /*text-align: end;*/
      font-size: 1em;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 2px;
    }
    
    .markaz-back-side .markaz-name-tag {
      grid-column: 1 / span 4;
      grid-row: 2 / span 1;
      align-self: center;
      z-index: 2;
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.288);
      font-size: 0.6rem; /*12px;*/
      letter-spacing: .1rem;
      text-align: center;
    }
    .markaz-name-tag h1,h3{
      margin: 2px;
      font-weight: unset;
    }
    .markaz-credits{
      margin-top:40px;
      text-align: center;
      color: #343536;
    }


.person-front-side,
    .person-back-side {
        direction:rtl;
      width: 390px;
      height: 100px;
      display: grid;
      grid-template-columns: 2% 96% 2%;
      grid-template-rows: 4% 92% 4%;
      position: relative;
      margin: 20px auto;
      overflow: hidden;
      box-shadow: 2px 5px 15px 0px #17161694;
      background-color: #d7f39e;
    }
    .person-color-grid {
      display: grid;
        grid-template-columns: repeat(8, 75px);
        grid-template-rows: repeat(8, 75px);
        grid-gap: 8px;
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
    }
    .person-black {
      background-color: #d1c5f7;;
      grid-column: 2 / span 3;
      grid-row: 1 / span 4;
    }
    .person-red1 {
      background-color: #d3d37a;;
      grid-column: 1 / span 2;
      grid-row: 2 / span 5;
    }
    .person-red2 {
      background-color: #e45e4f;
      grid-column: 2 / span 2;
      grid-row: 4/7;
    }
    .person-green {
      background-color: #007e67;
      grid-column: 2/4;
      grid-row: 7/9;
    }
    
    .person-info-grid {
      grid-column: 2/3;
      grid-row: 2/3;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.432);
      border-radius: 6px;
      font-size: 0.7rem; /*12px;*/
      display: grid;
      grid-template-columns: 50% 50%;
      /*grid-template-rows: repeat(3, 1fr);*/
      grid-template-rows: 50% 5% 25% 20% ;
    
      line-height: 1px;
    }
    .person-info-grid .person-codemelli {
      grid-column: 1 / span 1;
      grid-row: 3 / span 1;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /*margin-top: 8px;*/
    }
    .person-info-grid .person-name {
      grid-column: 1 / span 2;
      grid-row: 1 / span 1;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .person-info-grid .person-type_ozv {
      grid-column: 2 / span 1;
      grid-row: 3 / span 1;
      font-size: 1em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .person-info-grid .person-family {
      grid-column: 2 / span 1;
      grid-row: 4 / span 1;
      font-size: 1em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .person-info-grid .person-name h5{
      font-weight: unset;
    }
    .person-info-grid .person-addr {
      grid-column: 1 / span 3;
      grid-row: 3 / span 1;
      font-size: 0.9em;
      margin-right: 2px;
      margin-left: 2px;
    }
    
    
    .person-back-side .person-name-tag {
      grid-column: 1 / span 4;
      grid-row: 2 / span 1;
      align-self: center;
      z-index: 2;
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.288);
      font-size: 0.6rem; /*12px;*/
      letter-spacing: .1rem;
      text-align: center;
    }
    .person-name-tag h1,h3{
      margin: 2px;
      font-weight: unset;
    }
    .person-credits{
      margin-top:40px;
      text-align: center;
      color: #343536;
    }

.student-front-side,
    .student-back-side {
        direction:rtl;
      width: 390px;
      height: 120px;
      display: grid;
      grid-template-columns: 2% 96% 2%;
      grid-template-rows: 4% 92% 4%;
      position: relative;
      margin: 20px auto;
      overflow: hidden;
      box-shadow: 2px 5px 15px 0px #17161694;
      background-color: #d7f39e;
    }
    .student-color-grid {
      display: grid;
        grid-template-columns: repeat(8, 75px);
        grid-template-rows: repeat(8, 75px);
        grid-gap: 8px;
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
    }
    .student-black {
      background-color: #d1c5f7;;
      grid-column: 2 / span 3;
      grid-row: 1 / span 4;
    }
    .student-red1 {
      background-color: #d3d37a;;
      grid-column: 1 / span 2;
      grid-row: 2 / span 5;
    }
    .student-red2 {
      background-color: #e4994f;
      grid-column: 2 / span 2;
      grid-row: 4/7;
    }
    .student-green {
      background-color: #007e67;
      grid-column: 2/4;
      grid-row: 7/9;
    }
    
    .student-info-grid {
      grid-column: 2/3;
      grid-row: 2/3;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.432);
      border-radius: 6px;
      font-size: 0.7rem; /*12px;*/
      display: grid;
      grid-template-columns: 50% 50%;
      /*grid-template-rows: repeat(3, 1fr);*/
      grid-template-rows: 50% 5% 25% 20% ;
    
      line-height: 1px;
    }
    .student-info-grid .student-codemelli {
      grid-column: 1 / span 1;
      grid-row: 4 / span 1;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /*margin-top: 8px;*/
    }
    .student-info-grid .student-name {
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
      font-size: 1.2em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .student-info-grid .student-type_ozv {
      grid-column: 1 / span 1;
      grid-row: 3 / span 1;
      font-size: 1em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .student-info-grid .student-resh {
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
      font-size: 0.9em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .student-info-grid .student-ejtemaei {
      grid-column: 2 / span 1;
      grid-row: 4 / span 1;
      font-size: 0.9em;
      letter-spacing: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .student-info-grid .student-name h5{
      font-weight: unset;
    }
    .student-info-grid .student-addr {
      grid-column: 1 / span 3;
      grid-row: 3 / span 1;
      font-size: 0.9em;
      margin-right: 2px;
      margin-left: 2px;
    }
    
    
    .student-back-side .student-name-tag {
      grid-column: 1 / span 4;
      grid-row: 2 / span 1;
      align-self: center;
      z-index: 2;
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.363);
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.288);
      font-size: 0.6rem; /*12px;*/
      letter-spacing: .1rem;
      text-align: center;
    }
    .student-name-tag h1,h3{
      margin: 2px;
      font-weight: unset;
    }
    .student-credits{
      margin-top:40px;
      text-align: center;
      color: #343536;
    }