body{
    background-color:#ffeedc;
}
.row{
    margin: 0px;
}
.container-fluid{
    margin: auto;
    max-width: 1020px;
    padding: 0;
}
#WebsiteMenu{
    margin: auto;
}

/* Nav Menu */
#ForumMenu{
    position:relative;
    width: 94%;
    left:3%;
}
#ForumMenuBG{
    position:relative;
    width:100%;
}
.MenuBtn{
    position:absolute;
    top:0px;
    width:14.28%;
}
#AgendaBtn{
    left:0%;
}
#GradesBtn{
    left:14.28%;
}
#BehaviourBtn{
    left:28.56%;
}
#HealthBtn{
    left:42.84%;
}
#ForkloudBtn{
    left:57.12%;
}
#FinanceBtn{
    left:71.4%;
}
#ComplaintBtn{
    left:85.68%;
}
.navbar{
    background-color: #ffdaaa;
    color: #ff7663;
}
.navbar-toggler{
    border-color: #ff7663!important;
}
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,118,99, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
}
.nav-link{
    color: #ff7663!important;
    font-family: 'Almarai';
    font-weight: 700;
	font-size: 1.4rem;
}
/* Student Side Bar */
#ChildSideBar{
    border-radius: 10px;
    width: 120px;
    height: 80px;
    background-color: #ffdfb4;
    color: #ff6e00;
    cursor: pointer;
}
#ChildInfo{
    width: 100%;
    border-radius: 10px;
    height: 100%;
    padding: 5px;
}
#ChildInfo span{
    display: block;
    width: 100%;
    text-align: center;
}
#ChildrenList{
    z-index: 10;
    position:absolute;
    left: 15px;
    top: 73px;
    width: 120px;
    background-color: #ffdfb4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top:10px;
    overflow: hidden;
}
.ChildBlock{
    width: 100%;
    margin-top: 10px;
    padding: 5px;
}
.StdPhoto{
    width: 80%;
    margin-left:10%;
    border:2px solid #ff826e;
}
.StdName{
    display: block;
    text-align: center;
    margin:0 -5px;
    color:white;
    background-color: #ff826e;
}



/* User Icon & Menu */
#UserIcon{
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: white;
    border:thin solid white;
    cursor: pointer;
    float: right;
}
#UserIcon:hover{
    border:thin solid #ff6e00;
}
#UserIcon:active{
    background-color: #eaeaea;
}
#SettingsImage{
    width: 100%;
    height: 100%;
}
#OptionsMenu{
    position:absolute;
    z-index: 10;
    right: 0px;
    top: 80px;
    width: 250px;
    margin-right: 10px;
    padding: 5px 0 5px 0;
    background-color: #ff826e;
}
.OptionLink, #OptionsMenu a{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #ffdfb4;
    color: #ff6e00;
    text-align: center;
    margin: 5px 0;
    padding: 2px 0;
    letter-spacing: 0;
}
.OptionLink:hover, #OptionsMenu a:hover{
    background-color: #fdd299;
}
.UserInfo span{
    margin:0 10px;
}



/* Admin Student Sidebar */
#Admin_ClassSelect{
    position: relative;
    width: 90%;
    margin: 0px 5%;
}

#Admin_StudentSelect{
    position: relative;
    width: 90%;
    height: 200px;
    margin: 10px 5%;
    border: thin solid black;
    font-size: 10px;
    overflow: auto;
    background-color: #fff;
}
.Admin_StudentItem{
    position: relative;
    width: 100%;
    height: 40px;
}
.Admin_StudentItem:hover{
    background-color: #ffdfb4;
}
.Active_Admin_StudentItem{
    background-color: #ff826e;
}

.Admin_StudentNum, .Admin_StudentID, .Admin_StudentName{
    position: absolute;
    top: 0px;
    height: 20px;
    text-align: center;
    color: #000;
    font-weight: bold;
}
.Admin_StudentNum{
    width: 20%;
    left: 0px;
}
.Admin_StudentID{
    width:80%;
    left: 20%;
}
.Admin_StudentName{
    top: 20px;
    width: 100%;
    overflow: hidden;
    border-top: thin dotted #ff7663;
    border-bottom: thin solid #000;
}

.AdminClassAlertNotification{
    font-family: 'Almarai';
    font-size: 1.2rem;
    font-weight: 700;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}




/* Alert Notifications */
.AlertNotification{
    font-family: 'Almarai';
    font-size: 3.7rem;
    font-weight: 700;
    width: 100%;
    text-align: center;
}
.FinanceProblem{
    color: #ff826e;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.LoadingNotif{
    color: #68fa6b;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}



.mt-10{
    margin-top:8rem;
}


/* Health Notifacation Pulse */
.pulse {
    box-shadow: 0 0 0 rgba(255, 58, 23, 0.4);
    animation: pulse 2s infinite;
}
.pulse:hover {
    animation: none;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 58, 23, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 58, 23, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 58, 23, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 58, 23, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 58, 23, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255, 58, 23, 0);
        box-shadow: 0 0 0 10px rgba(255, 58, 23, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 58, 23, 0);
        box-shadow: 0 0 0 0 rgba(255, 58, 23, 0);
    }
}


.pulse2 {
    box-shadow: 0 0 0 rgba(255, 58, 23, 0.4);
    animation: pulse 0.8s infinite;
}
.pulse2:hover {
    animation: none;
}



/* Vertical Phone Styles */
@media (max-width: 575.98px) {  
   
}