@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css");

html, body {
    margin: 0;
    padding: 0;
		/*font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;*/
		font-family: 'Metropolis', sans-serif;
        font-size: 14px;
        line-height: 18px;
	 	
}



.header-outer-container {
    display: flex;
    width: 100%; /* Occupy full width of its parent (the body) */
    min-height: 200px; /* Example height */
    background-color: black;
    padding: 30px 0 0 30px;
    box-sizing: border-box; /* Include padding in the width calculation */
    /* The height is typically determined by its content to be naturally responsive */
    display: flex;
    flex-direction: column; /* Stacks items by default on small screens */

}

.header-inner-div {
    width: 90%; /* Takes up 80% of the outer-container's width */
    max-width: 1000px; /* Prevents it from getting too large on big screens */
    color: white;
    padding: 15px;
    box-sizing: border-box;
    
    
}

image-container {
  width: 100px;  /* Set the desired fixed width for the div */
  height: 100px; /* Set the desired fixed height for the div */
  border: 1px solid black; /* Optional: visualize the div's boundaries */
}

.image-container img {
  width: 50%;       /* Image takes the full width of the container */
  height: 50%;      /* Image takes the full height of the container */
  /*object-fit: cover;  Scales the image proportionally to fill the div and crops overflow */
}

/* Optional: style the p tag and remove default margins */
.h1-head {
  color: gold;
  font-size: 20px;
  font-family: 'Oswald', sans-serif;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center; /* Ensures text inside the p tag is also centered */
  line-height: 30px;
  margin: 100px 0 0 0 ;
}

.h2-head {
  font-size: 30px;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center; /* Ensures text inside the p tag is also centered */
}

.h3-head {
  font-size: 20px;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center; /* Ensures text inside the p tag is also centered */
  border-radius: 25px;
  background-color: gray;
  padding: 20px; 
  padding: 20px 40px 20px 20px;
  text-align: center;
  
}

/* Media query for screens wider than 600px */
@media only screen and (min-width: 480px) {
    .header-outer-container {
        flex-direction: row; /* Arranges items side-by-side on large screens */
    }
    .header-outer-container img {
        width: 200px;
    }
    .h1-head {
        flex: 1; /* Distributes available space equally */
        font-size: 24px;
    }
    .h2-head {
        font-size: 30px;
    }
    .h3-head {
        font-size: 20px;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center; /* Ensures text inside the p tag is also centered */
  border-radius: 25px;
  background-color: gray;
  padding: 20px 40px 20px 20px;
  text-align: center;
    }
}
/* July 2017  GRID OF THREE   ============================================================================= */

img {

    max-width: 100%;
    height: auto;
}
.center-container
{
     text-align: center;
}

.center-container-shaded
{
     text-align: center;
     background: #EBEBEB;
     margin-bottom: 50px;
     padding-bottom: 50px;
}

.center-container-shaded img
{
     margin: 25px;
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 10px 30px 0px 20px;
	
}

.section2 {
	clear: both;
	padding: 0px;
	margin: 10px 30px 0px 20px;
	vertical-align: middle;
	
}

.section-shaded {
	clear: both;
	padding: 0px;
	margin: 10px 30px 0px 10px;
	background: #C0C0C0;
	
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	
	
}

.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%;  }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
.span_1_of_3a { width: 32.26%; }
.span_1_of_5 { width: 18.72%; }

.hiddenlogo {visibility: hidden;}
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3, .span_1_of_5 { width: 100%; }
	.span_1_of_3a {visibility: hidden; width: 100%;}
		
	.hiddenlogo {visibility: visible; padding: 5px;}
}

/*RSPONSIVE DIV FOR FORMS*/
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 2px;
    margin:;
    width: 75%;
}
@media only screen and (max-width: 480px) {
	.container {width: 100%;}
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
    padding: 5;
    text-align: right;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
    padding: 5;
}

.row {
  display: ;
  background: #f6f6f6;
  
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}



/*These are the cool dots leads*/

ul.leaders {
    max-width: 40em;
    padding: 5;
    
    overflow-x: hidden;
    list-style: none;
    font-size: large;
   
    line-height: 1.6;
    color: #002C64;}

ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: #f2f2f2}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: #f2f2f2}
    

/* The arrow leaders */
ul.arrow {max-width: 38em; padding: 0; margin: 0; list-style: none;
  overflow: hidden; size: 14px;}
ul.arrow span:first-child {padding-right: 0.33em; background: #f2f2f2}
ul.arrow span + span {float: right; background: #f2f2f2}
ul.arrow span + span:before {display: inline-block; text-align: right;
  line-height: 1; margin-left: -80em; width: 80em; font-family: Symbol, Symbols;
  content: "⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯→\2008"}
ul.arrow li {clear: both}




.bigjournaltitle{

    font-family: times, Times New Roman, times-roman, georgia, serif;
	color: #444;
	/*color: #004080;*/
	margin: 0;
	padding: 0px 0px -6px 0px;
	font-size: 28px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;
	text-shadow: 1px 1px 1px #ccc;
	float: right;	
	border: 1px solid #CCC;
	text-align: center;
}
.headline2 {
        font-family:Georgia,serif;
	color:#333333;
	font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0;
	 font-size: 18px;
	 border-bottom-style:solid;
	border-bottom-color: #999;
}

.p start {
        font-family:Georgia,serif;
	font-size: .8em;
        font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px; 
}


input[type="text"]:disabled {
  background: #EBEBEB;
  color: #121212;
  font-weight: bold;
  font-style: italic;
  cursor: no-drop;
}

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid darkgreen;
    max-width: 400px;
    border-radius: 3px;
    overflow: hidden;
    /*Jason*/
    
}


 
/*CSS for customized input file button*/
fieldset{
  padding: 10px;
  border-radius: 4px;

}


.__lk-fileInput {
  cursor: pointer;
}
.__lk-fileInput input {
  display: none;
}
.__lk-fileInput span {
  color: #fff;
  margin: 0 0 10px;
  padding: 5px 10px;
  text-decoration: none;
  background: #002C64;
  background: darkgreen;
  border-radius: 4px;

}
.__lk-fileInput span:hover {
  background: #2683E1;
  background: #ccc;
}
.__lk-fileInput span.withFile:after {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTA5OEU0M0REOUIwMTFFMzg4Q0VDNDEwMTU1QkU0MUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTA5OEU0M0VEOUIwMTFFMzg4Q0VDNDEwMTU1QkU0MUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMDk4RTQzQkQ5QjAxMUUzODhDRUM0MTAxNTVCRTQxQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMDk4RTQzQ0Q5QjAxMUUzODhDRUM0MTAxNTVCRTQxQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PolX3bIAAADWSURBVHjadNHNCkFBFMDxSYq9UsoCC4/gZqFEiXLZSKy8nJ2Pja6FB1A8i/KRuEjXfzSXY3DqV3Nnzpx7TqOCIMhjgAkSUJYkRugjG1VKFeGiBgdz9RmOObvgWWEWvOOMlqiu1745u2OsN9No42YOLqigbNbhXgMp2WsdW5NwE8kbVMM8e8ASrlaLjsyJWAPG1HfEP77+DOiLlo6m3VdLOXRFK3qOAoo4iAIdZPQFT/R8ktXQFH/VMVXmlfVL7qzkkIs9hujpl16G42D9Y+gVFvD0+iHAAMR9gu9PEii4AAAAAElFTkSuQmCC');
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}



h1 {

font-size: 1.0em;
font-weight: 600;
color: darkgreen;
border-bottom: 3px solid #666;
}

 
 
 
a:link {
	color: #121212;

	text-decoration: none;
font-weight: bold;

}
a:visited {
	color: #121212;
	text-decoration: none;
	font-weight: 900;
}
a:hover {
	color: #009be3;
	color: #004080;
text-decoration:underline;
}
a:active {
	color: #333333;
text-decoration: none;
}

.white a{color: #FFF:}





.btn {
  background: #27a127;
  background-image: -webkit-linear-gradient(top, #368036, #105905);
  background-image: -moz-linear-gradient(top, #368036, #105905);
  background-image: -ms-linear-gradient(top, #368036, #105905);
  background-image: -o-linear-gradient(top, #368036, #105905);
  background-image: linear-gradient(to bottom, #368036, #105905);
  -webkit-border-radius: 13;
  -moz-border-radius: 13;
  border-radius: 13px;
  text-shadow: 6px 1px 3px #666666;
  -webkit-box-shadow: 4px 3px 14px #666666;
  -moz-box-shadow: 4px 3px 14px #666666;
  box-shadow: 4px 3px 14px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 33px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin: 10px;
}

 
 
.btn2 {
  background: #121212;
  background-image: -webkit-linear-gradient(top, #121212, #333333);
  background-image: -moz-linear-gradient(top, #121212, #333333);
  background-image: -ms-linear-gradient(top, #121212, #333333);
  background-image: -o-linear-gradient(top, #121212, #333333);
  background-image: linear-gradient(to bottom, #121212, #333333);
  font-family: Georgia;
   -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 0px;
  font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
}

.btn2:hover {
  background: #22691a;
  text-decoration: none;
  
}

.btn:hover {
  background: #a1a5a8;
  background-image: -webkit-linear-gradient(top, #a1a5a8, #505457);
  background-image: -moz-linear-gradient(top, #a1a5a8, #505457);
  background-image: -ms-linear-gradient(top, #a1a5a8, #505457);
  background-image: -o-linear-gradient(top, #a1a5a8, #505457);
  background-image: linear-gradient(to bottom, #a1a5a8, #505457);
  text-decoration: none;
}

.btnsmall {
  background: #27a127;
  background-image: -webkit-linear-gradient(top, #368036, #105905);
  background-image: -moz-linear-gradient(top, #368036, #105905);
  background-image: -ms-linear-gradient(top, #368036, #105905);
  background-image: -o-linear-gradient(top, #368036, #105905);
  background-image: linear-gradient(to bottom, #368036, #105905);
  -webkit-border-radius: 13;
  -moz-border-radius: 13;
  border-radius: 13px;
  text-shadow: 6px 1px 3px #666666;
  -webkit-box-shadow: 4px 3px 14px #666666;
  -moz-box-shadow: 4px 3px 14px #666666;
  box-shadow: 4px 3px 14px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.btnsmall:hover {
  background: #a1a5a8;
  background-image: -webkit-linear-gradient(top, #a1a5a8, #505457);
  background-image: -moz-linear-gradient(top, #a1a5a8, #505457);
  background-image: -ms-linear-gradient(top, #a1a5a8, #505457);
  background-image: -o-linear-gradient(top, #a1a5a8, #505457);
  background-image: linear-gradient(to bottom, #a1a5a8, #505457);
  text-decoration: none;
}

.errorreporting {
/*Currently set to white colored font since folks don't need to see this reporting*/
    border-radius: 25px;
    
    background: #333;
    color: darkgreen;
    background: white;
    color: white;
    padding: 20px;
    width: 100%;
    height: 100%;
    font-family: Courier;
}


/*body styles*/

.logintop {
	font: 10px Tahoma,Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	
}

.logintop a{
	color: #76b900;
}
.logintop a:hover{
	color: #EBEBEB;
	text-decoration:underline;
}


.logintable {
	table-layout: fixed;
	border-bottom-color: #009be3;
	border-bottom-style: solid;
	border-bottom-width: medium;
	/*background-color:#000
	background-image:url(http://iteaonline.org/design_img/general/gradient.jpg);
	background-attachment:fixed;;*/
	background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

	height:5px;
	
}

.logo {
	background-image:url('https://www.iteaonline.org/design_img/logos/logo300w.jpg');
	background-repeat:no-repeat;
	background-color:#FFF;

}


.headerzzz {
	width: ;
	font: 10px Tahoma,Verdana, Geneva, Arial, Helvetica, sans-serif;
	position:relative;
height:;
width:100%;
z-index:100;
	/*background: url('http://falconefestival.org/templates/joomspirit_18/images/background.jpg') no-repeat center top fixed #000;
  	height:;
	padding: 5px;
	/*border-top-style: solid;
	border-left-style: solid; 
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #ccc;
	border-left-color:#009BE3; 
	border-right-color: #009BE3;
	border-bottom-color: #009BE3;
	border-bottom-width:thin;
	border-top-width:thin;
	border-left-width:thin; 
	border-right-width:thin;
	background-color:white;
-webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -moz-box-shadow: 0 0 10px 5px #333;
-webkit-box-shadow: 0 0 10px 5px #333;
box-shadow: 0 0 10px 5px #333;
border-radius: 0px 0px 5px 5px;*/

	
	
}
#wrapper {
position:relative;
text-align:left;
margin:10px auto 0 15px;
}
#header {
position:relative;
height:165px;
width:100%;
z-index:100;
}
#logo {
position:relative;
text-align:center;
padding-top:10px;
height:150px;
overflow:hidden;
z-index:1;
}

#logo p {
margin:0;
}

#logo a, #logo a:hover {
text-decoration : none;
outline:none;
}

.logindiv {
float:left;
 top:0;
 right:30;
 width:400px;
  border-radius: 25px;
    border: 2px solid #73AD21;*/
    padding: 20px;
 }
 #div-1 {
 position:relative;
}

.verifydiv {
display:inline-block;
float:left;
 max-width:100%;
  border-radius: 8px;
    border: 2px solid #ccc;
    padding: 20px;
    margin: 5px;
 }
 
 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
    .verifydiv {
        max-width: 75%;
        margin-top: 0;
        text-align: left;
    }
}

.numberCircle {
  border-radius: 50%;
  display: block;
  width: 40px;
  height: 30px;
  padding: 6px 12px 8px  8px ;
  background: #fff;
   background: #002C64;
  border: 2px solid #666;
  color: #666;
  color: white;
  text-align: center;
  font: 12px Arial, sans-serif;
}


.logout{
  display: inline-block;
  float: right;
  width: 300px;
  height: 100px;
  margin: 1em;
}


.loginbox{
border-color: #0f5177;
font-size:18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-style:solid;
border-width:1px;
height: ;
border: 2px solid;
padding: 10px;
border-radius: 10px;    


}

.loginbox:hover {
transition: all 0.5s;
background-color: darkgreen;
  opacity: 1;
  right: 0;
  color: white;
}
.smaller-button {
  display: inline-block;
  border-radius: 4px;
  background-color: darkgreen;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 10px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
}

.smaller-button:hover {
  padding-right: 25px;
}

.smaller-button:hover:after{
  opacity: 1;
  right: 0;
}

.smaller-button2 {
  display: inline-block;
  border-radius: 5px;
  background-color: #FFF;
  border: none;
  padding: 5px;
  color: #121212;
  text-align: center;
  font-size: 10px;
  width: ;
  transition: all 0.5s;
  cursor: pointer;
}

.smaller-button2:hover {
  
}

.smaller-button2:hover:after{
  opacity: 1;
  right: 0;
}

.excel-btn {
  background-color: #002C64;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

/* Darker background on mouse-over */
.excel-btn:hover {
  background-color: RoyalBlue;
}



#return-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}