/*================ Badge ========== */
    
.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  
  padding:1px 4px;
  position: relative;
  display: inline-block;

 /* border-radius: 2px;*/
}
/*
.notification:hover {
  background: red;
}*/

.notification .badge {
 position: absolute;
 top: -25px;
 left: -18px;
 width:20px; 
 /*height:20px;*/


 border-radius:14px;
 background-color: red;
 color: white;
}

.notification .badge2 {
 position: absolute;
 top: 1px;
 left: 16px;
 width:17px; 
 height:19px;
 border-radius:15%;
 background-color: gold;
 color: black;
}

.notification .badge3 {
 position: absolute;
 top: 1px;
 left: 16px;
 width:17px; 
 height:19px;
 border-radius:15%;
 background-color: yellowgreen;
 color: black;
}

/*================ Fonts ========== */
@font-face {
  font-family: Vazir;
  src: url('Fonts/Vazir/Vazir-FD.eot');
  src: url('Fonts/Vazir/Vazir-FD.eot?#iefix') format('Fonts/Vazir/Vazir-FD-opentype'),
       url('Fonts/Vazir/Vazir-FD.woff') format('woff'),
       url('Fonts/Vazir/Vazir-FD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Yekan;
  src: url('Fonts/Yekan/Yekan.eot');
  src: url('Fonts/Yekan/Yekan.eot?#iefix') format('Fonts/Yekan/Yekan-opentype'),
       url('Fonts/Yekan/Yekan.woff') format('woff'),
       url('Fonts/Yekan/Yekan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Vazir2;
  src: url('Fonts/Vazir2/Vazir-Thin.eot');
  src: url('Fonts/Vazir2/Vazir-Thin.eot?#iefix') format('Fonts/Vazir2/Vazir-Thin-opentype'),
       url('Fonts/Vazir2/Vazir-Thin.woff') format('woff'),
       url('Fonts/Vazir2/Vazir-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Vazir3;
  src: url('Fonts/Vazir3/Vazir.eot');
  src: url('Fonts/Vazir3/Vazir.eot?#iefix') format('Fonts/Vazir3/Vazir-opentype'),
       url('Fonts/Vazir3/Vazir.woff') format('woff'),
       url('Fonts/Vazir3/Vazir.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*=========== NavBars ============*/
.navbar 
  {
      
   overflow: hidden;
   position:sticky;
   z-index:1;
   position: -webkit-sticky;
   background:white;
   top: 0;   
   width:100%;
   height:auto;
  padding:10px 10px 10px 10px;
  }
 
.navbar a 
 {
  float: left;
  display:inline;
  background:white;
  color: blue;
  text-align: center;
 /* padding: 4px 10px;*/
  text-decoration: none;
    top: 9px;
    left: 0px;
    height: 27px;
} 
.navbar a2 
 {
  float: left;
  display:inline;
  background:white;
  color: blue;
  text-align: center;
 /* padding: 4px 10px;*/
  text-decoration: none;
   } 
  
/* 
.navbar a:hover 
 {
  background-color: whitesmoke;
  color: white;
 }
*/

.navbar2 
  {
   overflow: hidden;
   position:sticky;
   z-index:1;
   position: -webkit-sticky;
   background:lightgrey;
   top: 0;   
   width:100%;
  }
 
.navbar2 a 
 {
  float: left;
  display:inline;
  background:lightgrey;
  color: blue;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  top: 13px;  
 } 
 
 /*
.navbar2 a:hover 
 {
  background-color: lightgrey;
  color: white;
 }
*/
/*==========Alignment===========*/
.right {
  position: absolute;  
  top: 50%;
  right:-10px; 
  z-index:0;
  transform: translate(-5%, -50%);
}



/*============ Search Bar ===============*/

.search {
  display: flex;
}


/* ============ Line Seperator ============= */
hr.new2 {
  border-top: 1px dashed red;
  width:100%;
}
/*============= Footer ===============*/

.Style_Footer1
    {
        font-family:Yekan;
        font-size:larger ;
        text-align: center;
        background: #D9D9D7;
        color: black;
        height: 10px;        
        width:auto;
    }
    
.Style_Footer2
    {
        width: 100%;
       /* max-width:80%;*/
        font-family:Yekan;
        font-size:small  ;
        text-align: center;
        background: #D9D9D7;
        color: black;
        height: 100px;        
    }
    
.Style_Footer3
    {
        width: 100%;
        font-family:vazir;
         font-size:13px;
        text-align: center;
        background: black;
        color: white;
        height: 50px;
    }
  
/*=============== MenuBar ================*/    
body {
  transition: background-color .2s;
}
.mySidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color:Silver;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 60px;  
}
.mySidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  text-align:right;
  display: block;
  transition: 0.1s;
}
.mySidenav a:hover {
  color: darkgray;
  background-color:yellow;
  color:Blue;
}
.mySidenav .closebtn {
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 36px;
  margin-left: 2px;
}


/*========================*/

/* =========== Loader =========== */   
#loader { 
  position:fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 100px;
  height: 100px; 
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;  
  -webkit-animation: spin 0.5s linear infinite;
  animation: spin 0.5s linear infinite;
   background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }


/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 0.2s;
  animation-name: animatebottom;
  animation-duration: 0.5s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:2 }


@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
  
#myDiv 
{

  display: none;
  text-align: center;    
}


/*=========== Collapse Menu ========*/
.accordion {
  background-color: #eee;
  color: black;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: right;
  outline: none;
  font-size: 12px;
  transition: 0.6s;
  
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

/*=========== Categories Menu ========*/
.catsMenu {
  background-color: red;
  color: white;
  width: 100%;  
}

.catsMenu:hover 
{
  background-color: yellow;
  color: blue;
  width: 90%;  
  
}
 
/* ========================== Notification ================*/    
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: yellowgreen; /* Black background color */
  color: black; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
  font-family:vazir;
  
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}




.GradientColor_Type1
{
background: #22c1c3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fdbb2d, #22c1c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.GradientColor_Type2
{
background: #e96443;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #904e95, #e96443);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #904e95, #e96443); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.GradientColor_Type3
{
background: #70e1f5;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffd194, #70e1f5);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.GradientColor_Type4
{
background: #FFAFBD;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffc3a0, #FFAFBD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.GradientColor_Type5
{
background: #50C9C3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #96DEDA, #50C9C3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #96DEDA, #50C9C3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.SingleColor_Type1
{
 
background: #9A3EAE;  
background: #80D7D3; 
background: #8094D7;

background: #f2f2f2;
background: #98CCC9;
background: #e0ffff;
}