html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.main-section-container {
max-width: 1600px;
margin: auto;
}
.canvas-logo-header{
width:300px;
}
.title-box{

}
.section-btn{

}
.section-info2{
padding:0;
}
.section-info {
padding: 15px;
margin: auto;
height: 70px !important;
}
.learn-more-btn {
background: #fff !important;
padding: 10px;     
height: auto;
transition: background 0.3s ease-in;
display: flex;
justify-content: center;
width: auto;
max-width: 200px;
margin: auto;
border:solid 1px;
color: #000 !important;
text-decoration:none;
}

.learn-more-btn:hover {
background: #000000 !important;
color: #ffffff !important;
}

.learn-more-btn-home-dark-bg:hover {
background: #ffffff !important;
color: #000000 !important;
}

.btn-link-box {
display: flex;
flex-wrap: wrap;
}
.btn-box{
margin:10px;
}
.h1-title-bg {
background-color: #000000;
background-position: center right;
background-repeat: no-repeat;
height: auto;
min-height: 250px;
gap: 10px;
padding: 15px;
display: flex;
flex-wrap: wrap;
align-items: center; /* vertical centering */
justify-content: space-evenly; /* horizontal centering (optional) */
max-width: 1600px;
margin: auto;
}

.h1-title-bg h1 {
margin: 0px;
color: #ffffff !important;
background: none;
text-align: center;
font-family: 'Source Sans 3', sans-serif;
width: auto;
font-weight: 400;
font-size:3rem;
text-align:left;
}
.btn-standard {
background: #2a7791 !important;
color: #ffffff !important;
font-size: 18px !important;
font-weight: bold !important;
padding: 15px !important;
width: 200px;
float: right;
border-radius: 0px;
border: none !important;
font-family: "Source Sans 3", sans-serif;
cursor: pointer;
text-align: center;
transition: ease-in-out .5s;
text-decoration: none;
}

.btn-standard:hover {
background: #ffffff !important;
color: #000000 !important;
text-decoration: none;
}
.class-list a:hover, .sidenav a:hover, .class-q:hover {
color: #000000;
font-weight: bold;
text-decoration: underline 1px #f1b825;
}
 
.sidenav a:hover {  
text-decoration:none;
}
input[type="text"] {
width: 350px;
height: 50px;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 1px 2px #000000;
}
.canvas-notice {
position: relative;
z-index: 2;
width: 100%;
background: #f1b825;
overflow: hidden;
animation: dropdown-notification 0.8s ease-out forwards;
}

.canvas-notice-inner {
background: #fff;
border: 2px solid red;
border-radius: 8px;
padding: 10px 25px;
text-align: center;
font-family: Arial, sans-serif;
max-width: 900px;
margin: 20px auto;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
transition: opacity 1s ease, transform 1s ease;
}

.canvas-notice-inner p {
    font-size: 1.1rem; /* slightly larger base text */
    color: #000;
    line-height: 1.7;
    margin: 0;
}

.canvas-notice-inner strong {
    font-size: 1.3rem; /* larger bold heading */
}

.canvas-notice-inner span[aria-hidden="true"] {
    font-size: 1.5rem; /* bigger 📢 emoji */
    margin-right: 5px;
}

@keyframes dropdown-notification {
0% {
    height: 0;
    opacity: 0;
    transform: translateY(-60px);
}

100% {
    height: 150px;
    opacity: 1;
    transform: translateY(0);
}
}

/* Fade + slide-up effect */
.canvas-notice.fade-out .canvas-notice-inner {
opacity: 0;
transform: translateY(-40px);
}
ul {
    padding: 0;
}

li {
padding: 8px;
}
/*ALERT SECTION*/
.canvas-transition-box {
padding: 20px;
background-color: #f1f5f9;
border: 1px solid #ccc;
border-radius: 8px;
font-family: Arial, sans-serif;
position: relative;
margin: auto;
max-width: 800px;
}
.canvas-notification {
 
background: #ffffff; 
margin: auto;
margin-top: 25px;
font-family: Arial, sans-serif; 
max-width: 1400px;
}
.links:hover {
background: linear-gradient(to top, #f0b82d 60%, rgba(248, 231, 28, 0) 60%);
height: 5px !important;
line-height: 1.6px !important;
color: #000000 !important;
}
.canvas-notification-list li{
list-style:decimal !important;

}
.canvas-notification-section {
display: flex;
flex-wrap:wrap;
max-width: 1400px;
}
.canvas-notification-box-1, .canvas-notification-box-2 {
padding: 20px;
font-size: 18px;
padding-top: 0;
height: fit-content;
}
.canvas-notification-box-1 {
max-width: 800px;
}
.canvas-notification-box-2 {
    max-width: 400px;
    box-shadow: 5px 5px 0px 0px #2a7791;
    background: #f3f4f6;
    margin: auto;
}
.canvas-transition-box h1 {
color: #000000;
margin-top: 0;
text-align: center;
font-size: 2.5rem;
}
 
.image-log-container {
display: flex;
justify-content: space-evenly;
}
.lms-logo-bb,.lms-logo-canvas {    
width:350px;
margin: auto;
box-shadow: 0px 0px 2px 2px #000000;
background: #ffffff;
border-radius: 10px;
padding: 5px;
transition:ease-in-out .5s;
}
.lms-logo-canvas:hover {
box-shadow: 0px 0px 2px 2px #be0000,0px 0px 2px 2px #f1f1f1 inset;
}
.lms-logo-bb:hover {
box-shadow: 0px 0px 2px 2px #03b1cd,0px 0px 2px 2px #23b681 inset;
}
.canvas-transition-box p {
font-size: 18px;
color: #333333;
line-height: 1.6;
}

.section-div-search, .section-cards {
padding: 20px;
background-color: #f1f5f9;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}

.section-div-search {
display: flex;
flex-direction: column;
width: 50%;
}
#search-blackboard {
margin-top: 20px;
}
.search-instructions {
width: 100%;
}

.section-cards {
width: 100%;
}

.search-instructions h3, .section-cards h3 {
color: #000000;
margin-top: 0;
text-align: left;
}
.search-instructions h2 {
color: #000000;    
text-align: left;
}
.search-instructions p, .section-cards-p {
font-size: 16px;
color: #000000;
line-height: 1.5;
background: #ffffff;
padding: 10px;
}

.main-section-container {
    
display: flex;
justify-content: center;
}

.section-div {
display: flex;
flex-direction: row;
}

.date-number {
text-align: center;
}

.section-title {
text-align: center;
padding: 15px;
font-size: xxx-large;
font-family: auto;
}

.section-box {
width: min-content;
/* height: 20vh;
max-height: 200px;*/
min-width: 320px;
/* min-height: 200px;*/
background: #f1f1f1;
margin: 10px;
/*margin-bottom: 25px;*/
flex-wrap: wrap;
/*transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;*/
position: relative;
box-shadow: 0px 0px 1px 1px rgba(0,0,0,.75);
}
.section-btn {
margin: 10px;
}
.tile-link {
text-decoration: auto;
color: #000000;
}
.section-div-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
max-width: 1400px;
margin: auto;
}

.section-div-class-list {
background: #ffffff;
height: auto;
max-height: 650px;
overflow-y: auto;
box-shadow: 0px 0px 2px 2px;
}

.section-box-title {
text-align: left;
background: #2a7791 !important;
padding: 15px;
margin: auto;
border-bottom: solid 2px #000000;
width: auto;
color: #ffffff;
}

.card-block-link {
color: transparent;
width: 345px;
height: 215px;
display: block;
top: 15px;
position: relative;
}

.card-block-link:hover {
    background: transparent;
    color: transparent;
}

.custom-tooltip {
}

.tooltip-text {
/*visibility: hidden;
width: 200px;
background-color: #f1b825;
    color: #000000;
font-weight: bold;
text-align: center;
   
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;*/ /* Position above the text */
/*left: 50%;
margin-left: -100px;*/ /* Center the tooltip */
/*opacity: 0;
transition: opacity 0.3s;*/
}

.custom-tooltip:hover .tooltip-text {
visibility: hidden;
opacity: 1;
}
.nav-icon{
color:#ffffff ;
}
.section-bottom {
position: absolute;
bottom: 0;
}

.section-box:hover {
/* opacity: 1;
transform: scale(1.02);*/
}

.star {
position: relative;
bottom: auto;
right: -10px;
color: #FEC923;
font-size: 24px;
padding: 3px;
}

.base-block {
background: #f1b825;
height: auto;
width: auto;
padding: 25px;
}
/*Mobile Phone media query:*/
/*@media (max-width: 600px) {
.h1-title-bg h1 {
        
    font-size: 2rem;
    text-align: left;
}
.image-log-container {
    flex-direction:column;
}
.section-box, .section-box-update {
    width: 100%;
    max-width: 360px;
    min-height: 200px;
}
.lms-logo-bb, .lms-logo-canvas {
    width: 310px;
    display: block;
}
.main-section-container {
    padding: 0px;
    position: relative;
    z-index: 2;
}
.canvas-transition-box {
    width: inherit;
}
.canvas-transition-box h1 {
    color: #003366;
    margin-top: 0;
    text-align: center;
}

.canvas-transition-box p {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
}
.section-div {
    flex-direction: column;
}
.section-cards {        
    margin-top: 20px;
}
.search-instructions, .section-cards {
    width: auto;
}
.section-box, .section-box-update {
    min-width: 330px;
    min-height: 200px;
    overflow: auto;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px 2px;
}
.section-div-search {
    width: auto;
}
}*/
/*Tablet media query: iPad mini, iPad standard*/
@media (min-width: 600px) and (max-width: 1024px) {
    .h1-title-bg  {
        width: auto;
        margin: 0;
        justify-content: flex-start;
    }

}
/*Tablet media query: iPad mini, iPad standard*/
@media (min-width: 1024px) and (max-width: 1366px) {
    .h1-title-bg {
        width: auto;
        margin: 0;
        justify-content: flex-start;
    }
    .btn-link-box{
        max-width:1200px !important;
    }
}
/*.main-section-container {
    padding: 0px;
}
.lms-logo-bb, .lms-logo-canvas {
    width: 300px;
         
}
.canvas-transition-box {
    width: inherit;
}

    .canvas-transition-box h1 {
        color: #003366;
        margin-top: 0;
        text-align: center;
    }

    .canvas-transition-box p {
        font-size: 18px;
        color: #333333;
        line-height: 1.6;
    }

.section-div {
    flex-direction: column;
}

.search-instructions, .section-cards {
    width: auto;
}

.section-box, .section-box-update {
    min-width: 350px;
    height: 200px;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px 2px;
}
.section-div-search {
    width: auto;
    flex-direction: row;
    height: auto
}
#search-blackboard {
    margin-top: 0px;
}
.section-div-class-list {
    margin: 10px;
    height: 550px;
}
.search-instructions p {
    margin:10px;
}
}*/
/*Tablet media query: iPad Pro*/
/*@media (min-width: 1024px) and (max-width: 1366px) {
.h1-title-bg h1 {
    width: auto !important;
    margin: 0;
}
     
.main-section-container {
    padding: 0px;
}
.lms-logo-bb, .lms-logo-canvas {
    width: 350px;
     
}
.canvas-transition-box {
    width: inherit;
}

    .canvas-transition-box h1 {
        color: #003366;
        margin-top: 0;
        text-align: center;
    }

    .canvas-transition-box p {
        font-size: 18px;
        color: #333333;
        line-height: 1.6;
    }

.section-div {
    flex-direction: column;
}

.search-instructions, .section-cards {
    width: auto;
}

.section-box, .section-box-update {
    min-width: 300px;
    height: 200px;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px 2px;
}
.section-div-search {
    width: auto;
    flex-direction: row;
    height: auto
}
.section-div-class-list {
    margin:10px;
}
#search-blackboard {
    margin-top: 0px;
}
.search-instructions p {
    margin: 10px;
}
   
}*/
/*CLEAR THE CACHE STYLING*/