body{
    background: #0086ff;

    font-family: "League Spartan", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;

}
.brand{text-align: center;padding:30px}
.brand img{max-width:300px;}
.verification{background: #f7f7f7;max-width: 100%;width:750px;margin:0 auto;border-radius: 20px;}
.verification h1{text-align: center;font-size: 30px;}
.verification p{font-size:22px;padding:15px 15px;text-align: center;display: block;max-width: 500px; margin: 0 auto;}
.logo_section{text-align: center;margin:5px 0;}
.logo{max-width: 50%;}
.logo_full{max-width: 100%;}
.whitebg{background: #f7f7f7;border-radius:10px;padding:35px;}
.profile_picture{padding:20px;margin:5px 0;}
.profile_picture img{border:3px solid #80b8eb;}
.profile_picture span {
    font-weight: 400;
    display: block;
    text-align: center;
    font-size: 20px;
}
.profile_picture .small{font-size:16px; color: #0086ff;font-weight: 400;}
.profile-img {
    width: auto; /* Keeps the natural width */
    height: auto; /* Keeps the natural height */
    max-width: 150px; /* Adjust as needed */
    max-height: 150px; /* Ensures a reasonable size */
    object-fit: cover; /* Crops the image to fit the circle */
    aspect-ratio: 1 / 1; /* Ensures a square aspect ratio */
}
.mt-100{margin-top:100px;}
.logout{text-align: center;}
.logout a{border-radius: 40px;padding:5px 25px;margin:5px 0;}
.main{padding:30px;}
.main h1{text-align: center;}
.form-block {
    display: block;
    border: 1px solid #0086ff;
    background-color: #f8fcff;
    padding: 35px;
    border-radius: 10px;
    margin: 20px;
    text-align: center;
}
.barcode{max-width: 50px;}
.form-block label{display: block;margin-top: 20px;font-size:20px;font-weight: 400;}
.form-block .submit{margin-top:20px;}
.loginblock-left{border-radius: 10px 0 0 10px;background: #f7f7f7;padding:50px}
.loginblock-right{border-radius: 0 10px 10px 0;background: url('../images/login-page.webp');background-size: 100%;min-height: 650px;background-position: center;}
.loginsection{margin:20px;padding-top:20px;}
.red-text{color:rgb(223, 9, 9);text-decoration: none;font-weight: 400;}
.loginsection .submit{padding:5px 20px;}

.toggler{margin-bottom:20px;}
.toggler a{width:50%;background:#FFF;display: inline-block;padding:10px;text-align: center;color: #000;font-size: 20px;}
.toggler a:hover{text-decoration: none;font-weight: 400;}
.toggler a.active{background:#0086ff;color: #FFF;}

.otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.otp-input {
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 10px;
}
.submit-otp{text-align: center;padding: 10px 0 30px 0;}
.submit-otp a{min-width: 150px;text-align: center;border-radius: 5px;}

.pdf-container {
    position: relative;
    width: 100%;
    min-height: 100px;
    
}



.toolbar button {
    padding: 5px 10px;
    font-size: 18px;
    margin-right: 5px;
    cursor: pointer;
}

#certificate {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    
    border: none;
    transform-origin: center;
}