body {margin: 0;padding: 0;font-family: Helvetica,sans-serif;font-size:1em;background-color: #f4f4f4;}
a { color: #000;}

.flex-container-row {display: flex;flex-flow: column nowrap;
  justify-content: flex-start;align-content: space-between;
  align-items : center;width: 100%;}
.flex-container-col {display: flex;flex-flow: row nowrap;
  justify-content: flex-start;align-content: space-between;
  align-items : start;width: 100%;height: 100px;}
.flex-container-col div {height: 55px;display: inline-block;
  vertical-align: middle;align-items: baseline;margin: 3px;
  text-wrap: nowrap;border: 1px solid white;}
button {text-align:right;background:none;color:inherit;border:none;outline:none;font-size: 1em;padding: 10px 20px;}
button:hover {width: 100%;background-color: #f4f4f4;color:#0a58ca;}
h5 {font-size:1em;text-align:center;margin-top:10px;}
.imgpayinfo {display:block;width:100%;margin-left:auto;margin-right:auto;}
.note1 {width:100%;font-family:Arial;font-size:11px;color:gray;margin-left:auto;margin-right:auto;font-weight: 100;}
.footer {justify-content:center;align-content:center;align-items:center;text-align:center;font-size:14px;color:gray;margin: 20px 0px;}
.asterisk:after {content: '*';color:red;}
.req { color:black; }
.req::after { color:red;content:'*'; }
.loginform {width:36%;}
.verifyemail {width:36%;}
.formaccount {width:36%;}

label {font-size:1em;padding-top: 10px;}
/* header */
.header {background-color: #fff;box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);position: fixed;width: 100%;z-index: 3;}
.header ul {margin: 0;padding: 0;list-style: none;overflow: hidden;background-color: #fff;}
.header li a {display: block;padding: 10px 20px;border-right: 1px solid #f4f4f4;text-decoration: none;}
.header li a:hover, .header .menu-btn:hover {background-color: #f4f4f4;}
.header .logo {display: block;float: left;font-size: 2em;padding: 10px 20px;text-decoration: none;}
/* menu */
.header .menu {font-size: 1em;clear: both;max-height: 0;transition: max-height .2s ease-out;}
/* menu icon */
.header .menu-icon {cursor: pointer;display: inline-block;float: right;padding: 25px 20px;position: relative;user-select: none;}

.header .menu-icon .navicon {background: #333;display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px;}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {background: #333;content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.header .menu-icon .navicon:before {top: 5px;}
.header .menu-icon .navicon:after {top: -5px;}
/* menu btn */
.header .menu-btn {display: none;}
.header .menu-btn:checked ~ .menu {max-height: 280px;}
.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}
/* 48em = 768px */
@media (max-width: 764px) {
  .header .school {display: none;}
  .imgpayinfo {width:90%;}
  .note1 {width:90%;}
  .loginform {width:90%;}
  .verifyemail {width:90%;}
  .formaccount {width:90%;}
}

.campuses { margin: 10px; }
.campuses-tbl table {
    width: 100%;
    max-width: 840px;
    margin: auto; 
    padding: 20px;
    background-color: #fff;
    border-collapse: collapse;
    border-radius: 10px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.campuses-tbl td {
    padding: 10px;
    vertical-align: middle; /* Center text vertically next to the image */
    text-align: left; /* Center text horizontally inside its cell */
/*    word-wrap: break-word;
    overflow-wrap:break-word; */
    white-space: normal; 
}
.campuses-tbl table tr td img {
    display: block;
    width: 200px;
    padding: 5px;
    border-radius: 10%;
    border: 1px solid #ddd;
}
.campuses-tbl table tr td h2 {
    font-size: 24px;
    color: blue;
    margin-bottom: 10px;
}
.campuses-tbl table tr td strong { font-size: 24px; }
.location-marker {
  font-size: 12px;         /* Adjusts the size to be small */
  color: red;              /* Sets the text and icon color to red */
  display: inline-flex;    /* Keeps the icon and text on the same line */
  align-items: center;     /* Vertically centers the icon with the text */
}
.location-marker i {
  margin-right: 4px;       /* Optional: adds spacing between the icon and the coordinate text */
}