body {font-family: Arial, sans-serif; background-color: #f4f4f4; padding-top: 60px; color:#16044a;}
header {background-color: #0077b6; color: white; padding: 10px 0; text-align: center; }
header a {color: white; text-decoration: none;padding: 10px;font-weight: bold;float: right;margin-right: 20px;}
section {margin-top: 40px;padding: 20px;background-color: white;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.sectionwrapper{position:relative;overflow: hidden;}
.h2title{position: absolute;left: 0;top: 0;width:100%;background-color: #e1e1e1;padding:10px;font-size: large;font-weight:bold;}
.clock{margin-top:40px;font-weight:bold;}
.accordion {margin-bottom: 20px;}
.ui-accordion-header {background-color: #0077b6;color: white;padding: 10px;cursor: pointer;}
.ui-accordion-header:hover {background-color: #005f8a;}
.ui-accordion-content {padding: 15px;background-color: #f1f1f1;border: 1px solid #ddd;}
form input, form button, textarea {display: block;width: 95%;padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 5px;}
form button {background-color: #0077b6;color: white;font-weight: bold;cursor: pointer;}
form button:hover {background-color: #005f8a;}
.addData{background-color: #0077b6;color: white;font-weight: bold;cursor: pointer; width: 120px; text-align: center; padding:8px;border-radius: 5px; float: right; margin-top:10px;}
.addData:hover {background-color: #005f8a;}
.login-container {width: 300px;margin: 100px auto;background-color: white;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.fixed-header {position: fixed;top: 0;left: 0;width: 100%;background-color: #0077b6;color: white;z-index: 5;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);padding: 10px 0;}
.header-container {display: flex;justify-content: space-between;align-items: center;margin: 0 auto;padding: 0 20px;}
.menu-btn {font-size: 18px;color: white;text-decoration: none;background-color: #005f8a;padding: 10px 15px;border-radius: 5px;}
.menu-btn:hover {background-color: #004466;}
#uploadDiv{display: none;}
.sidenav {height: 100%;width: 0;position: fixed;z-index: 20;top: 0;right: 0;background-color: #111;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}
.sidenav a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}
.sidenav a:hover {color: #f1f1f1;}
.sidenav .closebtn {position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;}
.submit-btn-1{width:10%;}
.distanceWrapper{display: flex; min-height: 100px;}
.velocityTimeBox{width: 50%; border-left: 1px solid #c9c9c9; padding: 10px;}
.distanceBox{width: 50%; padding: 10px;}
.distanceBox input{width:100%; margin:10px 50px 0px -30px;}
.velocityTimeBox input{width:100%; margin:10px 0 0px 0;}
.clock ul {width: 250px;margin: 0 auto;padding: 0;list-style: none;text-align: center}
.clock ul li {display: inline;font-size: 3em;text-align: center;font-family: "Arial", Helvetica, sans-serif;text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff, 0 4px 7px #55c6ff}
.line-container {display: flex;align-items: center;text-align: center;width: 100%;margin: 20px 0;}
.line {flex-grow: 1;height: 1px;background-color: #ccc;}
.line-text {padding: 0 15px;font-weight: bold;color: #333;}
.popup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;align-items: center;justify-content: center;color: white;font-size: 1.5rem;}
.popup-content {background-color: #333;padding: 20px 40px;border-radius: 10px;text-align: center;}
.select2-container {width: 100% !important;}
.form_label{margin-top:20px; font-weight:bold;}
.addWrapper{position:relative;}
.addWrapper a{color:#16044a}
.addBox{background:#0077b6; padding:10px; position:fixed; bottom:2%; right: 2%; z-index: 5; border-radius:125px; color:#fff; font-weight: bold; text-align: center; border:1px solid #015582; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.caption{float:right; margin-top:5px; margin-left: 5px;}
.clr{clear:both;}
.parentWrapper{display:table; width:100%;z-index:1;}
.childOneWrapper{display: table-cell;}
.childSecondWrapper{display: table-cell; padding: 8px;}
.checkbox-container label {display: flex; align-items: center; gap: 10px; margin-bottom: 5px;}
.locationWrapper{margin-top:10px; font-size: large;}
#toggleLocation {background-color: #0077b6; color: #fff; border: 1px solid #005f8a; font-size: large; padding: 10px 20px; cursor: pointer; margin: 10px; }
#locationstatus {margin-top: 20px;}
.locationSetting{list-style: none;}
.locationSetting li{padding:8px;}
.box{width: 38%; float:left; margin-right:10px;}
.submitLoader {border: 4px solid rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 50%; border-left-color: #3498db; animation: spin 1s linear infinite; margin: auto; margin-bottom: 10px; }
.chartBtn{font-size:small;color:  white;font-weight: bold;cursor: pointer;text-decoration: none;background-color: #0077b6;padding: 10px 15px;border-radius: 5px; width: 10%; text-align: center; margin-top:10px;}
.chartBtn:hover {background-color: #005f8a;}
.chartDate{padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 5px;}
.mandatory{color:red;}
.Info_bankdetail{width:500px;}
.delPhoto{position:absolute; left:0; top:0; cursor: pointer; padding:5px; border-radius:125px; width:20px; height: 20px; background:rgba(0,0,0,0.7);}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Adjust layout on smaller screens */
@media (max-width: 768px) {
.chartBtn{width:95%;}
.submit-btn-1{width:100%;}
.menu-btn {font-size: 16px;padding: 8px 12px;}
.box{width: 100%; margin-top:20px; float:inherit; }
.Info_bankdetail{width:100%;}
}
@media (max-width: 480px) {
.menu-btn {font-size: 14px;padding: 6px 10px;}
}