<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;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,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,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-color:#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;}
.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;display:flex;align-items:center;justify-content:center;text-align:center;margin:5px 0;padding:2px 4px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,0.2);background-color:#fff;color:blue;font-size:20px;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-color:#f4f4f4;text-decoration:none;font-size:18px;text-align:center;width:100%;margin:0;padding:0;box-shadow:0 0 15px rgba(0,0,0,0.2);box-sizing:border-box;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-color:#6c757d;color:white;border-radius:5px;text-decoration:none;font-size:16px;text-align:center;width:150px;margin-top:20px;}
.back-button:hover{background-color:#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 0;padding:15px;text-decoration:none;}
h3{background-color:#fff;font-size:18px;color:blue;text-align:center;margin:10px auto 5px auto;padding:10px;text-decoration:none;width:fit-content;border-radius:5px;box-shadow:0 2px 5px rgba(0,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:#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-color:#28a745;color:white;border:none;border-radius:4px;cursor:pointer;}
button:hover{background-color:#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-color:#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-color:#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-color:#dff0d8;color:#3c763d;border:0;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-color:#f8d7da;color:#721c24;border:0;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-color:white;z-index:10;}
.fixed-header th{background-color: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;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:white;background-color:green;padding:3px;border-radius:5px;}
.fa-circle{color:red;}
.fa-diamond{color:orange;font-size:28px;background-color: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;}
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-color:#f5f5f5;font-size:14px;}
table th,table td{border:1px solid #ccc;padding:10px;text-align:center;}
table th{background-color:white;font-weight:bold;}
table tr:nth-child(even){background-color:white;}
.option-special{background-color:yellow;color:red;}
.input-filled{background-color:#e6f7ff;}

.tooltip{position:relative;display:inline-block;}
.tooltiptext{visibility:hidden;opacity:0;transition:opacity .25s ease-in-out;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;}

@media(max-width:768px){.container,.background-container,.link-container,.nav-container{width:1450px;padding:10px;}.form-container{margin-left:0;}h2{font-size:18px;padding:10px;}h3{font-size:16px;padding:10px;margin-bottom:5px;}ul{font-size:16px;}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%;}input{font-size:16px;}.link-container{font-size:16px;margin:10px;padding:10px;}.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;}footer{width:1450px;padding:0;}}
@media(max-width:480px){.container,.background-container,.link-container,.nav-container{width:1450px;padding:5px 10px;}h2{font-size:16px;padding:5px;}h3{font-size:14px;padding:10px;}ul,li{font-size:14px;}form{padding:5px;}.form-group label,.form-group input,.form-group textarea{font-size:14px;}input{font-size:16px;}.link-container{font-size:14px;}.success-messages,.error-message{font-size:12px;}}
</style>
