/* k.css */
/* dark mode color variables */
:root {
  --text-color: #D0D0D0;
  --bg-color: #232323;
  --header-color: #780606;
  --nav-bar-color: #008066;
  --nav-text-color: #D0D0D0;
  --side-drop-background: #1F1A1A;
  --side-drop-buttons: #323832;
  --side-drop-btn-hover: #008066;
  --login-form: #4b0404;
  --input-background: #3c3c3c;
}

/* light mode color variables */
[data-theme="light"] {
  --text-color: #232323;
  --bg-color: #F7F7F7;
  --header-color: #780606;
  --nav-bar-color: #008066;
  --nav-text-color: #D0D0D0;
  --side-drop-background: #282222;
  --side-drop-buttons: #323832;
  --side-drop-btn-hover: #008066;
  --login-form: #780606;
  --input-background: #D0D0D0;
}

/* dark mode colors - default */
[data-theme="dark"] {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* =============row column-  k.css=================================================================== */
*{margin:0px;padding:0px}
* {
  box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    // background-color:#232323;
    background-color: var(--bg-color);
	margin: 0;
	padding: 0;
	color: var(--text-color);
  	font-size: 1.2em;
  	line-height: 1.2;
}

.row {
	max-width: 1500px;
	margin-left: auto;
    margin-right: auto;
}
.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

html {
  font-family: sans-serif;
}

.header {
  background-color: var(--header-color);
  font-family: sans-serif;
  color: var(--nav-text-color);
  padding: 6px;
  border: 5px;
  border-color: #000000;
}

.header a: {	
  float: left;
  padding: 10px;
  color: white;
  background-color: var(--header-color);
  text-decoration: none;
  font-size: 17px;    
}
.header a:hover {
  background-color: var(--header-color);
  color: white;
}
.header a:visited {
	color: white;
	text-decoration: underline;
	background-color: var(--header-color);
}
.menu ul {
  list-style-type: none;
  margin: 10px;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #00232f // #0099cc; // #099c36;
  color: var(--nav-text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: var(--side-drop-buttons);
}

.next ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
.next li {
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  padding: 2px 2px 2px 4px;  /* top right bottom left */
  margin-bottom: 0px;
  background-color: var(--login-form);
  color: var(--nav-text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.next li:hover {
  background-color: var(--header-color);
}

.aside {
  background-color: #003243;
  padding: 15px;
  color: var(--nav-text-color);
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.bside {
	background-color: #003243;
	padding: 15px;
	color: var(--nav-text-color);
	text-align: left;
	font-size: 12px;	
	border-radius: 10px;
}
.bside a {
  float: left;
  padding: 12px;
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: 17px;
}

.footer {
  max-width: 1500px;
  color: var(--text-color);
  bottom: 0;
  text-align: center;
  font-size: 11px;
  padding: 6px;
  vertical-align: bottom;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/*
.footer {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color);
  color: var(--text-color);
  text-align: center;
  font-size: 11px;
  padding: 6px;
  vertical-align: bottom;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color);
  color: var(--text-color);
  text-align: center;
  font-size: 11px;
  padding: 15px;
  vertical-align: bottom;
  position: absolute;
  height: 40px;
  bottom: 0;
}
*/

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 20%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 60%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-acc {width: 20%;}
.kontent {
	padding: 0px;
}
.kaption {
	display: block;
	float: right; 
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

/* =============/row column- k.css=================================================================== */
/* =       = */

/* =============status k.css-=========================================================================== */
/* = only using .status and .status status-warning so far... see #status li etc */
.status {
  position: relative;
  padding: 2px 2px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  width: 80%;
  	margin-left: auto;
    margin-right: auto;
}

.status-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.status-warning .status-link {
  color: #523e02;
}

/* =============nav k.css=================================================================== */
.navbar {
  width: 100%;
  background-color: var(--nav-bar-color);
  color: var(--nav-text-color);
  overflow: auto;
  margin:0px;padding:0px;
}

.navbar a {
  float: left;
  display: block;
  padding: 8px;
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: 17px;
}

/* see accordion for .active
.active {
  background-color: var(--header-color);
} */
.navbar .icon {
	display: none;
}

.navbar a:hover {
  background-color: var(--header-color);
  color: white;
}


@media screen and (max-width: 600px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
    
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {
  	position: relative;
  	display: block;
  	}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* =============/nav k.css=================================================================== */
/* dropdown k.css used for secondary pages (not the accordion method, and not used on prod pages) */
.dropbtn {
  background-color: var(--nav-bar-color);
  color: var(--nav-text-color);
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: var(--header-color);
}

/* .dropdown not used in main html */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav-bar-color);
  min-width: 150px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: .8em;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #dbf9fe;}

.show {display: block;}

/* ==============dropdown k.css=========*/

/* =======Accordion k.css========= */

.accordion {
  background-color: var(--side-drop-background);
  color: var(--nav-text-color);
  cursor: pointer;
  padding: 8px; /* 0 */
  width: 100%; /* 100%; */
  border: 4px solid var(--side-drop-background);
  text-align: left;
  outline: none;
  font-size: 1em;
  transition: 0.4s;
  margin 10px; 
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */

}
.accordion-control{
  text-align: left;
  font-size:1rem;
  font-family:'Montserrat';
  background: var(--side-drop-background);
  color: var(--nav-text-color);
  border:none;
  padding: 0.8em 1em;
  cursor:pointer;
}
.active, .accordion:hover {
  background-color: var(--header-color);

}

.panel {
  padding: 2px 2px 2px 8px;  /* top right bottom left */
  width: 100%; /* 100%; 180px; */
  display: none; 
  background-color: var(--side-drop-background);
  overflow: hidden;
  border: 4px solid var(--side-drop-background);
  color: var(--nav-text-color);
  font-size: .8em;
  list-style-type: none; 
}
.panel :hover {
	background-color: #321111; // #96e497; /* #defedb; */
}

.panel ul {
  list-style-type: none;
  background-color: var(--side-drop-background);
  /* list-style: none; old? */
  margin: 10px;
  padding: 0;s
}

.panel li {
  padding: 4px;
  margin-bottom: 0px;
  background-color: var(--side-drop-buttons); /* the selected li is thru .js on the home page orig #099c36; */
  cursor:pointer;
  color: var(--nav-text-color)
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.panel li:hover {
  background-color: #204a87; // #96e497; /* #defedb;  #336b02; */
  color: var(--nav-text-color); //  #d0d0d0;
}
.background_selected {
  background-color : #96e497;
}

/* =============general k.css=================================================================== */

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
	text-decoration: none;
}


a:hover, a:active, a:focus {
	text-decoration: none;
}


/* general */

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue( margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow.) */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}

a img {
  border: none;
}

/* This fixed width container surrounds all other blocks */
.container {
	width: 400px;
	background-color: var(--bg-color);
	margin: auto; /* auto; the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
	display: block;
}

/* /general k.css */



/* login.css */
/* tags = list for input and <a> links */

.tags ul {
  list-style-type: none;
  padding: 4px 8px 4px 8px; /* top right bottom left  padding: 0; */
  margin: 0px;
}

.tags li {
  padding: 4px 8px 4px 12px; /* top right bottom left */
  list-style-type: none;
  margin-bottom: 0px;
  background-color: var(--login-form);
  color: var(--text-color);
  border-radius: 15px;
}

.tags li:hover {
  background-color: var(--header-color);
  border-radius: 15px;
}

.tags select {
  background-color: var(--input-background);
  color: var(--nav-text-color);
  padding: 4px 8px 4px 12px;
  border-radius: 5px;
}

.tags a {
    background-color: var(--login-form);
	border-radius: 15px;
	color: #d0d0d0;
	font-size: 12px;
  	text-decoration: none;
  	font-size: 17px;
}

.tags a:hover {
	background-color: var(--header-color);
}

 .tags a:link {
	color: var(--text-color);
	text-decoration: none;
}

.tags a:visited {
	color: var(--text-color);
	text-decoration: none;
}

/* tagt = list for text only */
.tagt ul {
  list-style-type: none;
  padding: 0:   /* 4px 8px 4px 8px;  top right bottom left  or padding: 0; */
  margin: 0px;
}

.tagt li {
  padding: 4px 8px 4px 8px; /* top right bottom left */
  list-style-type: none;
  margin-bottom: 0px;
  background-color: var(--login-form);
  color: var(--text-color);
  border-radius: 15px;
}

/* input */
input{
	border: 2px solid var(--text-color);
    background-color: var(--bg-color);
    color: var(--text-color);
  	font-family: sans-serif;
  	font-size: 2em;
  	padding: 4px 0px 4px 12px;
  	text-indent: 1px;
  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
  	-webkit-box-shadow: none;
  	-moz-box-shadow: none;
  	box-shadow: none;
 	width: 90%;
 	font-size: 1em;
}

input:focus{
	border-color: var(--text-color);
}

/* button */
#title{
 	position: relative;
 	margin-top: 0.8em;
 	margin-left: 31%;
 	margin-right: 30%;
 	color: var(--text-color);
 	font-size: 3em;
 	text-align: center;
  	font-family: sans-serif;
}

#login{
	position: relative;
	margin-top: 0px;
	/* height: 50px; */
	text-align: center;
	font-size: 1.5em;
  	font-family: sans-serif;
}
 #login_container{

 	position: relative;
 	top: 1em;
 	margin-left: auto;
 	margin-right: auto;
 	width: 380px;
 	height: 20em;
 	border: 2px solid;
 	background: var(--login-form);
    border-radius: 15px;
 }
#login_container_req{
	position: relative;
 	top: 1em;
 	margin-left: auto;
 	margin-right: auto;
 	width: 380px;
 	height: 34em;
 	border: 2px solid;
 	background: var(--login-form);
    border-radius: 15px;
}

 #login_table{

 	position: relative;
 	margin-left: 10%;
 	margin-right: 5%;
 	margin-top: 10%;

 }

 #col1{
 	width: 90%;
 	font-size: 1.2em;
 	color: var(--text-color);
  	font-family: sans-serif;
 }

 #col2{
 	width: 60%;
 	padding-top: 5px;
 	padding-bottom: 5px;
  	float: right;
}


#btn{
  width: 80px;
  bottom: relative;
  margin-left: 80px;
  padding: 4px 0px 4px 8px; /* top right bottom left */
  padding-right: 5px;
  border: 2px solid var(--text-color);
  font-size: 1.2em;
  font-family: sans-serif;
  background: #2e6f24;  /* #*/
  color: var(--text-color);
  float: center;
  border-radius: 6px;
  cursor: pointer;
}

#btn2{

  width: 60%;
  position: relative;
  margin-left: 10%;
  font-size: 1.2em;
  font-family: sans-serif;
  background: black;
  color: var(--text-color);
  width: 25%;
  margin-top: 2%;
}


#btn:hover{
    background-color: var(--header-color);
    color: var(--text-color);
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}

#btn2:hover{

  background-color: rgb(81, 86, 87);
    color: white;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}

#statusLi{
	color: #336b02;
}

#required_text{
	position: relative
	font-size: 1em;
	color: #fce94f;
	visibility: hidden;
}


#not_matching{
    position: relative;
	font-size: 1em;
	color: #fce94f;
	visibility: hidden;
}
#signup_button{

  text-decoration: none;
}

#guest{
  color: white;
  font-size: 1.2em;
  position: relative;
  left: 20%;
  text-decoration: none;
}

#fg_pass{

  color: white;
  font-size: 1.2em;
  position: relative;
  left: 15%;
  text-decoration: none;
}

#doesnot{

  font-weight: bold;
  color: black;
  text-align: center;
  position: relative;
  margin-top: 0%;
  font-size: 3em;
}

#goback{

  font-weight: bold;
  color: blue;
  text-decoration: none;
  position: relative;
  text-align: center;
  font-size: 2em;
}


/* /login.css */