<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:#3049A1;color:#fff;padding:0 0 10px 0;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:10px 10px 0 0;z-index:1}
.nav-container{position:fixed;background-color:#007bff;top:0;left:0;right:0;width:100vw;display:flex;justify-content:center;align-items:center;padding:0 10px;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:10px 10px 0 0;gap:5px;z-index:50}
.container{position:relative;background-color: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,.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 15px;background:#f4f4f4;padding:15px;box-shadow:0 0 15px rgba(0,0,0,.2);border:2px solid lightgray;border-radius:10px;box-sizing:border-box}
.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; word-wrap: break-word;  overflow-wrap: break-word;  white-space: normal; margin:5px 0 5px 0;padding:2px 4px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,.2);background:#fff;color:blue;font-size:20px;text-decoration:none;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; word-wrap: break-word;  overflow-wrap: break-word;  white-space: normal;width:100%;margin:0;padding:0;box-shadow:0 0 15px rgba(0,0,0,.2);box-sizing:border-box;border:2px solid lightgray;border-radius:10px}
.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:#fff;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,.1)}
ul{list-style-type: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-color:#3049A1;color:#fff;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:#fff;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,.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,.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,sans-serif;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,sans-serif;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:#fff;z-index:10}
.fixed-header th{background:#fff;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;text-align:left}
.form-group1 input,.form-group1 select,.form-group1 option,.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:#fff;background:green;padding:3px;border-radius:5px}
.fa-circle{color:red}
.fa-diamond{color:orange;font-size:28px;background:#fff}
.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}
section{padding:20px;margin:20px 0;background:#f5f5f5;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1);line-height:1.6;overflow-wrap:break-word}
section h1,section h2,section h3{margin-top:0;color:#333}
section p{margin-bottom:15px}
table{margin:20px auto;border-collapse:collapse;width:90%;box-shadow:0 0 15px rgba(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:#fff;font-weight:bold}
table tr:nth-child(even){background:#fff}
.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}section{padding:15px;margin:15px 0}.form-container{width:100%;margin-left:0}h2{font-size:18px;margin-bottom:20px}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;margin-bottom:20px}h3{font-size:14px;margin-bottom:5px}ul{font-size:16px}form{padding:5px}.form-group label{font-size:14px}.form-group input,.form-group textarea{font-size:14px}.link-container{font-size:14px}ul{font-size:14px}li{font-size:14px}.success-messages,.error-message{font-size:12px}}

</style>
