@media print {
    /******** ID CARD ********/
    .card-top{       
        background-color: #f1f1f1 !important;
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important; 
    }    
    .card-bottom{       
        background-color: #f1f1f1 !important;       
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important; 
    }
    
    
    /******** ADMIT CARD ********/
    .admit-card-block{
        border: 3px dashed lightgray;
        border-radius: 10px;
        margin: 10px auto !important;
        float: none !important;
        display: block;
        overflow: hidden;            /* contain the floated inner sections so the next card doesn't overlap */
        page-break-inside: avoid;
    }
    .admit-card-block::after{
        content: "";
        display: block;
        clear: both;
    }
    .admit-card-top{
        background-color: #f1f1f1 !important;    
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important; 
    }
    
    .admit-card-bottom{        
        background-color: #f1f1f1 !important;       
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important; 
    }
    
}

@media all { 
    .card-block{
        width: 400px;
        height: 225px;
        border: 1px dashed lightgray;
        border-radius: 10px;
        margin: 10px 20px;
        float: left;
    }

    .card-top{
        height: 65px;
        width: 100%;
        background: #f1f1f1;
        border-radius: 10px 10px 0px 0px;
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important; 
    }
    .card-logo{
        width: 80px;
        float: left;
        text-align: center;
    }
    .card-logo img{
        padding: 3px 0px 3px 10px;        
        text-align: center;
        max-height: 65px;
        max-width: 65px;
    }
    .card-school{       
        float: left;   
        width: 318px;
    }
    .card-school h2{
        font-size: 20px;
        padding: 0px 5px;
        text-align: center;
        vertical-align: middle;
        margin: 5px 0px 0px 0px;
    }
    .card-school p{
        text-align: center;
        font-size: 12px;
        padding: 0px;
        margin: 0px;
        line-height: 14px;
    }
    .std-id{
        width: 100%;
        text-align: center;        
    }
    .std-id h3{
        padding: 0;
        margin: 0px;
    }
    .std-id span{ 
        font-size: 14px;
        font-weight: bold;
        background: lightblue;
        padding: 3px 20px;
        border-radius: 10px;
    }
    
    /* card middle */
    .card-photo{     
        width: 120px;
        float: left;
        text-align: center;
    }
    .card-photo img{
        width: 90px;
        height: 90px;
        margin: 0px 50px 20px 5px;
        text-align: center;
        border-radius: 10px;
        max-height: 110px;
        border: 1px solid #efefef;
    }
    .card-info{
        line-height: 15px;
        padding-top: 5px;
        float: left;
    }
    .card-info p{ 
        padding: 0px;
        margin: 0px;
    }
    .card-info p .card-title{
        text-align: left;
        font-size: 11px; 
        font-weight: bold;
        width: 90px;
        float: left;
    }
    .card-info p .card-value{
        text-align: left;
        font-size: 11px; 
        width: 180px;
        float: left;
    }

    /* bottom*/
    .card-bottom{
        height: 22px;
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 0px 0px 10px 10px;
        float: left;
    }
    .card-bottom p{
        text-align: center;
        font-size: 12px;
        margin: 0px;
        padding: 3px 30px;
    }
    
    
    /********************Admit card ********************************/
    .admit-card-block{
        width: 710px;
        min-height: 0;
        border: 3px dashed lightgray;
        border-radius: 10px;
        margin: 8px 10px;
        float: left;
    }
    .admit-card-top{
        height: 78px;
        width: 100%;
        background: blueviolet;
        border-radius: 10px 10px 0px 0px;
        background-size: 100% 100% !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .admit-card-logo{
        width: 110px;
        float: left;
        text-align: center;
    }
    .admit-card-logo img{
        padding: 7px 0px 4px 8px;
        text-align: center;
        height: 66px;
        width: 70px;
    }

    .admit-card-school{
        overflow: hidden;
    }
    .admit-card-school h2{
        font-size: 20px;
        padding: 0px 10px;
        text-align: center;
        vertical-align: middle;
        margin: 8px 0px 0px 0px;
        color: #000000;
    }
    .admit-card-school p{
        text-align: center;
        font-size: 12px;
        padding: 0px;
        margin: 0px;
        line-height: 15px;
        color: #000000;
    }

    .admit-card{
        width: 100%;
        text-align: center;
        margin: 4px 0px;
    }
    .admit-card span{
        margin: 3px;
        font-size: 15px;
        font-weight: bold;
        background: lightblue;
        padding: 3px 16px;
        border-radius: 10px;
    }

    /* exam name / date / time — centered under the "Student Admit Card" banner */
    .admit-card-meta{
        width: 100%;
        float: left;
        text-align: center;
        margin: 2px 0px 4px 0px;
    }
    .admit-card-meta .admit-exam{
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }
    .admit-card-datetime{
        text-align: center;
        font-size: 12px;
        color: #000000;
    }


    /* card middle — full-width layout (student row, then full-width subject table, then signatures) */
    .admit-card-main{
        width: 100%;
        float: left;
        box-sizing: border-box;
        padding: 0px 14px 6px 14px;
    }
    /* LEFT column: photo + student details */
    .admit-card-student{
        width: 320px;
        float: left;
        overflow: hidden;
    }
    .admit-card-photo{
        width: 100px;
        float: left;
        text-align: center;
    }
    .admit-card-photo img{
        width: 82px;
        padding: 0px 5px 4px 5px;
        text-align: center;
        border-radius: 8px;
        max-height: 100px;
    }
    .admit-card-info{
        overflow: hidden;
        line-height: 18px;
        padding-top: 5px;
    }
    .admit-card-info p{
        padding: 0px;
        margin: 0px;
    }
    .admit-card-info p .admit-card-title{
        text-align: left;
        font-size: 11px;
        font-weight: bold;
        width: 95px;
        float: left;
    }
    .admit-card-info p .admit-card-value{
        display: block;
        overflow: hidden;
        text-align: left;
        font-size: 11px;
    }

    /* RIGHT column: subject table */
    .admit-card-subjects{
        width: 355px;
        float: right;
    }
    .admit-exam{
        font-size: 16px;
        text-align: left;
    }
    .subject-heading{
        font-size: 13px;
        font-weight: bold;
        border-bottom: 1px solid lightgray;
        margin-bottom: 5px;
    }
    .exam-subjects{
       padding-top: 5px;
    }
    .exam-subjects ol{ padding: 0px; margin: 0px; }
    .exam-subjects ol li{ font-size: 12px; line-height: 16px; color: #333333; }

    /* subject list rendered as a full-width table (subject | date) */
    .exam-subject-table{
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
        color: #333333;
    }
    .exam-subject-table th,
    .exam-subject-table td{
        border: 1px solid #999999;
        padding: 3px 6px;
        text-align: left;
        line-height: 14px;
        vertical-align: middle;
    }
    .exam-subject-table th{
        background-color: #f1f1f1;
        color: #000000;
        font-weight: bold;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .exam-subject-table tbody tr:nth-child(even){
        background-color: #f7f7f7;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .exam-subject-table .subj-date-col{
        white-space: nowrap;
        width: 100px;
    }

    /* signature row at the bottom of the card (single, right-aligned) */
    .admit-card-signatures{
        clear: both;
        width: 100%;
        overflow: hidden;
        margin-top: 14px;
        margin-bottom: 4px;
        text-align: right;
    }
    .admit-card-signatures .sign-box{
        display: inline-block;
        width: 50%;
        text-align: center;
        font-size: 12px;
        color: #000000;
    }
    .admit-card-signatures .sign-area{
        height: 32px;
        text-align: center;
    }
    .admit-card-signatures .sign-img{
        max-height: 32px;
        max-width: 150px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .admit-card-signatures .sign-label{
        border-top: 1px solid #000000;
        padding-top: 4px;
    }

    /* bottom*/
    .admit-card-bottom{
        height: 16px;
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 0px 0px 10px 10px;
        float: left;
    }

    .admit-card-bottom p{
        text-align: center;
        font-size: 11px;
        margin: 0px;
        padding: 2px 20px;
    }
}
.card-block {
    width: 250px;
    height: 400px; /* Fixed height */
    border: 1px dashed #4b81b8;
    border-radius: 10px;
    margin: 20px auto;
    overflow: hidden; /* Hide overflow */
    font-family: Arial, sans-serif;
    position: relative; /* For absolute positioning if needed */
}

.card-top {
    width: 100%;
    background: #5088bf;
    border-radius: 10px 10px 0 0;
    text-align: center;
    padding: 5px 0; /* Reduced padding */
    color: #ffffff;
}

.card-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 3px; /* Reduced margin */
}

.card-logo img {
    max-height: 40px; /* Reduced size */
}

.card-school h2 {
    font-size: 14px; /* Reduced font size */
    margin: 3px 0; /* Reduced margin */
}

.card-school p {
    margin: 1px 0; /* Reduced margin */
    font-size: 10px; /* Reduced font size */
}

.std-id {
    background-color: #1f6dba;
    padding: 3px 0; /* Reduced padding */
    margin: 5px 0; /* Reduced margin */
}

.std-id h3 {
    margin: 0;
}

.std-id span {
    font-size: 12px; /* Reduced font size */
    color: #ffffff;
}

.card-main {
    width: 100%;
    text-align: center;
    padding: 5px 0; /* Reduced padding */
}

.card-photo {
    width: 100%;
    margin-bottom: 5px; /* Reduced margin */
}

.card-photo img {
    width: 80px; /* Reduced size */
    height: 80px;
    border-radius: 10px;
    border: 1px solid #efefef;
}

.card-info {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

.card-info p {
    margin: 2px 0; /* Reduced margin */
    font-size: 10px; /* Reduced font size */
}

.card-info .card-title {
    font-weight: bold;
    color: #0f60b0;
    display: inline-block;
    width: 70px; /* Adjusted width */
}

.card-info .card-value {
    color: #135da6;
}

.card-qr {
    width: 100%;
    text-align: center;
    margin-top: -2px; 
}

.card-qr img {
    width: 60px; /* Reduced size */
    height: 60px;
}

.card-bottom {
    width: 100%;
    background-color: #2a3f54;
    border-radius: 0 0 10px 10px;
    text-align: center;
    padding: 3px 0; /* Reduced padding */
    color: #d4d4e2;
    position: absolute;
    bottom: 0; /* Stick to the bottom */
    left: 0;
}

.card-bottom p {
    margin: 0;
    font-size: 10px; /* Reduced font size */
}

@media print {
    .card-block {
        border: 1px dashed #4b81b8;
    }
    .card-top {
        background-color: #5088bf !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    .std-id {
        background-color: #1f6dba !important;
    }
    .card-bottom {
        background-color: #2a3f54 !important;
    }
}