section.parents-login,
section.parents-registration {
    padding: 0 15px;
}

.listing-inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.listing-inner .child-item {
    flex: 50%;
    max-width: 50%;
    padding: 0 15px;
    margin-bottom: 30px;
}

.listing-inner .child-wrapper {
    height: 100%;
    border: solid 1px #d1e4dd;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    background: #d1e4dd21;
}

.listing-inner .child-wrapper h3 {
    font-size: 14px !important;
    color: #000;
    display: flex;
    padding: 10px 0px;
    margin: 0;
    border-bottom: solid 1px #d1e4dd;
}

.listing-inner .child-wrapper h3 span.name {
    font-weight: 700;
    max-width: 40%;
    flex: 40%;
    display: inline-block;
}

.listing-inner .child-wrapper h3 span.name-detail {
    padding-left: 10px;
    font-weight: 400;
    max-width: 60%;
    flex: 60%;
}

.child-item .child-wrapper a.pay-fee,
input.n-bank-pay-now,input.n-pay-now,
input.n-bus-request {
    background-color: #9f222c;
    max-width: 140px;
    margin: 35px auto 0;
    border-radius: 50px;
    padding: 0 0 2px;
    vertical-align: middle;
    line-height: normal;
    display: flex;
    align-items: center;
    height: 48px;
    justify-content: center;
    border: solid 2px #9f222c;
    transition: all 0.35s ease-in-out;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

button.bus-request {
    border: none;
    transition: all 0.35s ease-in-out;
    color: #194978;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0;
    padding: 0 !important;
    background: transparent;
}

/* .button.bus-request:hover {
    color: #194978;
    background: transparent;
    border-radius: 50px;
    border: solid 2px #194978;
} */

.child-item .child-wrapper a.pay-fee:hover,
.child-item .child-wrapper a.pay-fee:focus {
    color: #9f222c;
    background: transparent;
    border-radius: 50px;
    border: solid 2px #9f222c;
}

.listing-inner .child-wrapper h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.child-listing h1 {
    font-size: 35px;
    font-weight: bold;
    padding: 15px 0;
}

.n-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 -15px;
}

.n-col-12 {
    flex: 100%;
    max-width: 100%;
    padding: 0 15px;
}

.n-col-6 {
    flex: 50%;
    max-width: 50%;
    padding: 0 15px;
}

.n-col-8 {
    flex: 70%;
    max-width: 70%;
    padding: 0 15px;
}

.n-col-4 {
    flex: 30%;
    max-width: 30%;
    padding: 0 15px;
}

.n-response.error {
    background-color: #ffa5a5;
    font-size: 14px;
    color: #000;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    border-radius: 10px 10px 0 0;
    line-height: 20px;
    padding: 7px 10px;
    text-align: center;
}

.n-response.error-bottom {
    background-color: #ffa5a5;
    font-size: 14px;
    color: #000;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px 10px 0 0;
    line-height: 20px;
    padding: 7px 10px;
    text-align: center;
}

.n-response.success {
    background-color: #a9ffac;
    font-size: 14px;
    color: #000;
}

.n-response.success-bottom {
    background-color: #a9ffac;
    font-size: 14px;
    color: #000;
}

/***Login Page Start***/
.parents-login,
.parents-registration {
    width: 100%;
}

.login-outer {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.login-outer>div {
    width: 50%;
}

.login-outer .login-left {
    display: flex;
    justify-content: center;
    position: relative;
}

.login-left-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
}

.login-outer .login-left img {
    max-width: 885px;
    width: 100%;
    object-fit: cover;
}

.login-outer .login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 55px 60px;
    background-repeat: no-repeat;
    background-color: #fff;
    background-image: url(../images/login-bg.png);
    background-size: cover;
    background-position: center;
}

.login-right-outer {
    max-width: 654px;
    margin: auto;
    width: 100%;
}

.login-right-outer .login-header {
    margin-bottom: 30px;
}

.login-right-outer .login-header img {
    width: 100%;
}

.login-right-outer .login-header h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    margin-bottom: 10px;
    text-align: center;
    background: -webkit-linear-gradient(#0c1750,#bd0362);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-right-outer .login-header .login-text p {
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500;
    line-height: 27px;
    font-size: 16px;
}

.login-right-outer .login-header .login-text p:last-child {
    margin-bottom: 0px;
}

form.nozha-portal-login-form,
form.nozha-portal-form {
    width: 100%;
    padding: 50px 30px;
    border-radius: 10px;
    border: solid 1px #d1e4dd;
    box-shadow: 15px 15px 40px rgb(4 12 30 / 4%);
    position: relative;
    background: #fff;
}

.login-form-main input {
    border: solid 2px #d1e4dd;
    border-radius: 50px;
    padding: 0 20px;
    height: 50px;
    margin: 0;
}

.login-form-main input[type="submit"],
.forgot-password-submit input[type="submit"],
.profile-details input[type="submit"],
button.n-pay-res.n-form-control{
    max-width: 140px;
    margin: 15px auto 0 !important;
    border-radius: 50px;
    padding: 0 0 1px;
    vertical-align: middle;
    line-height: normal;
    display: flex;
    align-items: center;
    height: 48px;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: transparent linear-gradient(318deg, #0c1750 0%, #bd0362 100%) 0% 0% no-repeat padding-box;
    transition: all 0.8s ease;
}
.login-form-main input[type="submit"]:hover {
    background: transparent linear-gradient(318deg, #bd0362 0%, #0c1750 100%) 0% 0% no-repeat padding-box;
}
.forgot-password-submit input[type="submit"] {
    margin: 0;
}
.login-form-main a.dont-have {
    position: absolute;
    bottom: 10px;
    font-size: 15px;
    text-align: center;
    left: 0;
    display: inline-block;
    margin: auto;
    width: 100%;
}

.login-form-main input:not([type="submit"]),
.nozha-profile-form input.n-form-control{
    border-radius: 50px;
    border-color: #d1e4dd;
    background: #f5f7f6;
    border: solid 2px #d1e4dd;
    padding: 0 20px;
    margin: 0;
}

.login-form-main label.n-col-form-label,
.profile-details label.n-col-form-label,
.verification-pending .n-col-form-label {
    font-size: 14px;
    padding: 0 0 0 9px;
}

a.changeEmail,
a.changePhone {
    color: red;
    text-decoration: underline;
}

.n-form-group {
    margin-bottom: 10px;
}

.n-form-group>label {
    color: #112E4F;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
}

.n-form-control {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: 60px;
    font-size: 14px;
    color: #9AA9BF;
    background: #F4F7FC;
    border: solid 1px #F4F7FC;
    border-radius: 10px;
    font-weight: 500;
    outline: none !important;
    padding: 18px 15px;
}

.login-outer {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
    max-width: 1096px;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(21, 25, 67, .20);
}

.login-outer .login-left:before {
    background: #000000;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    filter: opacity(0.5);
}

.login-left-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.login-left-text h2 {
    font-size: 36px;
    margin: 0 0 15px;
    color: #fff;
}

.n-bank-response.failed {
    color: red;
}
.n-bank-response.success {
    color: green;
}

/***Login Page End****/

.portal-dashboard .container {
    max-width: 1320px;
    margin: auto;
    padding: 0 15px;
    width: 100%;
}

section.portal-dashboard {
    width: 100%;
}
.dashboard-card {
    background: #fff;
    box-shadow: 0 0 15px rgba(21, 25, 67, .20);
    padding: 30px;
    border-radius: 10px;
}

.dashboard-card>h3 {
    text-align: center;
    color: #0c1750;
}

.dashboard-card h1 {
    text-align: center;
    margin: 0 0 40px;
}

.payment-card h1 {
    font-size: 35px;
    font-weight: bold;
    padding: 15px 0;
    text-align: center;
    margin: 0 0 40px;
}

/****Payment Modal****/
.payment-modal,
.payment-modal-res,
.payment-bank-modal,
.bus-request-modal,
.change-communication-details {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 15px 30px;
    display: none;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgb(0, 0, 0, 0.8);
}
.change-communication-details {
    z-index: 99999;
}
div:where(.swal2-container) {
    z-index: 9999999999 !important;
}
.nozha-open{
    overflow: hidden;
}
.modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-top: 50px !important;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out;
    margin: auto;
    overflow: auto;
}

.modal-wrapper {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    outline: 0;
}

.payment-modal label,
.payment-modal-res label,
.bus-request-modal label {
    font-size: 14px;
    padding: 0 0 0 9px;
}

.payment-modal input:not([type="submit"]):not([type="radio"]),
.payment-modal textarea,
.bus-request-modal input:not([type="submit"]):not([type="radio"]),
.bus-request-modal textarea,
.payment-modal-res input:not([type="submit"]):not([type="radio"]),
.payment-modal-res textarea {
    border-radius: 50px;
    border-color: #d1e4dd;
    background: #f5f7f6;
    border: solid 2px #d1e4dd;
    padding: 20px;
    margin: 0;
}

.payment-modal input[type="radio"] {
    border-radius: 50px;
    border-color: #28303d;
    background: #f5f7f6;
    border: solid 2px #d1e4dd;
    padding: 0 0;
    margin: 0 10px 0 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.payment-modal input[type=radio]:checked:after{
    content: "";
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #28303d;
}
.payment-modal input[type=radio]:after {
    width: 10px;
    height: 10px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.n-row-radio label {
    display: flex;
    align-items: center;
}

.n-modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}

.n-modal-header h4 {
    margin: 0;
}

.n-modal-body {
    padding: 25px 50px;
}

.n-modal-dismiss {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    background-color: #28303d;
    border: none;
    outline: none !important;
    line-height: 18px;
    font-size: 18px;
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 0;
    margin: auto;
    transition: all 0.5s ease;
    color: #fff;
    cursor: pointer;
}

.n-modal-dismiss:hover {
    background-color: #1e1f20;
    color: #fff;
}

.payment-modal p,
.payment-modal-res p {
    padding: 0 0 0 9px;
    background-color: #eee;
}

.payment-card {
    background: #fff;
    box-shadow: 0 0 15px rgba(21, 25, 67, .20);
    padding: 30px;
    border-radius: 10px;
    margin-top: 55px;
}

#payment-history {
    padding: 20px 0;
}

/****Payment Modal****/
.verification-pending {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 80%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 15px;
}

.verification-inner {
    max-width: 550px;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(21, 25, 67, .20);
    padding: 20px;
    position: relative;
}

.verification-pending .n-form-group.n-row {
    align-items: flex-end;
}

.verification-pending button {
    border: none;
    margin-right: 5px;
    transition: all 0.5s ease;
    outline: none !important;
    padding: 17px;
    cursor: pointer;
}

.verification-pending button:hover {
    background-color: #000;
    color: #fff;
}

input#email_otp.error,
input#phone_otp.error {
    background-color: #ffc8c8;
    border: 1px solid #eee;
}

input#email_otp.success,
input#phone_otp.success {
    background-color: #a3ffa7;
    border: 1px solid #eee;
}

/* p.error {
    position: absolute;
    bottom: -20px;
    left: 20px;
    font-size: 14px;
    color: #ff0000;
} */
.login-outer .n-form-group {
    gap: 10px;
}

.login-outer .n-form-group .n-col-6 {
    flex: calc(50% - 10px);
    max-width: 50%;
    padding: 0;
}

.login-outer .n-form-group {
    margin: 0 0 10px;
}

.verification-wrapper .n-form-group.n-row {
    margin: 0;
    padding: 12px 0 0;
}

.verification-wrapper .n-form-group.n-row:not(:last-child) {
    padding: 0 0 20px;
    border-bottom: solid 1px #ddd;
    margin: 0;
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

.payment-card table {
    font-size: 14px;
}

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
}
.nozha-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0 0 0 / 80%);
    height: 100vh;
    width: 100%;
    z-index: 999999;
}
.loader-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.spinner>div {
    background-color: #00d1b2;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
    animation: stretchDelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.payment-modal-res .modal-inner {
    overflow: auto;
    height: 100vh;
}
.payment-modal-res .modal-inner::-webkit-scrollbar {
    width: 0;
}
.payment-modal-res {
    overflow: hidden;
    padding: 0 20px;
}
.payment-modal-res .modal-inner {
    margin-top: 10px !important;
}
@-webkit-keyframes stretchDelay {

    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
    }
}

@keyframes stretchDelay {

    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}
/* 19-07-2023 */
.portal-header-inner ul {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.portal-header-inner ul li a {
    background: #237eb8;
    padding: 10px 20px;
    border-radius: 2px;
    color: #fff;
    transition: all 0.35s ease-in-out;
    font-size: 14px;
}
.portal-header-inner ul li.active a,
.portal-header-inner ul li a:hover {
    background: #9e2730;
    padding: 10px 20px;
    font-size: 14px;
    background: -webkit-linear-gradient(#0c1750,#bd0362);
}
.portal-header-inner ul li.active a {
    font-weight: bold;
    font-size: 16px;
}
@media screen and (max-width: 991px) {

    form.nozha-portal-login-form,
    form.nozha-portal-form {
        padding: 40px 20px;
    }

    .login-outer .login-right {
        padding: 40px 30px;
    }

    form.nozha-portal-login-form .n-form-group.n-row,
    form.nozha-portal-form .n-form-group.n-row {
        margin: 0 0 10px;
    }

    .listing-inner .child-item {
        flex: 100%;
        max-width: 100%;
        padding: 0;
    }
}
.payment-modal p, .payment-modal-res p {
    padding: 0 0 0 9px;
    background-color: #eee;
    overflow: hidden;
    word-break: break-all;
    font-size: 18px;
    padding: 10px;
    margin: 0 0 10px;
}
@media screen and (max-width: 767px) {
        
    .login-outer .login-left img {
        max-width: 100%;
        height: 250px;
    }

    .login-outer>div {
        width: 100%;
    }

    .login-outer .n-col-12 {
        padding: 0 0;
    }
    form.payment-details .n-form-group.n-row {
        margin: 0;
    }
    .n-modal-body {
        padding: 25px 10px;
    }
}

@media screen and (max-width: 575px) {
    .verification-pending .n-form-group.n-row .n-col-6 {
        flex: 100%;
        max-width: 100%;
        margin: 0 0 10px;
    }
    form.nozha-profile-form .n-col-6 {
        max-width: 100%;
        margin: 0 0 10px;
        flex: 100%;
    }
    form.nozha-profile-form .n-form-group.n-row {
    margin: 0;
}
    .verification-pending .n-form-group.n-row .n-col-3 {
        max-width: 50%;
        flex: 50%;
        padding: 0 17px;
    }

    .verification-pending .n-form-group.n-row {
        align-items: flex-end;
        margin: 0 0 20px;
    }

    .verification-pending .n-form-group.n-row .n-col-3 button {
        width: 100%;
        margin: 0;
        padding: 7px 16px 10px;
    }

    .dashboard-card {
        padding: 30px 15px;
    }

    .listing-inner .child-wrapper {
        padding: 30px 15px;
    }

    .listing-inner .child-wrapper h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .listing-inner .child-wrapper h3 {
        font-size: 12px !important;
        padding: 8px 0px;
    }

    .dashboard-card>h3 {
        font-size: 18px;
    }

    .dashboard-card h1 {
        margin: 0 0 20px;
    }

    .payment-card h1 {
        font-size: 25px;
        padding: 5px 0;
    }
}

@media screen and (max-width: 480px) {
    .login-outer .n-form-group .n-col-6 {
        flex: 100%;
        max-width: 100%;
        padding: 0;
    }
}

.change-email,
.change-phone{
    display: none;
}
.dataTables_wrapper .dataTables_length select {
    padding: 0 24px 0 8px !important;
}
h3.disable-mode {
    position: absolute;
    top: -10px;
    right: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}
h3.disable-mode img {
    width: 20px !important;
    height: 20px !important;
}
h3.disable-mode:hover {
    scale: 1.2;
}
a.profile-btn {
    padding: 5px !important;
    transition: all 0.5s ease;
}
a.nozha_logout {
    font-size: 20px;
    transition: all 0.5s ease;
}
.profile-details {
    padding: 20px 0;
}
section.portal-dashboard input[type=submit]:hover{
    transition: all 0.5s ease;
}
section.portal-dashboard input[type=submit]:hover {
    transition: all 0.5s ease;
    background-color: #000000a8;
    color: #fff;
}
a.forgot-password {
    font-size: 15px;
    text-align: center;
    display: inline-block;
    margin: auto;
    width: 100%;
}

.forgot-password-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999999;
    overflow: hidden;
    display: none;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    padding: 30px 15px;
    background-color: rgb(0, 0, 0, 0.8);
    overflow-y:auto;
}
.forgot-password-inner {
    position: relative;
    max-width: 900px;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out;
    margin: auto;
}
.forgot-password-wrap {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    outline: 0;
}
.mapContainer {
    height: 500px;
    display: flex;
}
#studentMap {
    flex-basis: 0;
    flex-grow: 4;
    height: 100%;
}
#studentConsent {
    font-size: 14px;
    color: #9f222c;
    font-weight: bold;
}