@font-face {
    font-family: Metal;
    src: url('metal_lord-webfont.woff2') format('woff2'),
	url('metal_lord-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Chick;
    src: url('chick___-webfont.woff2') format('woff2'),
	url('chick___-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Pistoleer;
    src: url('pistoleer-webfont.woff2') format('woff2'),
	url('pistoleer-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "SiyamRupali";
  src: url("Siyamrupali0.eot"); /* IE9 Compat Modes */
  src: url("Siyamrupali0.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("Siyamrupali0.otf") format("opentype"), /* Open Type Font */
    url("Siyamrupali0.svg") format("svg"), /* Legacy iOS */
    url("Siyamrupali0.ttf") format("truetype"), /* Safari, Android, iOS */
    url("Siyamrupali0.woff") format("woff"), /* Modern Browsers */
    url("Siyamrupali0.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Anmona";
  src: url("FN-Badhon-Anmona-Unicode.eot"); /* IE9 Compat Modes */
  src: url("FN-Badhon-Anmona-Unicode.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("FN-Badhon-Anmona-Unicode.otf") format("opentype"), /* Open Type Font */
    url("FN-Badhon-Anmona-Unicode.svg") format("svg"), /* Legacy iOS */
    url("FN-Badhon-Anmona-Unicode.ttf") format("truetype"), /* Safari, Android, iOS */
    url("FN-Badhon-Anmona-Unicode.woff") format("woff"), /* Modern Browsers */
    url("FN-Badhon-Anmona-Unicode.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


* {
	
	margin: 0;
	padding: 0;
}

body {
	font-family: SiyamRupali;
	color: black;
	background: #F8F8FF;
}

a:link {
    text-decoration: none;
	color: #343641;
	
}
a:visited {
    text-decoration: none;
	color: #343641;
	
}
a:hover {
    text-decoration: none;
	color: darkred;
	
}
a:active {
    text-decoration: none;
	color: darkred;
    
}

.header {

	width: 80%;
	margin: 20px auto 0px;
	color: #343641;
	background: #e7dfd8;
	text-align: center;
	border: 1px solid #009933;
	border-bottom: none;
	border-radius: 10px 10px 0px 0px;
	padding: 20px;
}

h1{
	
	text-decoration: none;
}


.form {
	width: 50%;
	margin: 0px auto;
	padding: 20px;
	border: 1px solid #009933;
	border-bottom: none;
	background: #F8F8FF;
	border-radius: 0px 0px 0px 0px;
}

.content {
    font-family: SiyamRupali;
	width: 80%;
	margin: 0px auto;
	padding: 20px;
	border: 1px solid #009933;
	background: #F8F8FF;
	border-radius: 0px 0px 0px 0px;
}

.center {
	text-align: center;
	padding-left: 20px;
}

.input-group {
	margin: 10px 0px 0px 0px;
}

.input-group label {
	display: block;
	color: black;
	text-align: left;
	margin: 3px;
}

.input-group input {
	height: 20px;
	width: 20%;
	background: #E7F9E5;
	padding: 10px 10px 10px 10px;
	font-size: 15px;
	border-radius: 5px;
	border: 1px solid #009933;
}

.input-group radio {
	
}

.input-group textarea {
	height: 60px;
	width: 80%;
	padding: 10px 10px 10px 10px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid #009933;
    margin-bottom: 1em;
}

.btn {
	padding: 10px;
	font-size: 15px;
	color: white;
	background: #009933;
	border: 1px solid gray;
	border-radius: 5px;
}

.footer {
	font-family: SiyamRupali;
	font-size: 20px;
	width: 80%;
	margin: 0px auto 20px;
	color: #e7dfd8;
	background: #e7dfd8;
	text-align: center;
	border-top: 0px;
	border-bottom: 1px solid #009933;
	border-left: 1px solid #009932;
	border-right: 1px solid #009933;
	
	border-bottom: none;
	border-radius: 0px 0px 10px 10px;
	padding: 20px;	
}
.owahi {
  font-size: xx-large;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #009933;
    margin: 1em 0;
    padding: 0; 
}

.shout-group {    
    text-align: left;
    text-decoration: none;
    color: black;   
}

.shout-group label {    
    text-decoration: none;
    font-size: 95%; 
    
}

p {
    text-align: left;
    text-decoration: none;
    color: dimgray;
    font-size: 90%;
    margin-top: 4px;
}

span {   
    text-decoration: none;
    color: darkslategray;
    font-size: 95%;
    border-bottom: 1px solid #ccc;  
}

.error {
	width: 70%;
	background: #E7F9E5;
	margin: 0px auto;
	text-align: center;
	padding: 10px;
	border: 1px solid red;
	border-radius: 5px 5px 5px 5px;
}

.erms {   
    text-decoration: none;
    color: darkred;
    font-size: 95%;  
}

.logout {   
	width: 60%;
	margin: 0px auto;
    text-decoration: none;
	text-align: center;
    color: darkslategray;
    font-size: 95%;
    border-radius: 5px 5px 5px 5px;
	border: 1px solid #009933;
	padding: 10px;
	background: #E7F9E5;	
}


/* Media Query */
@media screen and (max-width: 767px){
	
	body, .header, .form, .content, .footer, h1, .input-group, .input-group input{
		margin: 0 auto;
		padding: 0;
		text-align: center;
		width: 100%;
	}
	
	.input-group input {
		height: 20px;
		width: 50%;
		background: #E7F9E5;
		padding: 10px;
		font-size: 15px;
		border-radius: 5px;
		border: 1px solid #009933;
	}
	.content {
	padding-top: 15px;

		
		
	}
	
	.header{
		font-size: 2rem;
		text-decoration: none;
		padding-top: 15px;
	}
	
	.footer{

		font-size: 1.5rem;
		text-decoration: none;
		padding-top: 15px;
	}
	
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

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

sup, sub {
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: calc(0.5em + 4px);
  /* Formula: Superscript/Subscript Position × Browser's default sup/sub scaling factor (0.83) × Parent Font Size (2 × (1em - 4px)) */
  top: calc(-0.83em + 3.32px);
}

sub {
  font-size: calc(0.5em + 4px);
  /* Formula: Superscript/Subscript Position × Browser's default sup/sub scaling factor (0.83) × Parent Font Size (2 × (1em - 4px)) */
  top: calc(0.42em - 1.66px);
}

.p1 {
  font-family: "Anmona", "SiyamRupali";
}

.show {
    display: block;
}

.hidden {
    display: none;
}