:root{--topbar-height: 70px;--accent-color: rgba(247, 151, 29, .8);--accent-dark: rgba(75, 75, 75, .55);--border-color: #ddd;--text-dark: #333;--text-light: #fff}.page-content{padding:var(--topbar-height) 0 0 0}.dropdown-container{position:absolute;right:22px;top:var(--topbar-height);z-index:99}.installation-name{font-weight:700;margin-right:10px}.imagetime{text-align:center;font-size:1.5rem;color:#353434;padding:5px}.imagedate{text-align:center;font-size:1rem;color:#000;padding:5px}.custom-toggle-btn{background:transparent;border:none;padding:0;cursor:pointer}.custom-toggle-btn:hover,.custom-toggle-btn:focus{background:transparent;box-shadow:none;outline:none}.custom-toggle-icon{width:24px;height:24px;object-fit:contain}.menu-arrow{font-size:.8rem;color:#555;margin-left:5px;vertical-align:middle}.dropdown-calendar{position:relative;z-index:2000}.dropdown-calendar .dropdown-content{display:none;position:absolute;top:100%;right:0;min-width:300px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:5px;box-shadow:0 4px 8px #0000004d;z-index:2001;padding:10px}.dropdown-calendar.active .dropdown-content{display:block}#videoPlayer{display:none;margin-top:10px;border-radius:3px;border:1px solid var(--border-color);box-shadow:0 2px 6px #0000001a;width:100%}#videoPlayerContainer{margin:0!important;padding:0!important}#videoPlayerContainer video{width:100%;display:block;box-sizing:border-box}.video-label{position:absolute;top:0;left:0;background-color:var(--accent-color);color:var(--text-light);font-size:.9rem;font-weight:700;padding:5px 10px;border-radius:5px;z-index:10;box-shadow:0 2px 5px #0003}#videoSelect{width:100%;font-size:1rem;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;box-shadow:inset 0 2px 4px #0000001a;margin-top:1rem}#videoMetadata{margin-top:10px;display:none;justify-content:space-around;align-items:center;flex-wrap:nowrap;background-color:#7a7a7a1a;padding:10px;border-radius:5px;border:1px solid var(--border-color);box-shadow:0 2px 6px #0000001a;gap:15px}.metadata-item{text-align:center;padding:5px;font-size:.9rem;color:var(--text-dark);flex:1;min-width:80px}.metadata-item i{font-size:1rem;margin-bottom:5px}.metadata-item p{font-size:.8rem;font-weight:lighter;color:var(--accent-color);margin:5px 0}.metadata-item small{font-size:.8rem;color:#888}.weather-icon,.info-icon{position:fixed;bottom:20px;z-index:1000;background:#fff;color:#f7991d;border:none;border-radius:50%;padding:10px;cursor:pointer;font-size:1rem;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 4px #0000004d;transition:transform .2s ease-in-out}.weather-icon:hover,.info-icon:hover{transform:scale(1.1)}.weather-icon{right:60px}.info-icon{right:20px}@media screen and (max-width: 768px){.weather-icon{right:70px}.info-icon{right:20px}}.photo-meta-overlay{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:500px;background-color:#000c;z-index:99;color:var(--text-light);padding:20px;box-sizing:border-box;border-radius:10px;box-shadow:0 4px 8px #0000004d;overflow-y:auto;max-height:80vh}.photo-meta-overlay .close-btn{position:absolute;top:10px;right:10px;background:rgba(146,146,146,.6);border:none;padding:5px 10px;font-size:1.2rem;cursor:pointer;border-radius:5px;color:#000}.photo-meta{width:100%;margin:0 auto;border-spacing:10px}.metadata{text-align:center;font-size:1rem;background:var(--accent-dark);padding:10px;color:var(--text-light)}.metadata i{margin-right:5px;font-size:1.2rem;color:#fc0}.photo-weather-overlay{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:400px;background-color:#000c;z-index:99;color:var(--text-light);padding:20px;box-sizing:border-box;border-radius:10px;box-shadow:0 4px 8px #0000004d;overflow-y:auto;max-height:80vh}.photo-weather{width:100%;margin:0 auto;border-spacing:10px;text-align:center;border:1px solid #444}.photo-weather td{padding:10px;background-color:#222}.location i,.weathertemperature i,.weatherwind i,.weatherhumidity i{font-size:1.5rem;margin-bottom:5px;color:#fc0}.weatherdata i{font-size:5rem;color:#fc0;margin-right:5px}.weatherdata{text-align:center;font-size:1rem;font-weight:700;color:var(--text-light)}.weathertemperature{font-size:1.5rem;color:var(--text-light);font-weight:700;padding:10px;display:flex;align-items:center;justify-content:center}.weatherwind,.weatherhumidity,.location{font-size:1rem;color:var(--text-light);padding:5px;text-align:center}.location{font-weight:700}.photo-weather-overlay .close-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.6);border:none;padding:5px 10px;font-size:1.2rem;cursor:pointer;border-radius:5px;color:#000}#thumbnails{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:10px;max-width:100%;box-sizing:border-box}.thumbnail-frame{flex:1 1 calc(25% - 10px);max-width:150px;box-sizing:border-box;margin:5px;background-color:#f9f9f9;border:1px solid var(--border-color);border-radius:5px;overflow:hidden}.thumbnail-image{width:100%;height:auto;display:block}.thumbnail-time,.thumbnail-date{font-size:.8rem;color:#555;text-align:center;margin-top:5px}@media screen and (max-width: 768px){.thumbnail-frame{flex:1 1 calc(33.33% - 10px)}}@media screen and (max-width: 480px){.thumbnail-frame{flex:1 1 calc(50% - 10px)}}@media screen and (max-width: 320px){.thumbnail-frame{flex:1 1 100%}}#fullImage{width:100vw;height:100vh;object-fit:contain;background-color:#000}.image-container{height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}@media screen and (max-width: 600px){.image-container{justify-content:center;align-items:flex-start;height:100vh;width:100vw;overflow-x:auto;overflow-y:hidden}#fullImage{height:100%;width:auto}}// Sidebar stripe alignment fix .vertical-menu .metismenu li a{position:relative;padding-left:20px;// match Skote demo}.vertical-menu .metismenu .mm-active>a:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background-color:#556ee6;// Skote primary blue border-radius: 0}