.qr-code {
    text-align: center;
    font-family: var(--font-family);
    font-weight: bold;
}
#tracking-id {
    background: #d2d2d2;
    width: 100%;
    display: flex;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    height: 35px;
    line-height: 35px;
}    



/* Payment Styles */
.payment input[type=radio] + label {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
    height: 56px;
}
.payment input[type=radio] + label img {
    /* max-height: 28px; */
    max-width: 90px;
    width: auto;
}
@media (max-width: 800px){
    .field.payment {
        flex-wrap: wrap;
    }
}
@media (max-width: 767px){
    .payment_fields {
        flex-wrap: nowrap!important;
        flex-direction: column!important;
    }
    .payment_fields .field {
        width: 100%!important;
    }
}













































































































































































































































































































































































































































































































































































































/* ============================================================================================================ */





/* Student Information */
#admission-form #student-info {
    flex-direction: row;
    /* flex-wrap: nowrap; */
    background: none;
    padding: 0;
    align-items: stretch;
}



#admission-form .student-name input:not([type="radio"]):not([type="checkbox"]),
#admission-form .student-name select,
#admission-form input[name="student_bris_nid_no"],
#admission-form #parent-info input:not([type="radio"]):not([type="checkbox"]),
#admission-form #parent-info select,
#admission-form #other-guardian .inner-section.has_other_guardian input:not([type="radio"]):not([type="checkbox"]),
#admission-form #other-guardian .inner-section.has_other_guardian select,
#payment-section .field input:not([type="radio"]):not([type="checkbox"]),
#payment-section .field select,
#contact-section .field input:not([type="radio"]):not([type="checkbox"]),
#contact-section .field select {
    min-width: 200px;
}


#payment-section .admission-fee-amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed var(--accent);
    padding: 5px 10px;
    background-color: #fff4d2;
    border-radius: 4px;
}
#payment-section .admission-fee-amount h3 {
    text-shadow: 0 0 0.5px #00000066;
    font-size: 13px;
}


#admission-form #other-guardian .fields-group.has_other_guardian input:not([type="radio"]):not([type="checkbox"]) {}


#admission-form .applicant-image-section {
    flex-direction: column;
    justify-content: flex-start;
    flex: unset;
    position: relative;
}

#admission-form .applicant-image {
    flex: 0 1 auto;
}

#admission-form .applicant-image.applicant-image-sq {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

#admission-form #student-info .fields-line-2 {
    flex-wrap: wrap;
}

#admission-form #student-info .fields-line-2 input:not([type="radio"]):not([type="checkbox"]):not([name="student_bris_nid_no"]),
#admission-form #student-info .fields-line-2 select,
#admission-form .address-section div .field input:not([type="radio"]):not([type="checkbox"]):not([name$="_post_office_code"]),
#admission-form .address-section div .field select {
    min-width: 120px;
}

#admission-form .address-section div .field input[name$="_post_office_code"] {
    min-width: 60px;
    max-width: 60px;
}



#admission-form section.admission-basic {
    display: flex;
    gap: 30px;
}
#admission-form .applicant-image {
    gap: 12px;
    display: flex;
    flex-direction: column;
    /* border: 1px solid transparent; */
    border-radius: 6px;
}
#admission-form .admission-basic-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}




#admission-form .image-size-instruction {
    font-size: 10px;
}

#admission-form .admission-parent-info .field,
#admission-form .other_guardian .field {
    min-width: 250px;
}
#admission-form .admission-basic-info .field {
    min-width: 120px;
}

#admission-form .other_guardian {
    max-height: 0;
    opacity: 0;
    transition: 0.2s;
    margin-top: 0;
}
#admission-form .other_guardian.visible {
    max-height: 260px;
    opacity: 1;
    margin-top: 20px;
}

#admission-form .applicant-image {
    gap: 12px;
    display: flex;
    flex-direction: column;
}



#admission-form .applicant_image_preview {
    display: block;
    width: 100%;
    height: max-content;
    line-height: 0;
    outline: 1px solid var(--accent);
    border-radius: 6px;
    max-width: 150px;
    min-width: 150px;
    overflow: hidden;
    /* box-shadow: 0 0 0 1px var(--accent); */
}

#admission-form .applicant-image-ppi.required-field .required-style {
    outline: 1px dashed #ff0000;
    border: 0 !important;
}

#admission-form .applicant_image_preview>img {
    display: block;
    width: 100%;
    height: auto !important;
}



#admission-form .applicant-image img:not(.cropper-container img) {
    height: auto;
    width: 100%;
}

#admission-form .cropper-container .cropper-canvas,
#admission-form .cropper-container .cropper-canvas img {
    transition: 0.2s;
}

#admission-form .cropper-face {
    background-color: #ffffff00;
}

#admission-form .cropper-view-box {
    outline: 0;
    border: 1px dashed var(--accent);
    border-left: 0;
    border-right: 0;
}

#admission-form .applicant-profile-picture {
    display: inline-flex;
    flex: 1;
    align-items: center;
    padding: 0 0;
    border: 1px solid var(--Accent);
    background: #f2f7ff;
    border-radius: 50%;
    width: 44px;
    overflow: hidden;
}

#admission-form .cropper-modal {
    background-color: #fff;
}






#admission-form .student-fields {
    flex-direction: column;
}

#admission-form .student-fields>div {
    flex: unset;
}

#admission-form .student-admission-class {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#other-guardian .header-with-confirmation {
    justify-content: space-between;
}

.has-other-guardian-confirmation {
    align-items: center;
}

.has-other-guardian-confirmation .fields-group {
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.has-other-guardian-confirmation .fields-group label {
    margin: 0;
}

[data-input-name="has_other_guardian"]>label {
    width: auto;
}


.section-other-guardian-relation {
    /* margin-left: auto; */
    width: auto;
    flex: 0 1;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.other-guardian .field label[for="other_guardian_relation"] {
    margin-bottom: 0;
    display: inline-block;
    width: auto;
}

.other-guardian .field label[for="other_guardian_relation"]::after {
    left: -15px;
    padding: 0;
}


.section-other-guardian-relation .field select {
    /* min-width: 100px; */
    width: auto;
}

.section-other-guardian-relation .field input {
    /* min-width: 180px; */
    width: auto;
}




/* Address */
#admission-form .field-post-office {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-direction: column;
}

#admission-form .field-post-office .field-labels,
#admission-form .field-post-office .field-inputs {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

#admission-form .field-post-office .field-labels {
    gap: 5px;
    line-height: 1;
    max-height: 14px;
}

#admission-form .field-post-office .field-labels label {
    margin: 0;
    display: inline-flex;
    gap: 5px;
    align-items: inherit;
    width: auto;
}

#admission-form .field-post-office .field-inputs {}

#admission-form .field-post-office input[name$="_post_office"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#admission-form .field-post-office input[name$="_post_office_code"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;

}

#admission-form .field-post-office .field:has(input[name$="_post_office"]) {
    flex: 2;
}

#admission-form .field-post-office .field:has(input[name$="_post_office_code"]) {
    margin-left: -1px;
    flex: 0 1 auto;
}


/* Permanent Address */


/* Payment Section */
#payment-section .inner-section {
    /* gap: 40px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    align-items: flex-end; */
    /* flex-wrap: wrap; */
}

#payment-section .fields-group.transaction_info {
    flex: 1 1 auto;
}

#payment-section .payment-method-images .field {
    display: inline-flex;
    flex: 0 1 auto;
}

#payment-section .payment-method-images label {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10 10px 10 36px;
    gap: 0;
    width: max-content;
}


#payment-section .payment-method-images img {
    height: 24px;
    width: auto;
}

#payment-section .payment-method-images.fields-group {
    gap: 8px;
    flex: 1 1 auto;
}


#payment-section .payment-method-images input[type=radio]:not(:checked)+label,
#payment-section .payment-method-images label:has(input[type=radio]:not(:checked)) {
    border-color: var(--accent);

}

#payment-section .payment-method-images input[type=radio]:not(:checked)+label .payment-method-logo,
#payment-section .payment-method-images label:has(input[type=radio]:not(:checked)) .payment-method-logo,
#payment-section .payment-method-images input[type=radio]:not(:checked)+label .payment-method-title,
#payment-section .payment-method-images label:has(input[type=radio]:not(:checked)) .payment-method-title  {
    filter: grayscale(100%);
    opacity: 0.6;
}


/* Custom Color (Payment Methods) */
/* Other Payment Methods */
#payment-section .admission-payment-option a:hover,
#payment-section input[type="radio"]:checked+label,
#payment-section label:has(input[type="radio"]:checked) {
    border-color: var(--secondary);
    color: var(--secondary);
    background-color: #e3e3ff;
}

#payment-section .admission-payment-option a i {
    color: var(--secondary);
}

#payment-section input[type="radio"]:checked+label::before,
#payment-section label:has(input[type="radio"]:checked)::before {
    border-color: var(--secondary);
}

#payment-section input[type="radio"]:checked+label::after,
#payment-section label:has(input[type="radio"]:checked)::after {
    background-color: var(--secondary);
}

/* BKash */
#payment-section .admission-payment-option.bkash a:hover,
#payment-section input[value="bkash"]:checked+label,
#payment-section label:has(input[value="bkash"]:checked) {
    border-color: #e20c6d;
    color: #e20c6d;
    background-color: #e20c6d1a;
}

#payment-section .admission-payment-option.bkash a i {
    color: #e20c6d;
}

#payment-section input[value="bkash"]:checked+label::before,
#payment-section label:has(input[value="bkash"]:checked)::before {
    border-color: #e20c6d;
}

#payment-section input[value="bkash"]:checked+label::after,
#payment-section label:has(input[value="bkash"]:checked)::after {
    background-color: #e20c6d;
    content: '';
}


/* Nagad */
#payment-section .admission-payment-option.nagad a:hover,
#payment-section input[value="nagad"]:checked+label,
#payment-section label:has(input[value="nagad"]:checked) {
    border-color: #f7941d;
    color: #f7941d;
    background-color: #f7941d1a;
}

#payment-section .admission-payment-option.nagad a i {
    color: #f7941d;
}

#payment-section input[value="nagad"]:checked+label::before,
#payment-section label:has(input[value="nagad"]:checked)::before {
    border-color: #f7941d;
}

#payment-section input[value="nagad"]:checked+label::after,
#payment-section label:has(input[value="nagad"]:checked)::after {
    background-color: #ed1c24;
}


/* Rocket */
#payment-section .admission-payment-option.rocket a:hover,
#payment-section input[value="rocket"]:checked+label,
#payment-section label:has(input[value="rocket"]:checked) {
    border-color: #8a288d;
    color: #8a288d;
    background-color: #8a288d1a;
}

#payment-section .admission-payment-option.rocket a i {
    color: #8a288d;
}

#payment-section input[value="rocket"]:checked+label::before,
#payment-section label:has(input[value="rocket"]:checked)::before {
    border-color: #8a288d;
}

#payment-section input[value="rocket"]:checked+label::after,
#payment-section label:has(input[value="rocket"]:checked)::after {
    background-color: #8a288d;
}



/* Upay */
#payment-section .admission-payment-option.upay a:hover,
#payment-section input[value="upay"]:checked+label,
#payment-section label:has(input[value="upay"]:checked) {
    border-color: #ffd602;
    color: #0154a6;
    background-color: #ffd6021a;
}

#payment-section .admission-payment-option.upay a i {
    color: #0154a6;
}

#payment-section input[value="upay"]:checked+label::before,
#payment-section label:has(input[value="upay"]:checked)::before {
    border-color: #0154a6;
}

#payment-section input[value="upay"]:checked+label::after,
#payment-section label:has(input[value="upay"]:checked)::after {
    background-color: #0154a6;
}


#admission-form .admission-payment-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 30px;
    align-items: center;
}

#admission-form .admission-payment-option {
    display: inline-flex;
}

#admission-form .admission-payment-option a {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff9e7;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid transparent !important;
    border-radius: 3px;
    gap: 3px;
    color: var(--text);
    cursor: copy;
    transition: 0.3s;
    box-shadow: 1px 1px 2px 1px #D8D8D8, -1px -1px 2px 1px #ffffff;
}
#admission-form .admission-payment-option a * {
    pointer-events: none;
}

#admission-form .admission-payment-option-label {
    display: inline-flex;
}
#admission-form .admission-payment-option img {
    height: 15px;
    width: auto;
}
#admission-form .admission-payment-option a .copy-icon {
    padding-right: 5px;
}


#admission-form .admission-payment-option .tooltiptext {
    min-width: auto;
    font-size: 10px;
    line-height: 1.2;
    font-weight: normal;
    width: auto;
    max-width: 150px;
    min-width: 90px;
}




.application-submit-button {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}


#contact-section>div {
    flex: 1 1 auto;
}




@media (max-width: 580px) {
    form #student-info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}









/* Admission Query */
.admission-application-query {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.admission-application-query input {
    height: 38px;
    color: #000;
    transition: 0.3s;
}
.admission-application-query input:hover {
    border-color: var(--accent);
}
.admission-application-query input:focus {
    border-color: var(--primary);
    box-shadow: 0px 0px 0px 3px #01683736;   
}
.application-tracking-form .admission-application-query input:hover {
    border-color: #0360f4;
}
.application-tracking-form .admission-application-query input:hover {
    border-color: #0360f4;
    box-shadow: 0px 0px 0px 3px #0360f455;
    
}
.application-tracking-form .admission-application-query input:hover {
    border-color: #0360f4;
}
.application-tracking-form .admission-application-query input:hover {
    border-color: #0360f4;
    box-shadow: 0px 0px 0px 3px #0360f455;
    
}
.application-tracking-form .admission-application-query button:hover,
.application-tracking-form .admission-application-query button:focus,
.application-tracking-form .admission-application-query button:focus-within {
    background-color: #0360f4;
    box-shadow: 0px 0px 0px 3px #0360f455;
}

.admission-application-query input::-webkit-outer-spin-button,
.admission-application-query input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admission-application-query input[type=number] {
  -moz-appearance: textfield;
}

.view-application-form {
    flex-direction: row;
}
.view-application-form {
    flex: 1
}
.view-application-form > input[type=number] {
    min-width: 80px;
    max-width: 80px;
    width: 80px;
    text-align: center;
}
.view-application-form input[type="number"],
.view-application-form button {
    height: 32px;
}
.view-application-form button {
    font-size: 12px;
}