h2{border-bottom:2px solid #7CB9CE;}
form{margin-top:20px;}
.usfContainer {margin-top:35px; border-radius:15px; display:block; min-width:580px; max-width:1000px; padding-bottom:30px;}
.fieldContainer{display:inline-block; text-align:left;}
.field > label {vertical-align:middle; display:inline-block; width:180px; text-align:right;}
.field.short{width:100%; margin:0px 0px 10px 0px;}
.field.short input{width:150px;}
.field.short > label{width:auto;}
.field.short > div{margin:0px 10px;}
.field.checkBox > label {width:auto; text-align:left; padding: 8px 15px; margin: -8px 0 -8px 30%;}
.field.checkBox > label:hover {cursor:pointer; background: #74b5c7; border-radius:8px;}
.field.checkBox.longLabel > label{margin:2px 0 -14px 17%};
.field > span {vertical-align:middle; height:auto !important;}
.field .ui-spinner{position:relative; display: inline-block; text-align:center; border: 1px solid gray; border-radius: 4px; overflow:hidden; vertical-align: bottom;}
.field .ui-spinner input{border:none; width:75px;}
.field .ui-spinner-button{position: absolute; background: #95CEE3; height:17px; width:16px;}
.field .ui-spinner-up{margin: 0px 0px 0px -16px; border-top-right-radius: 3px;}
.field .ui-spinner-down{margin: 17px 0px 0px -16px; border-bottom-right-radius: 3px;}
.field .ui-icon-triangle-1-n{font-size:0.9em; top:-3px; display:inline-block; position:relative;}
.field .ui-icon-triangle-1-s{font-size:0.9em; top:-4px; display:inline-block; position:relative;}
.field .ui-spinner-button.ui-state-hover{background:#62ADC8; cursor:pointer;}
.field table {margin:0 auto;}
.field h3 {display:inline-block; font-weight:800; padding:0 9px; margin: 0;}
.stoUIClickable, .stoUIClickable select, .stoUIradio label span, .stoUImenu ul li{max-width:360px; text-overflow:ellipsis;}
.class-section > div{ font-family: 'Open Sans', Arial; font-size: 1.1em;}

#asideWrap{z-index:998; float:right; width:35%;}

#accountContainer{position: relative;}
#premiumIconNotifyDiv{margin-top:25px; font-weight: bold; color: #2d495f;}
#premiumIconNotifyDiv div{padding:0;}
#premiumButtonDiv{margin-top:10px;}
#topUpdateBtn{display:block; margin-bottom: -25px;}
.insideUpdateBtn {display:block; margin:15px auto -5px auto;}
#bottomUpdateBtn{margin-top:45px;}
#classesContainer{text-align:center;}
#listOfClasses .checkBox{margin:0;}
#listOfClasses .checkBox label{margin:0;}
#listOfClasses tbody tr {border-radius:12px;}
#listOfClasses tbody tr:hover { background: #afd8e7;}
#userSettingsForm #listOfClasses tr td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#userSettingsForm #listOfClasses tr td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#classCodeStatusInfo{max-width:380px;}
#lmDiv{background: #add9ff;width: auto;display: inline-block;padding: 13px 55px 20px; position: relative; margin: 15px; border: 2px solid #91bcd5; border-radius: 10px;}
#lmDiv > div {padding: 12px 0px;}
th.classroomName, td.classroomName{padding-right:0px;}
th.editCRNbtn, td.editCRNbtn{padding-left:0px;}
td.editCRNbtn > span, td.editCRNbtn > div{display: inline-block;}
.editNewCRnameContainer {position:absolute; left: 0; top: 0; margin:0; padding:7px 28px 25px 70px; text-align:left;}
.editNewCRnameContainer label {font-family: Arial; font-size: 1.2em;}
.editNewCRnameBtnsContainer button {width:36px;}
.editNewCRnameBtnsContainer .sideMarginsSmall {margin:0px 4px;}
.goToClassBtn{position:absolute; top:14px; right:135px; border: 1px solid #2c6375;}
.goToClassBtn a{text-decoration: none; padding: 0px 5px; display: inline-flex; align-items: center; gap: 9px; font-family: 'Open Sans'; font-weight:600;}
.deleteBtnDiv{position:absolute; top:6px; right: 16px;}
.deleteBtnDiv button{ display: inline-flex; align-items: center; gap: 9px; line-height: 20px; padding: 5px 8px; font-family: 'Open Sans';}
.deleteBtnDiv .fa, .goToClassBtn .fa{font-size:1.5em;}
.shareBtn{margin: 0px 4px 0px 12px; padding:0;}
.shareBtn a{text-decoration: none; padding: 0px 5px; display: inline-flex; align-items: center; gap: 9px; font-family: Arial; font-weight:600; color: #2d495f;}
div.class-list input.newCRname{font-size:1.3em;}
.inputWithBtnDiv {position: relative; display: inline-block; width: 100%; padding:0;}
div.inputWithBtnDiv input{ height:40px; width: 100%; padding: 10px; padding-right: 40px; box-sizing: border-box; border-radius: 5px; outline: none;}
.inputWithBtnDiv button{position: absolute; right:0; top:0; font-size: 22px; height:100%; width:40px; cursor: pointer; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center;}
span.crnSpan{font-size:1.6em;}
.autoJoinDiv{position: absolute; top: 6px; right: 305px;}

  .class-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .class-list button{font-family: Arial;}
  .class-card {
    background: #f0fcff;
    padding: 0px 30px 0px 70px;
    border-radius: 8px;
    box-shadow: -5px 20px 6px -15px rgb(0 0 0 / 38%);
	position: relative;
	border: 3px solid #83bacd;
    transition: all 0.2s ease-in-out;
  }
  .class-card::after {
	content: "";
	border-radius: 11px;
	position: absolute;
	top: -6px; /* Moves the extra border outward */
	left: -6px;
	right: -6px;
	bottom: -6px;
	border: 4px solid transparent; /* Initially invisible */
	pointer-events: none; /* Ensures it does not interfere with interactions */
	transition: border-color 0.1s ease-in-out;
	}

	.class-card:hover::after {
		border-color: rgb(67 150 178);
		box-shadow: -5px 46px 6px -39px rgb(0 0 0 / 35%);
	}
  /*.class-card:hover {
	outline: 14px solid rgb(0 71 95 / 63%);
	outline-offset: 114px;
    box-shadow: -5px 20px 6px -15px rgb(0 0 0 / 38%);
  }*/
  .classNum{background: #81bdd1; position: absolute; font-size: 1.6em; left: 0; top:0px; height:100%; width: 50px; color: #004c65; text-align: center; z-index:99; padding-top:121px; border-right: 1px solid #558d9f82;}
  .class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
	height: 84px;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	background:#a9dff1; border-radius: 0 6px 0 0; border-bottom: 1px solid #64b4cf;
	z-index: 40;
  }
  .class-details{padding:78px 0 0 0; width: 95%;}
  .class-name {
    padding: 8px;
    width: 65%;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .auto-join {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .inline-container {
    display: flex;
    gap: 32px;
  }
  .class-section:first-child {
    flex: 1 1 33%; /* Takes up 1/3 of the width */
}

.class-section:last-child {
	flex: 2 1 66%; /* Takes up 2/3 of the width */
}
  .class-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
	text-align: left;
  }
  .class-section input{width:100%; box-sizing: border-box; position:relative;}
  .class-section label{padding-left: 9px;}
  .joinLink {margin: 0;}
  .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .input-group input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .button-group {
    display: flex;
    gap: 8px;
  }
  button {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: #007bff;
    color: white;
    cursor: pointer;
  }
  button:hover {
    background: #0056b3;
  }
  .reset {
    background: #dc3545;
  }
  .reset:hover {
    background: #c82333;
  }
  .share {
    background: #28a745;
  }
  .share:hover {
    background: #218838;
  }
  .note {
    font-size: 14px;
    color: #fd982b;
  }
  form .note{margin:0 0 4px 0;}


@media only screen and ( max-width: 1099px ) {
	#asideWrap{float:none;}
}