html {
height: 101%;
margin-bottom: 1px;
background-color:#ececeb;
background-repeat:no-repeat;
background-position:top center;
}

.clear {
	clear:both;
}

/* ======== LAYOUT RULES ======== */
#wrapper-panel {
	color: #000000;
	max-width: 1300px;
	width: 75%;
	margin: 20px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
	background-color: #ce551b; /*#4dbcda;  #649485;   #dbd6d2;*/
	background-image: url("../images/transp_texture_natural-paper.png");
    box-sizing: border-box;
	/*background-color: fuchsia;*/
}

.center {
	text-align: center;
}


.wrap-login {
    max-width: 500px;
    background: #ffffff;
    border-radius:10px;
    /* Per Gemini Mar 18, 2025 
    margin: 0 auto; sets the top and bottom margins to 0 and the left and right margins to auto. 
    This tells the browser to distribute the remaining horizontal space equally on both sides, 
    effectively centering the element.*/
    margin: 0 auto; 
    padding:65px 55px 54px 55px;
    box-sizing: border-box;
}

.login-form{
    width:100%;
}

.login-form-title{

    font-size: 1.5em;
    font-weight: bold;

    /*
    font-family: Poppins-Bold;
    font-size: 39px;
    font-weight: 400;
    */

    display: block;

    color: #333333;
    line-height: 1.2;
    text-align: center;
    padding-bottom: 25px;
    margin: 0px;
    box-sizing: border-box;


}

.wrap-login-input{
    width:100%;
    border-bottom: 2px solid #d9d9d9;
    text-align: left;
    position: relative;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

}



.login-label-input{
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    padding-left: 7px;
    font-weight: 400;
    width:100%;

    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

.login-input{
    font-size: 16px;
    color: #333333;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 55px;
    padding: 0 7px 0 43px;
    margin: 0;
    box-sizing: border-box;

    background: transparent;
    outline: none;
    border: none;
    background-color:#ffffff;
    -moz-autofill-background: transparent;

    /* 
    background-color:#ffffff;
    border-style:none;
    border-color: #ffffff;
    */
}


/* For Chrome, Edge, and Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important; /* Replace 'white' with your desired background color */
  -webkit-text-fill-color: #333 !important; /* Optional: Change text color */
}

/* For Firefox */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active {
  background-color: white !important; /* Replace 'white' with your desired background color */
  color: #333 !important; /* Optional: Change text color */
}

/* Standard CSS (may not work reliably for autofill, but good practice) */
input {
  background-color: white; /* Your default background color */
}

/*---------------------------------------------*/
.focus-input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  
  .focus-input::after {
    content: attr(data-symbol);
    /*font-family: Material-Design-Iconic-Font;*/
    font-family: FontAwesome;
    color: #adadad;
    font-size: 22px;
  
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: calc(100% - 20px);
    bottom: 0;
    left: 0;
    padding-left: 13px;
    padding-top: 3px;
  }
  
  .focus-input::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #7f7f7f;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  
  .input:focus + .focus-input::before {
    width: 100%;
  }
  
  .has-val.input + .focus-input::before {
    width: 100%;
  }
  
  .input:focus + .focus-input::after {
    color: #a64bf4;
  }
  
  .has-val.input + .focus-input::after {
    color: #a64bf4;
  }

  .validate-input {
    position: relative;
}

/****************************************************/





.form-text-right{
    text-align: right !important;
    padding-bottom: 31px;
    padding-top: 8px;
}




.container-login-form-btn{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wrap-login-form-btn{
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 5px 30px 0px rgba(206, 85, 27, 0.5);
    -moz-box-shadow: 0 5px 30px 0px rgba(206, 85, 27, 0.5);
    -webkit-box-shadow: 0 5px 30px 0px rgba(206, 85, 27, 0.5);
    -o-box-shadow: 0 5px 30px 0px rgba(206, 85, 27, 0.5);
    -ms-box-shadow: 0 5px 30px 0px rgba(206, 85, 27, 0.5);
}

.login-form-bgbtn{
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #ce551b;
    /*
    background: #a64bf4;
    background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: -o-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
    */
    top: 0;
    left: -100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}


.login-form-btn{
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;

    outline: none !important;
    border: none;
    background: transparent;
}

.wrap-login-form-btn:hover .login-form-bgbtn {
    left: 0;
    color: #000
  }

.login-form-btn:hover{
    color: #000;
}
.wrap-login-form-btn:hover{
    box-shadow: 0 5px 30px 0px rgba(238, 79, 6, 0.5);
    -moz-box-shadow: 0 5px 30px 0px rgba(238, 79, 6, 0.5);
    -webkit-box-shadow: 0 5px 30px 0px rgba(238, 79, 6, 0.5);
    -o-box-shadow: 0 5px 30px 0px rgba(238, 79, 6, 0.5);
    -ms-box-shadow: 0 5px 30px 0px rgba(238, 79, 6, 0.5);
}


/**********************************************************************************/
/**********************************************************************************/
/* -------------------------------- 
		Grid 
-------------------------------- */
/**********************************************************************************/
/**********************************************************************************/

.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
}
	
.cards-container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /*cards are a minimum width of 200px and a max width of 1fr*/
 grid-gap: 1rem;
}
.layout {
    width: 100%; 
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    display: none;
  }


.grid-menu-wrapper {	
	display: grid;
    grid-gap: 3.5%;
	grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(3, auto);
	/*
	grid-template-columns: repeat(3, minmax(10px, 1fr));
	grid-template-columns: repeat(3, 1fr);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 31%);
 
	grid-column-gap: 4px;
	grid-row-gap: 1px;
	*/

	text-align: center;
    box-sizing: border-box;
    /*background-color: #efefef;*/
}

.box-title {		

	grid-column: 1 / 4;
	grid-row: 1 / 2;
	
	color: #000;
	text-align: center;
	padding: 0px 0px;
	font-size: 100%;
	font-weight: bold;
	/*background: purple;*/
}


.box-top-left {			
	grid-column: 1 / 2;
	grid-row: 2 / 3;

	/*background-color: fuchsia;*/
}

.box-top-middle {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	box-sizing: border-box;	  
	/*background-color: gray;*/
}


.box-top-right {
	grid-column: 3 / 4;
	grid-row: 2 / 3;

	/*background-color: orange;*/
}

.box-mid-left {			
	grid-column: 1 / 2;
	grid-row: 3 / 4;

	/*background-color: pink;*/
}

.box-mid-middle {
	grid-column: 2 / 3;
	grid-row: 3 / 4;

	/*background-color: purple;*/
}


.box-mid-right {
	grid-column: 3 / 4;
	grid-row: 3 / 4;

	/*background-color: limegreen;*/
}

.home-help {			
	/*IE 11 support*/ 
	-ms-grid-row:3; 
	-ms-grid-column:2; 
	-ms-grid-column-span:1;

	/*Modern browsers*/
	grid-row: 4 / 5;
	grid-column: 1 / 2;
	
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	/*background-color: rgb(218, 171, 171);*/
	
}


.audio {
	/*IE 11 support*/
	-ms-grid-row:3; 
	-ms-grid-column:6; 
	-ms-grid-column-span:1;
	
	/*Modern browsers*/
	grid-row: 4 / 5;
	grid-column: 3 / 4;
  
	text-align: right;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	/*background-color: rgb(179, 12, 12);*/
	
}

.testing {
	/*IE 11 support*/
	-ms-grid-row:4; 
	-ms-grid-column:4; 
	-ms-grid-column-span:1;
	
	/*Modern browsers*/
	grid-row: 4 / 5;
	grid-column: 2 / 3;	

    /*background-color: rgb(14, 10, 250);*/
}



/* ======== IMAGE SIZING ======== */
.image img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}


/* ======== color: #4dbcda; ======== */

.box {
    display:table-cell;
    text-align: center;
	vertical-align: middle;
	align-self: center;
	justify-self: center;
	box-sizing: border-box;
	/*padding: 10px 20px 10px 20px;*/
	padding: 10px;
	width: 75%;
	/*cursor: pointer;*/
	/*display: block;*/
	box-sizing: border-box; /* very important */
}



.button {
	/*Gemini Mar 13, 2025*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 150px; /* Adjust as needed */
    max-width: 100%; /* Ensures button doesn't exceed container width */
    min-height: 40px; /* Adjust as needed */

	background: #ffffff;
	color: #13311B;
	font-family: 'Outfit', sans-serif;
	text-decoration: none;
	font-weight: 400;
	font-size:2em;
	
	padding: 30px;
	margin:10px;

	border:  thick #13311B solid;
	box-shadow: 0 2px 3px #000;
	border-radius: 50px;

    box-sizing: border-box; /* very important */
	/*Adding box-sizing: border-box; is crucial. 
	It changes how the browser calculates the total width and height of an element.   
	With box-sizing: border-box;, padding and border are included in the element's width and height. 
	This prevents the button from exceeding its container when you add padding.
	Without box-sizing border box, the padding will be added to the width, and the button will exceed the width of its container.*/
}

.button:hover {
	color: #958D8C;
	background: #efefef;
	border:  thick #958D8C solid;
	text-decoration: none;
	font-weight: normal;
}

#nameplate h1 {
	 font-family: "Exo 2", sans-serif; 
	 font-size:4em;	
	 font-weight: 400;
     margin-top: 0px;
     margin-bottom: 0px;
}

a{
	color: #13311B;
	font-weight: bold;
}

a:visited{
	color: #13311B;
	font-weight: bold;
}

a:hover{
	color: #958D8C;
	text-decoration: underline;
	font-weight: bolder;
	outline: none;
}

a{
	color: #13311B;
	font-weight: bold;
}

a:visited{
	color: #13311B;
	font-weight: bold;
}

a:hover{
	color: #958D8C;
	text-decoration: underline;
	font-weight: bolder;
	outline: none;
}

#top-in-links {
    margin-left:10px;
    /*margin-top:10px;  did not work not staying in wrapper */
    padding-top: 5px;
}

.links a {
	color: #13311B;
	text-decoration: none;
	outline: none;
}
	
	
.links a:visited {
color: #13311B;
text-decoration: none;
outline: none;
}
	
.links a:hover {
color: #958D8C;
text-decoration: none;
font-weight: bold;
outline: none;
}

.emphasize {
	color: #b30050;
	font-weight: bold;	
    text-align: left;
    margin-top: 0px;
    padding-top: 0px;
}

/* ================================================================================================================== */
/* ================================================================================================================== */
/* ====================== MEDIA QUERIES ===================== */
/* ================================================================================================================== */
/* ================================================================================================================== */

/* ========================================================== */
/* ====================== PHONE/PORTRAIT ==================== 
/* ======================     PURPLE     ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {

#wrapper-panel {
	width: 100%;
	margin: 10px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
}
	
.grid-menu-wrapper {
	width: 95%;
	margin: 10px auto;
	font-size: 0.90em;
	text-align: center;
	grid-gap: 1.5%;
	grid-template-rows: repeat(10, auto);
	grid-template-columns: 98%;
	/*background-color: purple;*/
}

.button {
	font-size: 1.5em;
	padding: 22px;
	margin:5px;	
	border:  medium solid;
	box-shadow: 0 1px 2px #000;
	border-radius: 50px;
}

.box {
	padding: 5px 10px 5px 10px;
}

.box-title {		
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.box-top-left {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	/*background-color: fuchsia;*/
}

.box-top-middle {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	/*background-color: gray;*/
}

.box-top-right {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 4 / 5;
	/*background-color: orange;*/
}

.box-mid-left {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 5 / 6;
	/*background-color: fuchsia;*/
}

.box-mid-middle {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 6 / 7;
	/*background-color: gray;*/
}

.box-mid-right {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 7 / 8;
	/*background-color: orange;*/
}

.home-help {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 8 / 9;
	/*background-color: gray;*/	
}

.audio {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 9 / 10;
	/*background-color: gray;*/	
}


}



/* ========================================================== */
/* ================== SMALL TABLET/LANDSCAPE ================ */
/* ======================      BLUE      ==================== */
/* ========================================================== */
@media screen and (min-width: 321px) and (max-width: 669px) {
	
#wrapper-panel {
	width: 100%;
	margin: 10px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
}
	
.grid-menu-wrapper {
	width: 95%;
	margin: 10px auto;
	font-size: 0.90em;
	grid-gap: 2%;
	grid-template-rows: repeat(10, auto);
	grid-template-columns: 98%;
	/*background-color: blue;*/
}

.button {
	font-size: 1.5em;

	padding: 20px;
	margin:5px;
	
	border:  medium solid;
	box-shadow: 0 1px 2px #000;
	border-radius: 50px;
}

.box {
	padding: 5px 10px 5px 10px;
}

.box-title {		
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	/*background: purple;*/

}

.box-top-left {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	/*background-color: fuchsia;*/
}

.box-top-middle {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	/*background-color: gray;*/
}

.box-top-right {

	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 4 / 5;
	/*background-color: orange;*/
}

.box-mid-left {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 5 / 6;
	/*background-color: fuchsia;*/
}

.box-mid-middle {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 6 / 7;
	/*background-color: gray;*/
}

.box-mid-right {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 7 / 8;
	/*background-color: orange;*/
}

.home-help {			
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 8 / 9;
	/*background-color: gray;*/	
}

.audio {
	/*Modern browsers*/
	grid-column: 1 / 2;
	grid-row: 9 / 10;
	/*background-color: gray;*/	
}
}

/* ========================================================== */
/* ================== LARGE TABLET PORTRAIT ================= */
/* ======================      LIME      ==================== */
/* ========================================================== */
@media screen and (min-width: 670px) and (max-width: 1079px) {

	
#wrapper-panel {
	width: 100%;
	margin: 10px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
}
	
.grid-menu-wrapper {
	width: 98%;
	margin: 10px auto;
	font-size: 0.90em;
	grid-gap: 2%;
	/*background-color: lime;*/
}

.button {
	font-size: 2em;
	padding: 20px;
	margin:5px;
	
	/*border:  medium #30A77F solid;*/
	box-shadow: 0 1px 2px #000;
	border-radius: 50px;
}


}

/* ========================================================== */
/* ======== LARGE TABLET PORTRAIT/DESKTOP/LAPTOP VIEW ======= */
/* ======================     YELLOW     ==================== */
/* ========================================================== */
@media screen and (min-width: 1080px) and (max-width: 1279px) {

	
#wrapper-panel {
	width: 90%;
	margin: 10px auto 1px auto;
	padding: 0;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0 0 10px #000;
}
.grid-menu-wrapper {
	width: 98%;
	margin: 10px auto;
	/*background-color: yellow;*/
}

.button {
	font-size: 2em;
	padding: 20px;
	margin:5px;
	
	/*border:  medium #30A77F solid;*/
	box-shadow: 0 1px 2px #000;
	border-radius: 50px;
}
}