/*  Complete project details: H.Esmailzadeh 09126026351 he9092@gmail.com  */
@font-face {
    font-family: irs;
    font-style: normal;
    font-weight: 400;
    src: url('../font/IRANSans.eot');
    src: url('../font/IRANSans.eot?#iefix') format('embedded-opentype'), url('../font/IRANSans.woff') format('woff'), url('../fonts/IRANSans.ttf') format('truetype');
}

html {
	font-family: irs;
	font-size: 16px;
	display: inline-block; 
	text-align: center;
	
	/*line-height: 1.4 ;*/
	
	/*background-color: rgb(102, 153, 153) ;*/
} 

body {
    font-family: 'vazir', Arial, Helvetica, sans-serif ;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: rgb(124, 121, 126) ;
}

/* ---------------------- Modal Full-width input fields ------------------*/
input[type=text], input[type=password] {
  width: 100%;
  padding: 6px 10px;
  margin: 4px 0;
  display: inline-block;
  border: 1px solid #ccc;

}

/* Set a style for all buttons */
.buttonm {
    width: 100%;
    background-color: #00b386;
    color: white;
    padding: 7px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 0.3em;
  
}

.buttonm:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 5px 9px;
  background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}
avatar {
  width: 30%;
  border-radius: 50%;
}

.container {
  padding: 7px;
}
.containerc {
  padding: 2px;
}
.content { 
		padding: 5px;
		margin: auto;
} 

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 5px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 2px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {

  .cancelbtn {
     width: 100%;
  }
}

/* ---------------------- ---------------------------------------------------*/
.cc1 {
		border-radius: 0.7em;
		
		background: black;
		background: -webkit-linear-gradient(#31734e, #80ffaa, #31734e);
		background: -o-linear-gradient(#31734e, #80ffaa, #31734e);
		background: -moz-linear-gradient(#31734e, #80ffaa, #31734e);
		background: linear-gradient(#31734e, #80ffaa, #31734e);
		box-shadow: 5px 5px 15px 0 black;
}

.cc2 {
		border-radius: 0.7em;
/*		
      background: linear-gradient(rgb(49, 109, 135), rgb(99, 174, 212), rgb(255, 255, 255), rgb(99, 174, 212), rgb(49, 109, 135) );
*/   
        background: linear-gradient(#347e7a, #8df6fa, #ffffff, #8df6fa, #347e7a);
       
 		box-shadow: 5px 5px 15px 0 black;
}

.cc3 {
		border-radius: 0.7em;
        background: linear-gradient(#36827f, #8dfafa, #ffffff, #8dfafa, #36827f);
 		box-shadow: 5px 5px 15px 0 black;
}
table {
		color: black ;
		border-collapse: separate ;
		border-spacing: 4px;
		border-radius: 0.3em;

  /*padding-top: 10px;*/
  /*padding-right: 30px;*/
  /*padding-bottom: 10px;*/
  /*padding-left: 30px;  */
		font-weight: bold ;
		width: 90% ;
		text-align: center;
	
} 
.table th {
		border: 2px solid green;
		border-radius: 0.3em;
		text-align: center;
}
.table td {
		border: 2px solid green;
		border-radius: 0.3em;
		
		text-align: center;
		align-items: center;
}

h4 {
	color: #0140af ;
	font-weight: bold ;
    padding-right: 20px;
    margin: 1rem;		
} 

h5 {
      color: #0140af ;
      font-weight: bold ;
      padding-right: 40px;
      margin: 1rem;
}

h6 {
      color: #0140af ;
      
      font-weight: bold ;
     /* padding-right: 40px;  */
      margin: 1rem;
}

.label {
      color: #0000b3 ;
      font-size: 16px;
      /*font-weight: bold ; */
      text-align:center;
      
      margin: .3rem;    
}
span{
    font-size: 17px;   
}

div {
    padding: 1px ;
    margin-bottom: 1rem;
} 
.button {
  background-color: #80ffaa; /* Green */
  border: none;
  color: rgb(30, 149, 54);
  padding: 3px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;

  margin: 2px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button2 {
  background-color: #5fc280; 
  color: black; 
  border: 2px solid #008CBA;
  border-radius: 0.5em; 
  
  box-shadow: 6px 6px 8px black;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}  


#cirC {
  width: 15px;
  height: 15px;

	border-radius: 50%;
	position: relative;
}

.select{
    position: relative;


    border-radius: 5px;
    
    border: 1px solid #000;
    text-transform: capitalize;
    color: #fff;
    background: #0a6e28;
    text-align: left;
    /*padding: 0 15px;*/
    font-size: 14px;
    cursor: pointer;
    padding: 3px 5px;
    

    box-shadow: 5px 5px 7px black;
}

.select::after{
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
}

.select:hover{
    background: #7f2d2d;
}

.select.active{
    background: #5b641d;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}