body{
    
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center; /*centers items on the line (the x-axis by default)*/
    align-items: center; /*centers items on the cross-axis (y by default)*/
    
    background-size: cover;
    background-attachment:fixed;
    
}
.enrolmentstats {
    margin: 10px;
    padding:10px;
    border-radius: .25rem!important;
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-align: center;
    position: relative;
    transition:0.5s;
}
.link{
    height:100px;
    margin: 10px;
    padding:10px;
    border-radius: .25rem!important;
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-align: right;
    position: relative;
    display:hidden;
    opacity:0;
    transition:0.3s;
    cursor:pointer;
    transform:scale(1);
    z-index:1;
}

.link-show{
    
    display:visible !important;
    opacity:1 !important;
    
}
.link:hover{
    transform:scale(1.20);
	z-index:10
}
.title{
    position: absolute;
    bottom: 10;
    right: 10;
}
.subtitle{
    position:absolute;
    top: 5;
    left: 10;
    font-size: 10px !important;
}

.icon{
    position: absolute;
    top: 10;
    left: 10;
}

.width1{
    width:100px;
}
.width2{
    width:200px;
}
.width3{
    width:300px;
}
.orange{
    background-color: #CC452D;
}
.darkblue {
    background-color: #1D5779;
}
.lightblue {
    background-color: #2BA0B2;
}
.sand {
    background-color: #EDBA66;
}
.cream {
    background-color: #EEE4B1;
}




div {
    display: inline-block;
}
input[type=text] {
    width:100%;
    padding-right:60px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('/img/google.png');
    background-position: 10px 13px;
    background-repeat: no-repeat;
    background-size: 23px;
    padding: 12px 20px 12px 40px;
    display: inline-block;
    
}

.modalicon{
    position: absolute;
    top: 15;
    right: 10;
}

.container{
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
}
a.visited, a.hover, a, .title{
    color:white;
    text-decoration: none;
}
.icon > img {
    width:50px;
}
#footer {
    position:fixed;
    bottom:5px;
    left:5px;
    font-family: sans-serif;
}
#logo{
    padding-bottom: 30px;
    display: block;
        margin-left: auto;
        margin-right: auto;
}
#counter {
    position:fixed;
    top:25px;
    right:25px;
    width:250px;
    height:70px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 20px;
    text-align:center;

}

/* #changelog {
    position:fixed;
    top:5px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
} */

#chatbox {
    position:fixed;
    top:100px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 20px;
    text-align:center;

}

#itguidesbtn {

    position:fixed;
    top:65px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
    
}
#ithelpbtn {

    position:fixed;
    top:65px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
    
}

#officebtn {

    position:fixed;
    top:125px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
    
}

#canvasbtn {
    
    position:fixed;
    top:185px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
}

#stubtn {
    
    position:fixed;
    top:185px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
}

#shopbtn {
    
    position:fixed;
    top:305px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
}

#survey {
    
    position:fixed;
    top:5px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
}

.surveytext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

#arrangementsbtn {

    position:fixed;
    top:245px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
    
}

#webrequestbtn {
    
    position:fixed;
    top:125px;
    right:25px;
    width:250px;
    height:50px;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    border-radius: 20px;
    text-align:center;
}

#server-status {
    position:fixed;
    top:25px;
    left:25px;
    max-width: 350px;
    min-height:150px;
    background-color: rgba(255,50,50,0.0);
    color: white;
    font-family: sans-serif;
    font-size: 15px;
    padding: 20px;
    border-radius: 20px;
    transition: background-color 1s;
}
#page-loading {
    position:absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    z-index: 100;
}

/* Optional gradient tint over smoke */
section.smoke-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0));
  mix-blend-mode: lighten;
}

/* Simple SVG Christmas Lights Animation */


#Christmas_Lights {
  height:67%;
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: -1;          /* puts it behind the page */
  pointer-events: none; /* allows all clicks through */
}

.light_cord {
  fill: none;
  stroke: #174700;
}

.light_fixture {
  fill: #134413;
}

.red_bulb {
  fill: #CA2128;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.green_bulb {
  fill: #2D754A;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.blue_bulb {
  fill: #2C3EA8;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.white_bulb {
  fill: #F5EED7;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.gold_bulb {
  fill: #ffcc5e;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}


/* Simply changing the opacity of the SVG fill to create the glow effect for the bulbs */

.bulb {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: glow;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  animation-name: glow;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@-webkit-keyframes glow {
  0% {
    fill-opacity: 0.25;
  }
  100% {
    fill-opacity: 1
  }
}

@keyframes glow {
  0% {
    fill-opacity: 0.25;
  }
  100% {
    fill-opacity: 1.0
  }
}


/* Made a set of ten animation delays to create a more random effect of lights blinking.  Simplest way without jumping through SVG hoops. */

.blink-1 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.blink-2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-4 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.blink-5 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.blink-6 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.blink-7 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-8 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.blink-9 {
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}

.blink-10 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.xmascontainer {
    height: 480px;
    width: 350px;
    position: absolute;
    top: 1%;
    left: -350px; /* start off-screen */
    -webkit-animation: flyLoop 10s linear infinite;
            animation: flyLoop 10s linear infinite;
}

.plane {
    position: relative;
    -webkit-animation: float 3s infinite;
            animation: float 3s infinite;
}

/* vertical float animation (same as before) */
@-webkit-keyframes float {
    20% {
        transform: translateY(25px);
    }
}
@keyframes float {
    50% {
        transform: translateY(25px);
    }
}

/* horizontal fly animation for container */
  @keyframes flyLoop {
    0% { left: 100vw; }  /* start off-screen right */
    100% { left: -350px; } /* end off-screen left */
  }

.propeller {
    animation: spin 1s linear infinite;
    transform-origin: 50px 50px; /* hub coordinates relative to SVG */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



.gradient1 {background-color:#009ca2}
.gradient2 {background-color:#009aab}
.gradient3 {background-color:#0098b4}
.gradient4 {background-color:#0095bd}
.gradient5 {background-color:#0091c5}
.gradient6 {background-color:#008dcc}
.gradient7 {background-color:#0088d1}
.gradient8 {background-color:#1d83d4}
.gradient9 {background-color:#477cd4}
.gradient10{background-color:#6374d1}
.gradient11{background-color:#7c6bcb}
.gradient12{background-color:#9161c2}
.gradient13{background-color:#a455b5}
.gradient14{background-color:#b449a7}
.gradient15{background-color:#c13b95}
.gradient16{background-color:#ca2d82}
.gradient17{background-color:#d01e6e}
.gradient18{background-color:#d21358}
.gradient19{background-color:#ee0a5e}
.gradient20{background-color:#ff005dbe;}
.gradient21{background-color:#ff005d96;}
.gradient22{background-color:#ff005d67;}
.gradient23{background-color:#ff005d48;}
.gradient24{background-color:#ff005d13;}
.gradient30{
    background-color: #ff005d13;
      display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer
}


.green-bg {background-color: #94c01f}
.teal-bg {background-color: #009ca2}
.purple-bg {background-color: #662d91}
.orange-bg {background-color: #f8941e}
.pink-bg {background-color: #d21358}


.button-area {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Tooltip box */
.hover-box {
    position: absolute;
    right: 110%;
    top: 0;                    /* ⬅️ Anchor to top */
    transform: translateY(0);

    max-width: min(280px, 90vw);
    width: max-content;

    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    white-space: normal;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
}

/* Arrow */
.hover-box::after {
    content: "";
    position: absolute;
    top: 14px;                 /* aligns arrow nicely */
    left: 100%;
    border: 6px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.85);
}

/* Show tooltip */
.button-area:hover .hover-box {
    opacity: 1;
    transform: translateX(-6px);
}