input:hover {background: #f6e6cf;}
input:focus {background: #90a3d2;}
/*
h1   { margin: 10px; color: #9C9080; font-size: 25px; font-style: normal; font-weight: bold; letter-spacing: 3px }
*/
h2   { margin: 10px; color: #9C9080; font-size: 17px; font-style: normal; font-weight: bold; letter-spacing: 2px }
.normal   { text-align: left; margin: 10px; padding: 0 }
.classtitle {font-variant: small-caps; font-size:18pt; font-weight:bold; padding: 3px;}
.classroomtitle {font-variant: small-caps; font-size:25pt; font-weight:bold; padding: 3px;text-align: center;}
.classroomdetails {font-variant: small-caps; font-size:25pt; font-weight:bold; padding: 3px;text-align: center;}
.classroomtableborder   { padding: 3px; font-size:10pt; border: 1px solid #000000;width:99%;text-align: center; float:none;}
.tabletop	{  width: 75%; }
.tableout { background-color: #FECE84; padding: 15px; font-size:10pt;border: 2px solid #000000;}
.tableouttab {font-variant: small-caps; font-weight:bold; color:#fff; font-size:12pt; padding: 3px;background-color: #000000; border-top: 2px solid #000000;border-right: 2px solid #000000;border-left: 2px solid #000000;}
.tableinner   { padding: 1px; font-size:9pt;}
.tableborder   { padding: 3px; font-size:10pt; border: 1px solid #000000;background-color: #EBEFFC; width:90%;}
.tablebordercells {border: 1px solid #fff;text-align: center;}
.tableleftcells {border: 1px solid #fff;text-align: left;font-weight:bold;background-color: #CFD9FA;}
.tableleftcellspay {border: 1px solid #fff;text-align: left;font-weight:bold;background-color: #666666;}
.tablerightcells {border: 1px solid #fff;text-align: left;}
.tableheader   { background-color: #000000; color:#fff; font-weight:bold;}
.tablerow1     { background-color: #EBEFFC;}
.tablerow2     { background-color: #D2D5E0;}
.cart	{  width: 75%; display: inline-table !important;}
.cartheader   {  background-color: #555; border-top: 5px solid #000; font-family:arial,tahoma; font-size:13pt; color:#fff; font-weight:bold;}
.cartheaderR   { background-color: #555; border-top: 5px solid #000; border-right: 1px solid #000; font-family:arial,tahoma; font-size:13pt; color:#fff; font-weight:bold;}
.cartheaderL   { background-color: #555; border-top: 5px solid #000; border-left: 1px solid #000; font-family:arial,tahoma; font-size:13pt; color:#fff; font-weight:bold;}
.cartrow1  {   background-color: #ccc;font-family:arial,tahoma; font-size:10pt; color:#000000; font-weight:normal;}
.cartrow1L  {   background-color: #ccc;border-left: 1px solid #000; color:#000000;}
.cartrow1R  {   background-color: #ccc;border-right: 1px solid #000; color:#000000;}
.cartrow1bottom  {  background-color: #ccc; border-bottom: 2px solid #000;}
.cartrow2 {background-color: #E4E3E3;font-family:arial,tahoma; font-size:10pt; color:#000000; font-weight:normal;}
.cartrow2L  {   background-color: #E4E3E3;border-left: 1px solid #000; color:#000000;}
.cartrow2R  {   background-color: #E4E3E3;border-right: 1px solid #000; color:#000000;}
.cartrow2bottom  {  background-color: #000;border-bottom: 2px solid #000;}
.cartfooterL	{  background-color: #bbb;  border-left: 1px solid #000; font-family:arial,tahoma; font-size:9pt; color:#000000; font-weight:normal;}
.cartfooterR	{  background-color: #bbb;  border-right: 1px solid #000;font-family:arial,tahoma; font-size:9pt; color:#000000; font-weight:normal;}
.cartdiscount	{  background-color: #E4E3E3;  border-right: 1px solid #000; border-left: 1px solid #000;  color:#000000; font-weight:bold;}
.cartfooterbottomR	{  background-color: #bbb;  border-top: 2px solid #000; border-bottom: 2px solid #000;border-right: 1px solid #000; border-left: 1px solid #000;  color:#000000; font-weight:bold;}
.cartfooterbottomL	{  border-top: 2px solid #000; border-bottom: 2px solid #000; font-family:arial,tahoma; font-size:10pt; color:#fff; font-weight:normal;}
.crbuttons A:Link, .cartbuttons A:Visited	  { color: white; font-size: 9pt; font-family: Tahoma, Verdana, Helvetica; font-weight: bold; background-color: #000000; text-align: center; padding:2px; border: inset 1px #000000;text-decoration: none; }
.crbuttons A:Hover{color:yellow;background-color:#667AB9;cursor:hand;font-size: 9pt; font-family: Tahoma, Verdana, Helvetica; font-weight: bold;}
@media screen and (min-device-width: 640px){
.registrationtable {margin-right:auto; margin-left:auto; border: 3px solid #666666; background-color:#494949; color: white; border-spacing: 15px; width: 50%;}
}
@media screen and (max-device-width: 480px) {
.registrationtable {border: 3px solid #666666; background-color:#494949; color: white; border-spacing: 15px;}
}

/* Style the layout container */
.my-account-layout {
    display: flex;
    flex-direction: row;
    gap: 20px; /* Adjust gap between sidebar and content as needed */
}

/* Style the sidebar */
.my-account-sidebar {
    width: 25%; /* Adjust the width of the sidebar */
    background: #f9f9f9; /* Optional: background color for the sidebar */
    padding: 20px; /* Optional: padding around the menu */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: add shadow to the sidebar */
}

/* Style the content area */
.my-account-content {
    width: 75%; /* Adjust the width of the content area */
    padding: 20px; /* Padding around the content */
}

/* Loading Spinner Styles */
#loadingSpinner {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}



.cancel-note {
    background-color: #808080;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #0073aa;
    font-weight: bold;
	max-width: 800px;
	border-radius: 5px;
	margin-left: auto;
  	margin-right: auto;
}

.open-orders-container {
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
}

.open-orders-list {
    list-style-type: none;
    padding: 0;
}

.open-orders-list li {
    background-color: #D8D8D8;
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
    font-size: 18px;
}

.open-orders-list li a {
    color: #0073aa;
    text-decoration: none;
}

.open-orders-list li a:hover {
    text-decoration: underline;
}