<style>
body{font-family:Arial,sans-serif;background-color:#f5f5f5;margin:0;padding:0;width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow-x:hidden;}
.background-container{position:relative;top:0;left:0;right:0;bottom:0;background-image:url('../debPage/bg_images/image_bg2.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;}
header{position:absolute;top:5px;background-color:#007bff;color:white;padding:0 0 10px 0;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,0.1);border-radius:10px 10px 0 0;margin-bottom:0;z-index:1;}
.nav-container{position:fixed;top:0;left:0;right:0;background:#007bff;width:100vw;display:flex;justify-content:center;align-items:center;padding:0 10px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border-radius:10px 10px 0 0;gap:5px;z-index:50;}
.container{position:relative;background:gray;top:0;left:0;margin:0;padding:0;width:100vw;min-height:100vh;border-radius:0;box-shadow:0 4px 6px rgba(0,0,0,0.1);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden;}
.calligraphic-text{font-family:"Dancing Script",cursive;font-size:20px;color:yellow;text-shadow:2px 2px 4px black;letter-spacing:2px;font-weight:bold;display:inline-block;}
.form-container{width:100%;margin-left:40px;display:flex;flex-direction:column;align-items:center;}
.hidden{display:none;}
.login-form{margin-bottom:20px;}
.required::after{content:" *";color:red;font-weight:bold;}
form{position:relative;width:99%;margin:40px auto;background:#f4f4f4;padding:15px;box-shadow:0 0 15px rgba(0,0,0,0.2);border:2px solid lightgray;border-radius:10px;box-sizing:border-box;margin-bottom:15px;}
.form-group{margin-bottom:15px;display:flex;align-items:center;}
.form-group label{width:200px;font-size:18px;margin-right:10px;text-align:right;}
.form-group input,.form-group select,.form-group option,.form-group textarea{width:calc(100% - 210px);padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;}
.form-group input[type=file]{padding:0;}
.positionxi{top:-105px;width:52.5%;}
.link-container{position:relative;text-align:center;justify-content:center;margin:5px;padding:5px;margin-left:0;top:0;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,0.2);background:#fff;color:blue;font-size:20px;text-decoration:none;align-items:center;padding:2px 4px;white-space:nowrap;text-overflow:ellipsis;z-index:20;}
.link-container a{color:blue;font-size:20px;text-decoration:none;}
.link-container a:hover{color:#FF5733;}
.title-container{position:relative;background:#f4f4f4;font-size:18px;text-align:center;width:100%;margin:0;padding:0;box-shadow:0 0 15px rgba(0,0,0,0.2);border:2px solid lightgray;border-radius:10px;margin-bottom:0;}
.title-container a{color:blue;font-size:20px;text-decoration:none;}
.title-container a:hover{color:#FF5733;}
.italic-text{font-style:italic;}
.back-button{display:inline-block;padding:10px 15px;background:#6c757d;color:white;border-radius:5px;text-decoration:none;font-size:16px;text-align:center;width:150px;margin-top:20px;}
.back-button:hover{background:#5a6268;}
.icone_bg_white{vertical-align:middle;width:20px;height:20px;display:inline-block;}
h2{font-size:22px;color:blue;text-align:center;margin:10px 0 20px;padding:15px;text-decoration:none;}
h3{background:#fff;font-size:18px;color:blue;text-align:center;margin:10px auto;padding:10px;width:fit-content;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
ul{list-style:none;padding:0;text-align:justify;font-size:20px;}
li{padding:5px 0;border-bottom:1px solid #ddd;font-size:20px;}
footer{text-align:center;padding:0;left:0;background:#007bff;color:white;position:fixed;bottom:0;width:100vw;border-radius:0 0 10px 10px;z-index:100;}
footer a{color:#f8f9fa;text-decoration:none;margin:0 10px;}
footer a:hover{text-decoration:underline;}
button{width:100%;padding:10px;font-size:18px;background:#28a745;color:white;border:none;border-radius:4px;cursor:pointer;}
button:hover{background:#218838;}
input,select,button{display:block;margin-bottom:10px;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px;}
.user-info{position:fixed;top:10px;right:10px;padding:10px;background:#f0f0f0;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.1);font-size:16px;z-index:1000;}
.preview-container{position:relative;padding:3px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,0.2);max-width:320px;margin-top:20px;border:2px solid red;background:#fff;text-align:center;}
.preview-container img{max-width:100%;height:auto;}
.show-password-checkbox{margin-left:200px;margin-top:-15px;text-align:left;max-width:300px;display:flex;gap:5px;}
.success{color:green;font-weight:bold;}
.error{color:red;font-weight:bold;}
.success-messages{position:absolute;left:10px;top:70px;background:#dff0d8;color:#3c763d;padding:5px;margin:20px 0;border-radius:5px;font-family:Arial;font-size:16px;z-index:101;}
.error-message{position:absolute;left:10px;top:180px;background:#f8d7da;color:#721c24;padding:10px;margin:10px 0;border-radius:5px;font-family:Arial;font-size:16px;z-index:100;}
.error-message strong{font-weight:bold;}
.important{font-weight:bold;color:#d9534f;}
.custom-select{font-size:18px;padding:5px;border:1px solid #ccc;border-radius:4px;}
.fixed-header{position:sticky;top:0;background:white;z-index:10;}
.fixed-header th{background:white;position:sticky;top:0;z-index:10;}
.time-label{display:block;margin-bottom:5px;font-size:18px;color:#555;}
.time-display{font-size:18px;font-weight:bold;color:#333;}
.form-group1{margin-bottom:5px;display:flex;align-items:center;}
.form-group1 label{width:100px;font-weight:bold;font-size:18px;margin-right:10px;}
.form-group1 input,.form-group1 select,.form-group1 textarea{width:calc(100% - 110px);padding:5px;font-weight:bold;font-size:18px;text-align:left;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;}
.form-group1 input[type=file]{padding:0;}
.fafacheck-fv-tb-icon{color:white;background:green;padding:3px;border-radius:5px;}
.fa-circle{color:red;}
.fa-diamond{color:orange;font-size:28px;background:white;}
.fa-exclamation-triangle{color:yellow;}
.fa-check-square{color:green;}
.icon-style{font-size:24px;}
.red{color:red;} .green{color:green;} .yellow{color:yellow;} .blue{color:blue;} .orange{color:orange;}
.tooltip{position:relative;display:inline-block;}
.tooltiptext{visibility:hidden;opacity:0;transition:opacity .25s;position:absolute;left:60px;top:5px;background:#333;color:#fff;padding:6px 10px;border-radius:6px;font-size:16px;font-weight:bold;white-space:nowrap;z-index:99999;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1;}
table{margin:20px auto;border-collapse:collapse;width:90%;box-shadow:0 0 15px rgba(0,0,0,0.2);border-radius:10px;overflow:hidden;background:#f5f5f5;font-size:14px;}
table th,table td{border:1px solid #ccc;padding:10px;text-align:center;}
table th{background:white;font-weight:bold;}
table tr:nth-child(even){background:white;}
.option-special{background:yellow;color:red;}
.input-filled{background:#e6f7ff;}
@media(max-width:768px){.container,.background-container,.link-container,.nav-container,footer{width:1450px;padding:10px;} .form-container{margin-left:0;} h2{font-size:18px;padding:10px;} h3{font-size:16px;margin-bottom:5px;} ul{font-size:18px;} li{font-size:16px;} form{width:100%;margin:20px auto;padding:10px;} .form-group{flex-direction:column;align-items:flex-start;} .form-group label{width:100%;margin-right:0;text-align:left;} .form-group input,.form-group textarea{width:100%;} .preview-container{max-width:100%;} .show-password-checkbox{margin-left:0;margin-top:10px;} .success-messages,.error-message{left:10px;top:10px;font-size:14px;}}
@media(max-width:480px){.container,.background-container,.link-container,.nav-container{width:1450px;padding:10px;} h2{font-size:16px;padding:5px;} h3{font-size:14px;} ul{font-size:14px;} li{font-size:14px;} form{padding:5px;} .form-group label{font-size:14px;} .form-group input,.form-group textarea{font-size:14px;} .link-container{font-size:14px;} .success-messages,.error-message{font-size:12px;}}
</style>
