@font-face {
    font-family: Vazir;
    src: url('Fonts/Vazir.eot');
    src: url('Fonts/Vazir.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir.woff2') format('woff2'),
         url('Fonts/Vazir.woff') format('woff'),
         url('Fonts/Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Vazir-Bold;
    src: url('Fonts/Vazir-Bold.eot');
    src: url('Fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir-Bold.woff2') format('woff2'),
         url('Fonts/Vazir-Bold.woff') format('woff'),
         url('Fonts/Vazir-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: Vazir-Black;
    src: url('Fonts/Vazir-Black.eot');
    src: url('Fonts/Vazir-Black.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir-Black.woff2') format('woff2'),
         url('Fonts/Vazir-Black.woff') format('woff'),
         url('Fonts/Vazir-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: Vazir-Medium;
    src: url('Fonts/Vazir-Medium.eot');
    src: url('Fonts/Vazir-Medium.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir-Medium.woff2') format('woff2'),
         url('Fonts/Vazir-Medium.woff') format('woff'),
         url('Fonts/Vazir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: Vazir-Light;
    src: url('Fonts/Vazir-Light.eot');
    src: url('Fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir-Light.woff2') format('woff2'),
         url('Fonts/Vazir-Light.woff') format('woff'),
         url('Fonts/Vazir-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: Vazir-Thin;
    src: url('Fonts/Vazir-Thin.eot');
    src: url('Fonts/Vazir-Thin.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Vazir-Thin.woff2') format('woff2'),
         url('Fonts/Vazir-Thin.woff') format('woff'),
         url('Fonts/Vazir-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

html {font-family: Vazir-Medium, Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif; }

* {box-sizing: border-box;}

body {
    background: rgba(224, 255, 255,0.3);   
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);   
    color: #545454;
    font-size: 100%;  
    line-height: 1.75;
    margin: 0 auto;     
    max-width: 100%;  
    padding: 2em 2em 4em 2em;
    text-align: justify;
    text-justify: inter-word;
}

    ul.breadcrumb { padding: 10px 16px;   list-style: none;   background-color: #eee;}
    ul.breadcrumb li {  display: inline;  font-size: 16px;}
    ul.breadcrumb li+li:before {  padding: 8px;  color: black;  content: "/\00a0";}
    ul.breadcrumb li a {  color: #0275d8;  text-decoration: none;}
    ul.breadcrumb li a:hover {  color: #01447e;  text-decoration: underline;}

.navbar {
  background-color: lightgray;
  overflow: hidden;
}

.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

.topnav {
  background-color: darkred;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 6px 8px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


.main {
  margin-right: 15%; /* Same width as the sidebar + left position in px */
  padding: 0px 10px;
  direction: rtl;
}


article {direction: rtl; color:black; padding: 0em 1em 0em 1em;}
h1   {direction: rtl; padding: 0em 1em 0em 0em; font-size: 1.5em;}
h2   {direction: rtl; padding: 0em 1em 0em 0em;  font-size: 1.4em;}
h3   {direction: rtl; padding: 0em 1em 0em 0em; font-size: 1.3em;}
h4   {direction: rtl; padding: 0em 1em 0em 0em;  font-size: 1.2em;}
h5   {direction: rtl; padding: 0em 1em 0em 0em; font-size: 1.1em;}
h6   {direction: rtl; padding: 0em 1em 0em 0em; font-size: 1.0em;}

p  {direction: rtl; padding: 0em 1em 0em 1em; color:black; font-size: 1.1em;}

sticky { position: -webkit-sticky;  position: sticky;  top: 0;}

ul  {list-style-type: disc; direction: rtl; text-decoration: bold; }

li  {color:black; font-size: 1.1em; direction: rtl; padding-left: 1em; text-justify: none}

dl  {}

dt  {direction: rtl; padding-left: 1em; text-justify: none}

dd  {direction: rtl; padding-left: 1em; text-justify: none}

div.menulist {padding:0em 0em 0em 0em;}

.menulist ul {list-style-type: none;  position: sticky; margin: 0;   padding: 0em;   overflow: hidden;  background-color:palevioletred; font-size: 1.05em}

.menulist li {font-family: Vazir-medium, Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;  float: right;font-size: 1.05em; padding: 0em}

.menulist li a { display: inline-block; color: black;  text-align: center;   padding: 14px 16px;   text-decoration: none;}

.menulist li a:active { background-color: black;}
.menulist li a:hover { background-color: gray;}

.active { background-color: black;}  

div.header a:visited {  color: lightyellow;  background-color: transparent;  text-decoration: none;}
div.container a:active {  color: white;  background-color:gray;  text-decoration: none;}

.grid-container {
    display: grid;
      grid-template-columns: auto auto auto auto;
      grid-row-gap: 0px;
      padding: 0px;
             /*     width: 960px;  */
    }
.item1 {grid-row: 1 / 1; grid-column: 1 / 5; border: 1px solid  rgba(0, 0, 0, 0.8);}
.item2 {grid-row: 2 / 2; grid-column: 1 / 5; border: 1px solid rgba(0, 0, 0, 0.8);}
.item3 {grid-row: 3 / 3; grid-column: 1 / 5; border: 1px none  rgba(0, 0, 0, 0.8); margin-top: 0px; margin-bottom: 0px; max-width: 100%;}
/*background-color: lavender;   height: 580px; overflow:scroll;  */
.item3-1 {grid-row: 3 / 3; grid-column: 1 / 3; border: 1px solid  rgba(0, 0, 0, 0.8); }
.item3-2 {grid-row: 3 / 3; grid-column: 3 / 5; border: 1px solid  rgba(0, 0, 0, 0.8); }
.item5-1 {grid-row: 4 / 4; grid-column: 3 / 5; }
.item5-2 {grid-row: 4 / 4; grid-column: 1 / 3;}
.item5-3 {grid-row: 5 / 5; grid-column: 1 / 5;}

@media only screen and (max-width: 780px) {
    div.column1 {width: 100%;}
    div.column2 {width: 100%;}
    div.column3 {width: 100%;}
    .item1 {width: 98%;}
    .item2 {width: 98%;}
    .item3 {width: 98%;}   
    .item3-1 {width: 98%;}
    .item3-2 {width: 98%;}
    .item5-1 {width: 100%;}   
    .item5-2 {width: 100%;}
    .item5-3 {width: 100%;}  
    .item5-1 {font-size: 9px;}
    .item5-2 {font-size: 9px;}
    .item5-3 {font-size: 9px;}}
}

table, th, td {direction: rtl; font-size: 100%; border: none;
border-collapse: collapse;}
th, td { padding: 5px; }
th, td {text-align: center;  line-height: 2.5;}
td a { display: inline-block; color: white;  text-align: center;   padding: 14px 16px;   text-decoration: none;}
td a:hover {color: #111;}

div.card {width: 85%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19); font-size: 15px; }

div.header {background-color: lightslategray;  color:white;  padding: 0px;  font-size: 15px; text-align: center; }

div.container {padding: 0px; text-align: right; color:black;}

.flex-container { display: flex; flex-wrap: wrap;}

.flex-container > div {background-color: cornflowerblue;
    margin: 10px; padding: 20px; font-size: 1.2em;}  

.flex-container a:visited{color:black;}

.h3t {background-color: cornflowerblue; color:yellow;}
form  {direction: rtl; padding: 0em 1em 0em 1em; color:black; font-size: 1.1em;}

img.left {float: left; padding: 0 1em 0 0;}
img.right {float: right; padding: 0 0 0 1em;}
.clearfix::after {  content: "";  clear: both;  display: table;}