input::-webkit-input-placeholder
{
    color: white !important;
}

input:-moz-placeholder
{
    /* Firefox 18- */
    color: white !important;
}

input::-moz-placeholder
{
    /* Firefox 19+ */
    color: white !important;
}

input:-ms-input-placeholder
{
    color: white !important;
}


.header-nav
{
    background: #377ebb;
}

.left-nav
{
    float: left;
}
.right-nav
{
    float: right;
}
.profilePic
{
    width: 40px;
    height: 50px;
    border-radius: 15%;
    border: 3px solid #f9f9f9;
    margin-top: 5px;
    margin-bottom: 5px;
}
.username
{
    font-size: 17px;
    color: white;
    position: absolute;
    left: 20%;
    top: 17px;
    white-space: nowrap;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.footer-inner a{color:#fff;}
.school-name
{
    background: rgb(58, 82, 81);
    padding: 10px;
    display: block;
    font-size: 20px;
    color: white;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.h1, .h2, .h3, h1, h2, h3 {
 margin-top: 0px; 
 
    margin-bottom: 10px;
}

.logo
{
    padding: 10px;
    width: 52px;
    position: absolute;
    top: 130px;
    left: 43%;
    z-index: 152;
    background: #377ebb;
    border: 2px solid white; /* border-right: 3px solid white; */
    border-radius: 11px;
}
.logo-innerpage
{
    padding: 10px;
    width: 47px;
    position: relative;
    top: 5px; /* left: 43%; */
    z-index: 152;
    background: #377ebb;
    border: 2px solid white; /* border-right: 3px solid white; */
    border-radius: 11px;
}
.footer
{
    padding: 10px;
    background: rgba(0, 0, 0, 0.32);
    display: inline-block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
}
.footer-inner
{
    padding: 10px;
    background: #377ebb;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
}
.menu-icon
{
    width: 75px !important;
    height: 70px !important;
    position: relative;
    top: -12px;
    right: 5px;
}

.messages
        {
          /* font-size: 15px;
            width: 90%;
            box-shadow: 0px 0px 5px 2px #9c9999;
            margin: 0 auto;
            margin-top: 5px;*/
            
                font-size: 15px;
    width: 90%;
    /* box-shadow: 0px 0px 5px 2px #9c9999; */
    margin: 0 auto;
    margin-top: 5px;
    padding: 15px;
    border-bottom: 2px solid #377ebb;
    background: #f5f5f5;
        }
        
        .sms-image
        {
            width: 45px;
            position: absolute;
            right: 0px;
            top: 9px;
        }
        .details
        {
            white-space: nowrap;
            width: 12em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .modal-content
        {
            top: 50%;
            padding: 5px;
        }
        .search-bar-bg
        {
            width: 95%;
            margin: 0 auto;
            padding: 10px;
        }
        .font-awesome-bg
        {
            font-size: 16px;
            background: #377ebb;
            padding: 12px;
            color: #fff;
        }
        .image-style
        {
            width: 120px;
        }
        .library-table{
    font-size: 13px;
    font-family: raleway;
    text-align: center;
    margin: 0 auto;
    width: 80%;
    box-shadow: 0px 0px 10px -1px #9c9999;
    margin-bottom: 7px !important;
}

.library-table tr:nth-child(even) {
    background-color: #f2f2f2;
}
.library-table tr:nth-child(odd) {
    background-color: #fff;
}
.library-table tr td {
    color: #5d5d5d;
    text-align: center !important;
    border: none;
    font-weight: bold;
    padding: 12px;
}
/* ------------------------------------------------------------- LoginMaster ----------------------------- */
.login-header-nav
{
    background: #f06060;
}

.login-left-nav
{
    float: left;
}
.login-right-nav
{
    float: right;
}

.login-logo
{
    padding: 5px;
}
.login-footer
{
    padding: 10px;
    background: rgba(0, 0, 0, 0.32);
    display: inline-block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    color: #fff;
}
.eplusLogo
{
    width: 55%;
    position: relative;
    left: 0px;
    top: 5px;
}


/* ------------------------------------------------------------- css for circle Menu ----------------------------- */
.navbar-brand
{
    padding: 0px;
}
.navbar-brand > img
{
    height: 100%;
    padding: 15px;
    width: auto;
}
.navigation .navbar-brand > img
{
    padding: 7px 14px;
}
.navbar-alignit .navbar-header
{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 50px;
}
.navbar-alignit .navbar-brand
{
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
    margin-left: 15px;
}
.navbar-nav > li > .dropdown-menu
{
    z-index: 9999;
}
/* ------------------------------------------------------------- css for circle Menu ----------------------------- */
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
    overflow: hidden;
}

body
{
    background: -webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
    background: linear-gradient(45deg, #0d324f 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #b6aba5 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #918694 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #24334e 100%, rgba(9, 245, 5, 0) 70%);
}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line
{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.menu
{
    width: 5em;
    height: 5em;
}

.menu .btn
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
    transition: opacity 1s, z-index 0.3s, transform 1s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    color: white;
}

.menu .btn .fa
{
    font-size: 3em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.menu .btn:hover .fa
{
    color: rgba(255, 255, 255, 0.7);
}

.menu .btn.trigger
{
    opacity: 1;
    z-index: 100;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.menu .btn.trigger:hover
{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.menu .btn.trigger:hover .line
{
    background-color: rgba(255, 255, 255, 0.7);
}

.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after
{
    background-color: rgba(255, 255, 255, 0.7);
}

.menu .btn.trigger .line
{
    width: 67%;
    height: 6px;
    background: #000;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
    transition: background-color 0.3s, height 0.3s, top 0.3s;
}

.menu .btn.trigger .line:before, .menu .btn.trigger .line:after
{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: #000;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, transform 0.3s;
}

.menu .btn.trigger .line:before
{
    top: -12px;
    -webkit-transform-origin: 15% 100%;
    -ms-transform-origin: 15% 100%;
    transform-origin: 15% 100%;
}

.menu .btn.trigger .line:after
{
    top: 12px;
    -webkit-transform-origin: 25% 30%;
    -ms-transform-origin: 25% 30%;
    transform-origin: 25% 30%;
}

.menu .rotater
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.menu.active .btn-icon
{
    opacity: 1;
    z-index: 50;
}

.menu.active .trigger .line
{
    height: 0px;
    top: 45%;
}

.menu.active .trigger .line:before
{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 110%;
}

.menu.active .trigger .line:after
{
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 110%;
}

/* horrible things are happening here
for some reason nth-child(1) is always busy and elements starting from 2 */

.rotater:nth-child(1)
{
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    transform: rotate(-22.5deg);
}

.menu.active .rotater:nth-child(1) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(22.5deg);
    -ms-transform: translateX(-10em) rotate(22.5deg);
    transform: translateX(-10em) rotate(22.5deg);
}

.rotater:nth-child(2)
{
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}

.menu.active .rotater:nth-child(2) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-22.5deg);
    -ms-transform: translateX(-10em) rotate(-22.5deg);
    transform: translateX(-10em) rotate(-22.5deg);
}

.rotater:nth-child(3)
{
    -webkit-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}

.menu.active .rotater:nth-child(3) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-67.5deg);
    -ms-transform: translateX(-10em) rotate(-67.5deg);
    transform: translateX(-10em) rotate(-67.5deg);
}

.rotater:nth-child(4)
{
    -webkit-transform: rotate(112.5deg);
    -ms-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}

.menu.active .rotater:nth-child(4) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-112.5deg);
    -ms-transform: translateX(-10em) rotate(-112.5deg);
    transform: translateX(-10em) rotate(-112.5deg);
}

.rotater:nth-child(5)
{
    -webkit-transform: rotate(157.5deg);
    -ms-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}

.menu.active .rotater:nth-child(5) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-157.5deg);
    -ms-transform: translateX(-10em) rotate(-157.5deg);
    transform: translateX(-10em) rotate(-157.5deg);
}

.rotater:nth-child(6)
{
    -webkit-transform: rotate(202.5deg);
    -ms-transform: rotate(202.5deg);
    transform: rotate(202.5deg);
}

.menu.active .rotater:nth-child(6) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-202.5deg);
    -ms-transform: translateX(-10em) rotate(-202.5deg);
    transform: translateX(-10em) rotate(-202.5deg);
}

.rotater:nth-child(7)
{
    -webkit-transform: rotate(247.5deg);
    -ms-transform: rotate(247.5deg);
    transform: rotate(247.5deg);
}

.menu.active .rotater:nth-child(7) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-247.5deg);
    -ms-transform: translateX(-10em) rotate(-247.5deg);
    transform: translateX(-10em) rotate(-247.5deg);
}

.rotater:nth-child(8)
{
    -webkit-transform: rotate(292.5deg);
    -ms-transform: rotate(292.5deg);
    transform: rotate(292.5deg);
}

.menu.active .rotater:nth-child(8) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-292.5deg);
    -ms-transform: translateX(-10em) rotate(-292.5deg);
    transform: translateX(-10em) rotate(-292.5deg);
}

.rotater:nth-child(9)
{
    -webkit-transform: rotate(337.5deg);
    -ms-transform: rotate(337.5deg);
    transform: rotate(337.5deg);
}

.menu.active .rotater:nth-child(9) .btn-icon
{
    -webkit-transform: translateX(-10em) rotate(-337.5deg);
    -ms-transform: translateX(-10em) rotate(-337.5deg);
    transform: translateX(-10em) rotate(-337.5deg);
}
.margin-left-5
{
    margin-left: 5px;
}
.margin-left-10
{
    margin-left: 10px;
}
.margin-left-15
{
    margin-left: 15px;
}
.margin-left-20
{
    margin-left: 20px;
}
.padding-left-5
{
    padding-left: 5px;
}
.padding-left-10
{
    padding-left: 10px;
}
.padding-left-15
{
    padding-left: 15px;
}

.margin-right-5
{
    margin-left: 5px;
}
.margin-right-10
{
    margin-left: 10px;
}
.margin-right-15
{
    margin-left: 15px;
}
.margin-right-20
{
    margin-left: 20px;
}
.padding-right-5
{
    padding-right: 5px;
}
.padding-right-10
{
    padding-right: 10px;
}
.padding-right-15
{
    padding-right: 15px;
}

.displayInlineBlock
{
    display: inline-block;
}

.float-right
{
    float: right;
}
.bigTextWrap
{
    white-space: pre-wrap;
    width: 50px;
    left: 0px !important;
}
 .notificationTable {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    text-align: center;
    border: 1px solid rgb(212, 212, 212);
}

.notificationTable  tr, td {
    border: none;
    text-align: center;
    font-size: 13px;
    color: rgb(78, 78, 78);
    padding: 5px;
    width: 30px;
}
.notificationTable tr:nth-child(even) {
        background-color: rgb(239, 239, 239);
}
.notificationTable tr:nth-child(odd) {
    background-color: #fff;
}
.notificationTable th 
{
    text-align: center;
    padding: 10px;
    background: #377ebb;
    color: #fff;
    }
 .TotalFee
 {
    text-align: center;
    font-weight: bold;
    color: #377ebb;
 }   
 .netBalance
 {
    text-align: center;
    font-style:italic;
    color: #377ebb;
 }
/* ------------------------------------------------------------- css for circle Menu ----------------------------- */
/* Small Devices, Tablets */
@media (max-width:991px)
{

}

@media (max-width:767px)
{
    body
    {
        overflow: auto;
    }
    .login-header-nav
    {
        background: #377ebb;
        border-bottom: 2px solid white;
    }
    .eplusLogo
    {
        width: 30%;
        position: relative;
        left: 27%;
        top: 0px;
    }
    .logo
    {
        padding: 10px;
        width: 50px;
        position: relative;
        top: 75px;
        left: 47%;
        z-index: 152;
        background: #377ebb;
        border: 2px solid white; /* border-right: 3px solid white; */
        border-radius: 11px;
    }
    .parentsloginForm
    {
        padding: 25px; /* box-shadow: 0px 0px 20px 4px #ccc; */
        width: 53%;
        margin: 0 auto;
        position: relative; /* top: 95px; */
        background: rgba(255, 255, 255, 0.17);
        border-top: 3px solid #ffffff;
        border-bottom: 3px solid white;
        border-top: 3px solid white;
        border-radius: 24px;
        margin-top: 7%;
        margin-bottom: 25px;
    }
    .parentsloginHeader
    {
        display: block;
        font-size: 23px;
        color: #fff;
        padding: 5px;
        text-align: center;
    }
    .parentsloginContent
    {
        display: block;
        color: #fff;
        padding: 3px;
        text-align: center;
    }
    .textbox
    {
        width: 80%;
        border: none;
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(247, 247, 247, 0.15);
        border-right: 2px solid #f5f5f5;
        color:#fff;
    }
    .clickHere
    {
        color: #93cdff;
    }
    .parentsloginFormIcon
    {
        padding: 14px;
        background: #377ebb;
        color: #fff;
        font-size: 14px;
        display: inline-block;
    }
    .parentsButton
    {
        background: #377ebb;
        border: 0;
        padding: 10px;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }
    .mobileButton
            {
                background: #377ebb;
                border: 0;
                padding: 10px;
                color: #fff;
                padding-left: 20px;
                padding-right: 20px;
                width: 45%;
                border: 2px solid #c1c1c1;
            }
    .forgetPass
    {
        color: #fff;
        display: inline-block;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 15px;
    }
    .login-footer
    {
        padding: 10px;
        background: rgb(19, 107, 183);
        display: inline-block;
        position: relative;
        bottom: 0px;
        width: 100%;
        text-align: center;
        color: #fff;
        border-top: 2px solid white;
    }
    .menuContainer
    {
        position: relative;
        height: 384px;
        margin-bottom: 50px;
    }
    .left-nav
    {
        float: left;
        width: 75%;
        height: 65px;
    }

    .profilePic
    {
        float: left;
    }
    .school-name
    {
        background: rgba(0, 0, 0, 0.17);
    }

    .username
    {
        position: relative;
        top: -36px;
        left: 55px;
    }
    .clickHere:hover
    {
        color: #0D3E33;
        text-decoration: none;
    }
    .iconHeading
    {
        position: absolute;
        left: 0px;
        top: 70px;
        font-size: 14px;
        color: white;
    }
    .calendar-heading
    {
        left: 8px !important;
        top: 71px !important;
    }
    .exam_heading
    {
        left: 17px !important;
        top: 70px !important;
    }
    .library_heading
    {
        left: 10px;
        top: 70px;
    }
    .timetable_img
    {
        width: 80%;
        position: absolute;
        left: 7px;
    }
    .calendar_img
    {
        position: absolute;
        left: 6px;
    }
    .exam_img
    {
        position: absolute;
        left: 6px;
    }
    .attandance_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .homeWork_img
    {
        width: 80%;
        position: absolute;
        left: 5px;
    }
    .sendMail_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .library_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .footerIcon
    {
        padding: 0 5% 0% 5%;
        display: inline-block;
        font-size: 25px !important;
    }
    .exam_heading-teacher
    {
        left: 7px !important;
        top: 70px !important;
    }
    .footer-inner
    {
        padding: 10px;
        background: #377ebb;
        display: inline-block;
        position: relative;
        bottom: 0px;
        width: 100%;
        text-align: center;
        color: #fff;
    }

    .menu-click
    {
        color: #fff;
        position: relative;
        top: 87px;
        left: 43%;
        font-size: 17px;
        background: rgba(0, 0, 0, 0.21);
        padding: 7px;
        border-radius: 6px;
    }
    .fa_arrow
    {
        position: relative;
        left: 315px;
        top: 100px;
        color: #fff;
        font-size: 25px !important;
    }
    .full-box
    {
        position: relative;
        top: 0px;
        margin-bottom:50px;
    }
    .date_style {
    color: #5d5d5d;
    font-size: 15px;
    font-family: raleway;
}
.date-header {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-family: raleway;
    color: #fff;
    font-size: 15px;
}
.text_color_style3 {
    color: #2196F3 !important;
}

.days_periods_style {
    text-align: center;
    font-size: 13px;
    font-family: raleway;
    color: grey;
}

.bg {
    background: rgb(39, 161, 207);
}
.background_style1 {
    background-color: #ececec;
    padding: 20px 0px;
    border-bottom: 2px dotted #808080;
}
.days_periods_style {
    text-align: center;
    font-size: 13px;
    font-family: raleway;
    color: grey;
}
.text_color_style1 {
    color: orange;
}
    .black
    {
        background-color: #377ebb;
        padding: 5px;
        color: #fff;
        text-align: center;
        font-family: raleway;
        margin: 0 auto;
    }
    .orange {
    color: orange;
    border-bottom: none;
    border-top: none;
    font-size: 14px;
    font-family: raleway;
    text-align: center;
}
.red {
    color: red;
    border-bottom: none;
    border-top: none;
    font-size: 14px;
    font-family: raleway;
    text-align: center;
}
.green {
    color: green;
    border-bottom: none;
    border-top: none;
    font-size: 14px;
    font-family: raleway;
    text-align: center;
}
  .notificationTable {
            position: relative;
    top: -20px;
    }
    
    .notificationTable tr:nth-child(odd) {
        background-color: #fff;
    }
    .currentMenu{
    position: absolute;
    color: #377ebb;
    top: 17px;
    left: 11%;
    font-size: 20px;
    font-weight: bold;
    }
    /* ------------------------------------------------------------- AnimationMenu ----------------------------- */

    .menu.active .rotater:nth-child(2) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-22.5deg);
        -ms-transform: translateX(-10em) rotate(-22.5deg);
        transform: translate(-165px, -90px) rotate(-22.5deg);
    }
    .menu.active .rotater:nth-child(3) .btn-icon
    {
        -webkit-transform: translateX(-10em, -4em) rotate(-67.5deg);
        -ms-transform: translateX(-10em, -4em) rotate(-67.5deg);
        transform: translate(-10em, -4em) rotate(-67.5deg);
    }
    .menu.active .rotater:nth-child(4) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-112.5deg);
        -ms-transform: translateX(-10em) rotate(-112.5deg);
        transform: translate(-180px, -40px) rotate(-112.5deg);
    }
    .menu.active .rotater:nth-child(5) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-157.5deg);
        -ms-transform: translateX(-10em) rotate(-157.5deg);
        transform: translate(55px, -135px) rotate(-157.5deg);
    }
    .menu.active .rotater:nth-child(6) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-202.5deg);
        -ms-transform: translateX(-10em) rotate(-202.5deg);
        transform: translate(-100px,40px) rotate(-202.5deg);
    }
    .menu.active .rotater:nth-child(7) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-247.5deg);
        -ms-transform: translateX(-10em) rotate(-247.5deg);
        transform: translate(-175px, 45px) rotate(-247.5deg);
    }
    .menu.active .rotater:nth-child(8) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-292.5deg);
        -ms-transform: translateX(-10em) rotate(-292.5deg);
        transform: translate(-180px, -50px) rotate(-292.5deg);
    }
    .menu.active .rotater:nth-child(9) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-337.5deg);
        -ms-transform: translateX(-10em) rotate(-337.5deg);
        transform: translate(-106px, -45px) rotate(-337.5deg);
    }




}


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px)
{
    body
    {
        background: white;
    }
    .school-name
    {
        background: rgba(255, 255, 255, 0.2);
        padding: 10px;
        display: block;
        font-size: 20px;
        color: white;
        text-align: center;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #ccc;
    }
    .textbox
    {
        width: 80%;
        border: none;
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(247, 247, 247, 0.15);
        border-right: 2px solid #f5f5f5;
    }
    .loginFormIcon
    {
        padding: 14px;
        background: #717171;
        color: #fff;
        font-size: 14px;
        display: inline-block;
    }
    .formLogin
    {
        margin-top: 20px;
    }
    .button
    {
        background: #989898;
        border: 0;
        padding: 10px;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }
    .logo
    {
        padding: 10px;
        width: 52px;
        position: relative;
        top: 130px;
        left: 43%;
        z-index: 152;
        background: #377ebb;
        border: 2px solid white; /* border-right: 3px solid white; */
        border-radius: 11px;
    }
    .footer-inner
    {
        padding: 10px;
        background: #377ebb;
        display: inline-block;
        position: relative;
        width: 100%;
        text-align: center;
        color: #fff;
    }
    .menuContainer
    {
        position: relative;
        height: 450px;
        margin-bottom: 50px;
    }
    .button:hover
    {
        background: #f06060;
    }
    .forgetPass
    {
        color: #989898;
        display: inline-block;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 15px;
    }
    .clickHere
    {
        color: #f06060;
    }
    .clickHere:hover
    {
        color: #0D3E33;
        text-decoration: none;
    }
    .iconHeading
    {
        position: absolute;
        left: 0px;
        top: 70px;
        font-size: 14px;
        color: white;
    }
    .calendar-heading
    {
        left: 8px !important;
        top: 71px !important;
    }
    .exam_heading
    {
        left: 17px !important;
        top: 70px !important;
    }
    .library_heading
    {
        left: 10px;
        top: 70px;
    }
    .timetable_img
    {
        width: 80%;
        position: absolute;
        left: 7px;
    }
    .calendar_img
    {
        position: absolute;
        left: 6px;
    }
    .exam_img
    {
        position: absolute;
        left: 6px;
    }
    .attandance_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .homeWork_img
    {
        width: 80%;
        position: absolute;
        left: 5px;
    }
    .sendMail_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .library_img
    {
        width: 75%;
        position: absolute;
        left: 9px;
    }
    .footerIcon
    {
        padding: 0 5% 0% 5%;
        display: inline-block;
        font-size: 25px !important;
    }
    .exam_heading-teacher
    {
        left: 7px !important;
        top: 70px !important;
    }

    .username
    {
        left: 20%;
        position: relative;
    }


    .left-arrow, .right-arrow
    {
        padding-left: 10px;
        padding-right: 10px;
    }
    .full-box
    {
        position: relative;
        top: -20px;
        width: 100%;
        margin-bottom:50px;
    }
    .bg
    {
        background: rgb(39, 161, 207);
        padding:10px;
        min-height:70px;
    }
    .date-header
    {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        font-family: raleway;
        color: #fff;
        font-size: 15px;
    }
    .background_style1
    {
        background-color: #ececec;
        padding: 20px 0px;
        border-bottom: 2px dotted #808080;
    }
    .days_periods
    {
        text-align: center;
        font-size: 16px;
        text-transform:uppercase;
        font-family: raleway;
        color: blue;
        background-color: #dde9f7;
        border-top: 2px solid #cecee8;
        
        height: 30px;
        margin : 5px 0px 0px 5px;
    }
        .days_periods_style
    {
        text-align: center;
        font-size: 16px;        
        font-family: raleway;
        color: grey;
        height:25px;
    }
    .text_color_style1
    {
        color: orange;
    }

    .text_color_style3
    {
        color: #2196F3;
    }

    .white
    {
        background-color: #fff;
        padding: 3px;
    }
    .date_style
    {
        color: #5d5d5d;
        font-size: 15px;
        font-family: raleway;
    }
    .orange
    {
        color: orange;
        border-bottom: none;
        border-top: none;
        font-size: 14px;
        font-family: raleway;
        text-align: center;
    }

    .red
    {
        color: red;
        border-bottom: none;
        border-top: none;
        font-size: 14px;
        font-family: raleway;
        text-align: center;
    }
    .green
    {
        color: green;
        border-bottom: none;
        border-top: none;
        font-size: 14px;
        font-family: raleway;
        text-align: center;
    }

    .black
    {
        background-color: #377ebb;
        padding: 5px;
        color: #fff;
        text-align: center;
        font-family: raleway;
        margin: 0 auto;
    }
        .notificationTable  {
    position: relative;
    top: 0px;
}

    .currentMenu{
    position: absolute;
    color: #377ebb;
    top: 17px;
    left: 17%;
    font-size: 20px;
    font-weight: bold;
    }
    /* ------------------------------------------------------------- LoginMaster ---------------------------------------------------------- */
    .login-header-nav
    {
        background: #377ebb;
        height: 85px;
        border-bottom: 2px solid white;
    }

    .login-left-nav
    {
        float: left;
    }
    .login-right-nav
    {
        float: right;
    }

    .login-logo
    {
        padding: 5px;
    }
    .login-footer
    {
        padding: 10px;
        background: #155184;
        display: inline-block;
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
        color: #fff;
        border-top: 2px solid;
        margin-top: 25px;
    }
    .eplusLogo
    {
        width: 60%;
        position: relative;
        left: 5%;
        top: 12px;
    }

    /* ------------------------------------------------------------- LoginPage ------------------------------------------------------------- */
    .loginHeader
    {
        display: block;
        font-size: 23px;
        color: #696969; /* padding: 5px; */
        text-align: center;
    }
    .loginContent
    {
        display: block;
        color: #a5a5a5;
        padding: 3px;
        text-align: center;
    }
    .loginForm
    {
        padding: 25px;
        box-shadow: 0px 0px 20px 4px #ccc;
        width: 80%;
        margin: 0 auto;
        position: relative;
        top: 100px;
    }

    /* ------------------------------------------------------------- TeacherLoginPage ----------------------------- */

    .teacherloginHeader
    {
        display: block;
        font-size: 23px;
        color: #fff; /* padding: 5px; */
        text-align: center;
    }
    .teacherformLogin
    {
        margin-top: 20px;
    }
    .teacherloginContent
    {
        display: block;
        color: #fff;
        padding: 3px;
        text-align: center;
    }
    .teacherloginForm
    {
        padding: 25px; /* box-shadow: 0px 0px 20px 4px #ccc; */
        width: 80%;
        margin: 0 auto;
        position: relative;
        top: 100px;
        background: rgba(255, 255, 255, 0.17);
    }
    .teacherloginFormIcon
    {
        padding: 14px;
        background: #f06060;
        color: #fff;
        font-size: 14px;
        display: inline-block;
    }
    .teacherButton
    {
        background: #f06060;
        border: 0;
        padding: 10px;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }

    /* ------------------------------------------------------------- ParentsLoginPage ----------------------------- */

    .parentsloginHeader
    {
        display: block;
        font-size: 23px;
        color: #fff;
        padding: 5px;
        text-align: center;
    }
    .parentsformLogin
    {
        margin-top: 20px;
    }
    .parentsloginContent
    {
        display: block;
        color: #fff;
        padding: 3px;
        text-align: center;
    }
    .parentsloginForm
    {
        padding: 25px; /* box-shadow: 0px 0px 20px 4px #ccc; */
        width: 85%;
        margin: 0 auto;
        position: relative; /* top: 95px; */
        background: rgba(255, 255, 255, 0.17);
        border-top: 3px solid #ffffff;
        border-bottom: 3px solid white;
        border-top: 3px solid white;
        border-radius: 24px;
        margin-top: 20%;
        margin-bottom: 50px;
    }
    .parentsloginFormIcon
    {
        padding: 14px;
        background: #377ebb;
        color: #fff;
        font-size: 14px;
        display: inline-block;
    }
    .parentsButton
    {
        background: #377ebb;
        border: 0;
        padding: 10px;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }
    .forgetPass
    {
        color: #fff;
        display: inline-block;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 15px;
    }
    .clickHere
    {
        color: #a1d3ff;
    }
    .parentsclickHere:hover
    {
        color: #0D3E33;
        text-decoration: none;
    }


    /* ------------------------------------------------------------- AnimationMenu ----------------------------- */

    .menu.active .rotater:nth-child(2) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-22.5deg);
        -ms-transform: translateX(-10em) rotate(-22.5deg);
        transform: translate(-165px, -90px) rotate(-22.5deg);
    }
    .menu.active .rotater:nth-child(3) .btn-icon
    {
        -webkit-transform: translateX(-10em, -4em) rotate(-67.5deg);
        -ms-transform: translateX(-10em, -4em) rotate(-67.5deg);
        transform: translate(-10em, -4em) rotate(-67.5deg);
    }
    .menu.active .rotater:nth-child(4) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-112.5deg);
        -ms-transform: translateX(-10em) rotate(-112.5deg);
        transform: translate(-180px, -40px) rotate(-112.5deg);
    }
    .menu.active .rotater:nth-child(5) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-157.5deg);
        -ms-transform: translateX(-10em) rotate(-157.5deg);
        transform: translate(55px, -135px) rotate(-157.5deg);
    }
    .menu.active .rotater:nth-child(6) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-202.5deg);
        -ms-transform: translateX(-10em) rotate(-202.5deg);
        transform: translate(-100px,40px) rotate(-202.5deg);
    }
    .menu.active .rotater:nth-child(7) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-247.5deg);
        -ms-transform: translateX(-10em) rotate(-247.5deg);
        transform: translate(-175px, 45px) rotate(-247.5deg);
    }
    .menu.active .rotater:nth-child(8) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-292.5deg);
        -ms-transform: translateX(-10em) rotate(-292.5deg);
        transform: translate(-180px, -50px) rotate(-292.5deg);
    }
    .menu.active .rotater:nth-child(9) .btn-icon
    {
        -webkit-transform: translateX(-10em) rotate(-337.5deg);
        -ms-transform: translateX(-10em) rotate(-337.5deg);
        transform: translate(-106px, -45px) rotate(-337.5deg);
    }
}

@media only screen and (max-width : 320px)
{

}