html, body {
    font-family: 'Poppins', sans-serif;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(7, 57, 86);
}
i.fas.fa-graduation-cap {
    color: #053b56;
}
b, strong {
    font-weight: bolder;
    color: #9fcc6f;
}
.position-relative{
    position: relative;
} 
.position-absolute{
    position:absolute;
} 
.position-absolute-t0{
    position:absolute;
    top:0;
}
.position-absolute-t0{
    position:absolute;
    top:0;
}
.position-absolute-t7 {
    position: absolute;
    top: 7rem;
}
.position-absolute-r0 {
    position: absolute;
    right: 0;
}
.position-absolute-t42 {
    position: absolute;
    top: 42rem;
}


button[aria-expanded=true] {
    transform: rotate(-450deg);
}
a, button {
    outline: none !important;
    transition:all .3s
        
}
a:focus, a:hover {
    color: #46a0ed;
    text-decoration: none; 
}
/*.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}*/
h4.title-grp {
    color: whitesmoke;
    font-weight: 900;
}
.navbar {
    z-index: 2;
}
.navbar-default {
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
 
    background: linear-gradient(260deg, rgb(136, 190, 245), rgb(53, 115, 167), #2784d4);
    background-size: 600% 600%;
 
    border: 0px;
}
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
        color: #555;
        background-color: #e7e7e7;
    }
    .navbar-default .navbar-brand {
        color: #e7e7e7;
    }
.navbar-brand img {
    width: 190px;
}
    .navbar-default .navbar-nav > li > a {
        color: #e7e7e7;
    }
        .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
            color: #fff;
            background-color: transparent;
        }
a.navbar-brand span {
    font-weight: 700;
    text-transform: uppercase;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #ffffff;
    background-color: transparent;
}
.navbar-default .navbar-toggle {
    border-color: #f6f6f6;
    background-color: #f6f6f6;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: #e7e7e7;
    text-decoration: none;
    background-color: #2a81cb;
}
span.fa.fa-bars {
    font-size: 40px;
    color: #f7cf6d;
}
button, input, select, textarea {
    font-size: inherit;
    line-height: inherit;
}
.right{
    float:right
}
.left {
    float: left
}
.main {
    float: left;
    width: 100%;
}

.container {
    max-width: 1270px;
}
.login-Wrapper {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}


.form-Wrapper {
    background: rgb(255, 255, 254);
    overflow: hidden;
    border-radius: 7px;
    width: 466px;
    margin: auto;
    border: 2px solid #28395959;
    box-shadow: 1px 1px 7px 0px #80808026;
    padding: 15px;
}

.form-header {
    height: auto;
    background: rgb(255, 255, 254);
    width: 100%;
    color: #283959;
    float: left;
    padding: 15px 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background-size: 600% 600%;
    -webkit-animation: Gradient 1s ease infinite;
    -moz-animation: Gradient 1s ease infinite;
    animation: Gradient 2s ease infinite;
    /* border: 2px solid; */
    border-radius: 6px;
}

    /*.form-header .text-Wrapper {
        margin-top: 20px;
    }*/
    
    .login-btn {
        border-radius: 0 !important;
        height: 55px;
        background-color: #283959 !important;
        border: none !important;
        color: white !important;
        font-weight: bold !important;
        box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.13);
        font-size: 20px !important;
    }
    .login-btn:focus {
        box-shadow: 0 0 0 0.2rem #7babd1 !important;
    }
.ui.error {
  
    margin-top: 15px;
}
    .ui.error ul {
        list-style: none;
        padding: 0;
      
        color: white;
    }
    .ui.error li {
        padding: 10px;
        background: #d07373;
        color: white;
    }
@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
.login-Wrapper form {
    float: left;
    width: 100%;
    padding: 20px;
}
.login-icon {
    text-align: center;
}
    .login-icon i {
        font-size: 60px;
        margin: 20px;
    }
.text-Wrapper {
    text-align:center
}
.text-Wrapper h2 {
    font-weight: 700;
}
.text-Wrapper p {
    font-size: 18px;
}
.login-Wrapper .checkbox label {
    min-height: 20px;
    padding-left: 40px;
    padding-top: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 500
}

.login-Wrapper .checkbox input[type=checkbox] {
    position: absolute;
    margin-top: -4px;
    margin-left: -40px;
    height: 31px;
    width: 31px;
}
input.form-control, label {
    color: #595959;
    font-weight: 500
}
.form-cnt .btn {
    color: #f5f5f5;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.13);
    font-size: 20px;
    height: 60px;
    width: 100%;
    position: relative;
   
    display: inline-block;
  
    border-radius: 0;
}
.form-cnt .modal-footer {
    display: block;
}
    input {
    transition:all .5s;
}
.panel {
    background-color: #f6f6f6;
}

.panel-title {
    font-size: 20px;
    padding: 10px;
    background: #f1f1f1;
    width: 100%;
}
.small, small {
    font-size: 15px;
}
.number {
    font-size: 30px;
}
span.amount {
    font-weight: 800;
}
.add {
    padding: 4px 4px 4px 5px;
    background: #00da8b;
    color: white;
    border-radius: 5px;
    font-size: 15px;
    margin: 1px;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    float:right
}
    .add:hover {
        background: #2b7fc8;
        cursor: pointer;
        transition: .25s linear;
        -webkit-transition: .25s linear;
    }
.statistic-box h2 {
    font-size: 30px;
    font-weight: 700;
}
.inner-banner {
    position: relative;
    height: 66px;
    width: 100%;
    float: left;
    background: #283959;
    padding: 10px;
    border-bottom: 2px solid #C50002;
}
    .inner-banner .container .row > h2 {
        font-weight: 800;
        font-size: 24px;
        color: whitesmoke;
        text-align: left;
        /* padding: 11.5px 14px; */
        /* background: #2784d4; */
        position: absolute;
        bottom: 0;
    }
.title-grp span {
    display: block;
    font-size: 16px;
    color:whitesmoke;
    font-weight: 400;
}
.field-section {
 float:left;
 width:100%;
}
.field-section .form-cnt {
    width: 600px;
    margin:auto
}
.txt {
    margin: auto;
    width: 600px;
    
}
input[type=text], input[type=password], input[type=number], select, input[type=email], textarea {
    -webkit-appearance: none;
    border: 2px;
    display: block;
    width: 100%;
    padding: 15px;
    height: 55px;
    line-height: 1;
    font-size: 18px;
    color: #005ba2 !important;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.13);
    background: #fdfdfd;
    border-radius: 0 !important;
}
    input[type=text]:focus, input[type=password]:focus, select:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus {
        box-shadow: 0 0 0px 3px !important;
        outline: none;
    }

.search-btn {
    height: 45px;
    color: white !Important;

}
.search-txbx {
    height:50px !Important;
    border-radius:0
    
}
.table-wrpr {
   
    background: white;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.13);
}

.banner {
    width: 100%;
    height: 100vh;
}
    .banner h1 {
        text-align: center;
        /*padding-top: 100px;*/
    }
.bannerIcons {
    width: 850px;
    height: 370px;
    position: relative;
    margin: auto;
}
.homebanner {
    background: url(../images/bannergreen.png) no-repeat;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 370px;
}
.school1 {
    width: 191px;
    position: absolute;
    top: -117px;
    right: 0;
}

.school2 {
    width: 150px;
    position: absolute;
    top: -18px;
    left: 0;
}
.teacher1, .teacher2 {
    width: 62px;
    bottom: 40px;
    position: absolute;
    left: 0;
}
.teacher2 {
    width: 80px;
    left: 59px;
}
.sun {
    position: absolute;
    top: -175px;
    left: 0;
    width: 130px;
}
.fourbabies {
    position: absolute;
    right: -25px;
    bottom: 50px;
}
.bg-pink {
    background-color: #e6808ccc !important;
}
.bg-yellow {
    background-color: #f7cf6d !important;
}
.Bus-school {
    left: -109px;
    top: 37px;
    width: 158px;
    position: absolute;
}

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

.bannerBtn {
    background: #f7cf6d;
    padding: 25px 58px 25px 65px;
    color: #404040;
    font-size: 20px;
    margin-top: 65px;
    position: relative;
    z-index: 9999999;
    display: inline-block;
}
    .bannerBtn:hover, .btn{
        transition:all .5s
    } 
    
    .bannerBtn:hover{
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
.detail-wrapper {
    background: white;
    box-shadow: 2px 2px 2px 0px #b8b8b821;
}
.sm-yellow {
    color: #f4c151 !important;
}
.sm-green {
    color: #9fcc6f !important;
}
.sm-blue {
    color: #283959 !important;
}
.display-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100vh;
}
.display-cell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
label.gender-label {
    padding: 15px 0;
    padding-bottom: 0;
    width: 50%;
    box-sizing: border-box;
    float: left;
    position:relative;
}
    label.gender-label span {
        position: absolute;
        font-size: 20px;
        left: 45px;
    }
    label{
        margin:0 !important;
    }
input[type=radio]{
    width:30px;
    height:30px
}

input.error, textarea.error {
    color: #d17b7b !important;
    box-shadow: 0 0 0 2px
}
label.error {
    color: #d17b7b !important;
    width: 100%;
}
.show-lg {
    display: none;
}
.page-icon img{
    width: 125px;
}
.babies-icon img {
    width: 197px;
}
.female-Teacher img {
    width: 108px;
}
.card > i.fas.fa-check, .card > i.fas.fa-times,.card >  i.far.fa-file-alt {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 30px
}
.card i.fas.fa-check {
    color: #83de22
}
.card i.fas.fa-times
{color:#dc3545}
i.far.fa-file-alt{
    color:#f4c151
}
.jumbotron {
    background: #f4c15159;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.13);

}
span.badge.badge-success.float-right {
     color: #fff;
    background-color: #90ce4d;
    font-size: 50px;
    border-radius: 40px
}
i.fas.fa-graduation-cap {
    font-size: 50px;
}
.table td, .table th {
   
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.nav-tabs a {
    background: white;
    padding: 15px;
    color: #9fcc6f;
    box-shadow: 1px 1px 1px 0 #dddddd;
}
    .nav-tabs a.active {
        background: #9fcc6f;
        color: white;
    }
.nav-tabs > li {
    padding: 12px 0;
    margin-right: 3px;
}
.tab-content {
    padding: 30px 0;
}
    .tab-content > .tab-pane {
      
        background: white;
        padding: 15px;
        box-shadow: 2px 2px 2px 0px #b8b8b821;
    }

#fee-form {
    background: transparent ;
    box-shadow: 0 0 0px #b8b8b821;
}

.nav-tabs {
    border-bottom: 0px !important;
}
thead tr {
    background: #053b56;
    color: white;
}

.table tr:nth-child(even) {
    background-color: #053b5612;
}
.tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #9fcc6f;
    border-radius: .25rem;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #9fcc6f;
}
span.fee {
    color: white;
    padding: 8px;
}
span.fee.not {
    background: #d95967;
}
    span.fee.paid {
        background: #9fcc6f;
    }
.siblings {
    background: #ffffff;
}
.sibling-image img {
    width: 100%;
}
.sibling-image {
    width: 100%;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 15px;
}

*::-webkit-scrollbar{
    width: 6px;
    background-color: #F5F5F5;
    border-radius: 10px
}

*::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: #325d7f;
}
.assessment i {
    font-size: 45px;
    color: #9eb3bd;
}
.personal-detail {
    font-size:14px
}
    .personal-detail tr td:first-child {
        width: 50%;
    }


div.form-control {
    border: 1px solid #283959;
    background: transparent;
}
.input-group-prepend .input-group-text {
    background: #283959;
    border: 1px solid #283959 !important;
    padding: 0 25px;
    width: 65px;
}

.input-group-text i {
    color: white;
}
div#email b {
    color: #283959;
}
h1.mb-3.mt-3 {
    color: #283959;
}

 .nav-tabs > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    zoom: 1; /* hasLayout ie7 trigger */
}

 .nav-tabs {
    text-align: center;
}
.nav {
    display: block;
}
.search-btn {
    -webkit-appearance: none;
    border: 2px;
    display: block;
    width: 100%;
    padding: 13px;
    height: 50px;
    line-height: 1;
    font-size: 22px;
    border-radius: 0;
    color: #fdfdfd;
    background: #9fcc6f;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.13);
}
.login-icon img {
    width: 195px;
}
.expiryWrapp .login-icon img {
    width: 100px;
}
.search-textbox{
    height:50px !important
}
.lock,.key{
    position:absolute;
    z-index:-1
}
.lock {
  
    top: 100px;
    left: 40px;
}
.main {
    padding-top: 0;
    overflow-x: hidden;
}
.lock img {
    width: 180px;
  
}
.key {
    top: 100px;
    right: 75px;
} 
    .key img {
        width: 130px;
    }


button.disabled,a.disabled {
    pointer-events: none;
}
.loader i {
    font-size: 100px;
}
.loader {
    position: absolute;
    background: #ffffffb0;
    z-index: 9;
    width: 100%;
    height: 100vh;
}

a {
    color: #283959 !important;
    text-decoration: none !important;
}

    a:focus, a:hover {
        color: #5f7ca0 !important;
    }
.login-icon {
    margin-top: 20px;
}

.btn-success {
    color: #fff;
    background-color: #28375c !important;
    border-color: #28375c !important;
}
    .btn-success:hover {
        background-color: #434f6f !important;
        border-color: #434f6f !important;
    }


.hide .login-col {
    max-width: 100% !important;
    width: 100% !important;
    flex: none;
}
.hide .expiry-col {
    display: none;
}
    /*Responsive*/
    @media (max-width:1200px) {
        .babies-icon img {
            width: 145px;
        }
    }

    @media (min-width:992px) {

        .show-lg {
            display: block;
        }
    }

    @media (max-width:991px) {
        .desktop {
            display: none
        }

        .field-section .form-cnt {
            width: 100% !important;
        }

        .bannerIcons {
            width: 100%;
        }

        .sun {
            position: absolute;
            top: -90px;
            left: 15px;
            width: 90px;
        }

        .teacher1, .teacher2 {
            width: 55px;
            bottom: 40px;
            position: absolute;
            left: 15px;
        }

        .teacher2 {
            width: 70px;
            left: 65px;
        }

        .display-4 {
            font-size: 3rem;
        }

        .fourbabies {
            position: absolute;
            right: 15px;
            bottom: 50px;
            width: 264px;
        }

        .school1 {
            width: 159px;
            position: absolute;
            top: -70px;
            right: 15px;
        }

        .babies-icon img {
            width: 235px;
        }

        .position-relative-md {
            position: relative;
            display: inline-block;
            top: 0;
            text-align: center;
        }

        .display-block-md {
            display: block
        }

        .display-inline-block-md {
            display: inline-block
        }
    }



    @media (max-width:767px) {
        .form-Wrapper {
            width: 100%;
        }

        .navbar-nav .open .dropdown-menu {
            background-color: gainsboro;
        }
      .login-main .mb{
           
            margin-bottom:15px;
        }
      .login-main {
            box-sizing:border-box;
            padding:15px;
        } 
    }

    @media (min-width:768px) {
        i.fas.fa-graduation-cap {
            font-size: 75px;
        }
    }

    @media (max-width: 480px) {
        .adCol strong, .adCol b {
            font-size: 13px !important;
        }

        .row {
            font-size: 13px
        }

        .adCol i.fas.fa-graduation-cap {
            font-size: 46px;
        }

        .banner h1 {
            font-size: 29px;
        }

        .school1 {
            width: 136px;
            position: absolute;
            top: 22px;
            right: 0;
        }

        .bannerBtn {
            padding: 25px 58px 25px 65px;
            font-size: 16px;
            margin-top: 65px;
            position: relative;
            z-index: 9999999;
            display: inline-block;
        }

        .sun {
            position: absolute;
            top: 0;
            left: 25px;
            width: 70px;
            z-index: 0;
        }

        .bannerIcons {
            width: 300px;
            height: 370px;
            position: relative;
            margin: auto;
        }

        .teacher1, .teacher2 {
            display: none
        }

        .fourbabies {
            position: absolute;
            right: 0;
            bottom: 50px;
            width: 300px;
        }
    }

    @media (min-width:1200px) {
        i.fas.fa-graduation-cap {
            font-size: 90px;
        }
    }
    .login-main .dd-option {
    height: 55px !important;

}
.login-main .AddItem .dd-container,.login-main  #AddItem .dd-selected,.login-main  .dd-select, .login-main .EditItem .dd-container, .login-main #EditItem .dd-selected, .login-main .dd-select {
    height: 55px !important;
}
.login-main .dd-options {
    top: 55px !important;
}
.login-main .dd-container, .login-main .dd-selected, .login-main .dd-select {
    height: 55px !important;
}
.login-main .dd-container {
  
    width: 100% !important;
}
.login-main .dd-select {
    background: rgb(255, 255, 254) !important;
      
}
.login-main .dd-selected {
        padding: 16px 20px 16px 10px !important;
}