@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");:root{--fontPrimary:"Plus Jakarta Sans",serif;--yellow:#fff16f;--ruby:#be0046;--blue:#0096cb;--blueDark:#00254a;--grayLight:#e6e6e6;--gray:#d9d9d9;--grayDark:#999;--graphite:#242527;--navy:#16181e;--colorPrimary:var(--blue);--colorSecondary:var(--blueDark);--bgColorPrimary:var(--gray);--bgColorMain:#d9d9d9;--bgAside:var(--grayLigh);--menuColor:#064061;--menuBgActive:var(--gray);--sidebarBg:var(--colorPrimary);--floatboxBg:var(--grayLight);--formBg:var(--grayLight);--txtColor:var(--navy);--headerColor:var(--secondary)}.dark-mode{--colorPrimary:var(--blue);--colorSecondary:var(--blueDark);--bgColorPrimary:var(--gray);--bgColorMain:var(--navy);--bgAside:var(--graphite);--menuColor:#999;--menuBgActive:#16181e;--sidebarBg:var(--navy);--floatboxBg:var(--graphite);--formBg:var(--graphite);--txtColor:#999;--headerColor:#999}html{font-size:10px;scroll-behavior:smooth}body{font-family:var(--fontPrimary);font-optical-sizing:auto;font-weight:400;font-style:normal;color:var(--txtColor);background-color:var(--bgColorPrimary);line-height:100%;overflow-x:hidden;max-width:100%;position:relative;margin:0;min-height:100vh;display:flex;flex-direction:column;width:100%}*{box-sizing:border-box}:focus{outline:none;text-shadow:none}a{font-family:var(--fontPrimary);font-style:normal;font-weight:400;color:#000;transition:all .5s}a:focus,a:hover{color:var(--colorSecondary)}.h1,h1{font-family:var(--fontPrimary);font-size:2.4rem;font-weight:700;font-style:normal;color:var(--headerColor);line-height:110%;margin:0;padding:0 0 2rem;@media (min-width:640px){font-size:2.6rem}@media (min-width:980px){font-size:3.2rem}}.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6{font-family:var(--fontPrimary);font-size:1.8rem;font-weight:700;font-style:normal;color:var(--primary);line-height:110%;margin:0;padding:0 0 1.6rem;@media (min-width:640px){font-size:2rem}@media (min-width:980px){font-size:2.6rem}}p{line-height:150%;padding:0 0 2rem}li,p{font-family:var(--fontPrimary);font-weight:400;font-style:normal;font-size:1.6rem;color:var(--txtColor);margin:0}li{line-height:180%;padding:0}b,strong{font-weight:700}dl,ol,ul{margin-top:0;margin-bottom:0;padding:0}ol ol,ol ul,ul ol,ul ul{margin:1rem 0 0}ol li{padding-bottom:1.5rem}.hidden{display:none}iframe,img,svg{max-width:100%;height:auto}figure{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;line-height:0}figcaption{font-family:var(--fontPrimary);font-weight:500;font-style:italic;font-size:1.4rem;padding:1rem 0 0;line-height:150%}.hidden{display:none!important}.mobile-only{display:none}.desktop-only{display:block}@media (max-width:980px){.mobile-only{display:block}.desktop-only{display:none}}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:4rem;gap:1.2rem;padding:1rem 1.6rem;border-radius:2rem;box-sizing:border-box;line-height:100%;font-family:var(--font2);font-size:1.6rem;font-weight:400;text-decoration:none;transition:all .5s;color:#fff;border:1px solid var(--colorPrimary);background-color:var(--colorPrimary);white-space:nowrap;cursor:pointer;&:disabled,&[disabled]{opacity:.5;cursor:no-drop!important}svg{fill:#fff;transition:all .5s}&:focus,&:hover{color:#fff;background-color:var(--colorSecondary);border-color:var(--colorSecondary);svg{fill:#fff}}@media (min-width:640px){min-height:6rem;border-radius:3rem;padding-left:3.2rem;padding-bottom:1.3rem;padding-right:3.2rem;padding-top:1.3rem}}.btnbox{display:flex;flex-wrap:wrap;gap:2rem;@media (max-width:640px){gap:1rem}}.fieldbox{padding:1.2rem 0;@media (min-width:640px){padding-left:0;padding-bottom:1.6rem;padding-right:0;padding-top:1.6rem}@media (min-width:980px){padding-left:0;padding-bottom:2rem;padding-right:0;padding-top:2rem}}label{display:block;font-size:1.3rem;font-weight:400;color:var(--txtColor);padding:0 0 .5rem 2.2rem;@media (min-width:640px){font-size:1.6rem;padding-left:3rem;padding-bottom:1rem}@media (min-width:980px){font-size:1.8rem;padding-left:4rem}}input[type=email],input[type=password],input[type=text]{width:100%;padding:1rem 2.2rem;margin-top:5px;border:1px solid #b6b6b6;font-size:1.4rem;background:hsla(0,0%,100%,.7);outline:none;height:4rem;border-radius:2rem;line-height:100%;&:focus{border-color:var(--colorPrimary)}@media (min-width:640px){font-size:1.8rem;padding-left:3rem;padding-bottom:1rem;padding-right:3rem;padding-top:1rem;height:6rem;border-radius:6rem}@media (min-width:980px){font-size:2rem;padding-left:4rem;padding-bottom:1rem;padding-right:4rem;padding-top:1rem;height:7rem;border-radius:3.5rem}}.checkbox-label{position:relative;z-index:1;display:block;margin:0;font-size:1.4rem;line-height:130%;font-weight:400;color:#fff;padding:.2rem 0 .2rem 3.8rem;cursor:pointer;@media (min-width:640px){font-size:1.6rem}&:before{z-index:2;top:0;left:0;width:2.4rem;height:2.4rem;border-radius:.7rem;border:1px solid #5ed0ff}&:after,&:before{content:"";position:absolute}&:after{z-index:3;top:4px;left:9px;width:.6rem;height:1.1rem;border:2px solid var(--colorPrimary);border-top:0;border-left:0;transform:rotate(43deg);opacity:0}&:hover{&:before{background-color:#fff}}&:has(>[type=checkbox]:checked){&:before{border-color:#fff;background-color:#fff}&:after{opacity:1}}[type=checkbox]{display:none}}.remember-me{display:flex;align-items:center;margin-top:10px;input{margin-right:10px}}.switchmode{display:flex;align-items:center;gap:1.4rem;padding:0;margin-top:4rem;flex-wrap:wrap;max-width:180px;@media (min-width:980px){position:absolute;top:0;right:4rem}>div{display:flex;align-items:center;gap:1.4rem;flex:0 1 100%;button{border:none;padding:0;margin:0;background:none;cursor:pointer}}.theme-switch{position:relative;display:inline-block;width:50px;height:25px;input{opacity:0;width:0;height:0}}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--grayLight);border-radius:25px;border:1px solid #b6b6b6}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:20px;width:20px;left:2px;bottom:2.5px;background-color:#fff;border-radius:50%}input:checked{&+.slider{background-color:var(--graphite);&:before{transform:translateX(24px)}}}.moon-icon,.sun-icon{cursor:pointer;svg{fill:#e6e6e6}}}.layout-login{.logobox{margin-top:0;margin-bottom:5rem;svg{fill:#fff}}.login-container{background-color:var(--formBg);padding:3rem;border-radius:2rem;box-shadow:0 2rem 6rem rgba(0,0,0,.2);width:100%;max-width:56rem;@media (min-width:640px){padding-left:3rem;padding-bottom:3rem;padding-right:3rem;padding-top:3rem}}.btnbox{padding-top:3rem;justify-content:flex-end}.checkbox-label{margin-top:1rem;margin-left:2.2rem;color:var(--txtColor);&:before{border-color:#b6b6b6}@media (min-width:640px){margin-left:3rem}@media (min-width:980px){margin-left:4rem}}}.layout-login{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;height:100vh;background-color:transparent;padding:2rem 0;&:after{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-image:url(/images/login_bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover}&.dark-mode:after{filter:grayscale(100%)}.container{width:100%;max-width:160rem;padding-left:2rem;padding-right:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;@media (min-width:640px){padding-left:6rem;padding-right:6rem}@media (min-width:980px){display:block;flex-direction:unset;align-items:unset;justify-content:unset}}}.layout-2-col{display:flex;flex-direction:row;align-items:flex-start;.aside{position:fixed;top:0;left:0;height:100%;z-index:999;display:flex;flex-direction:column;width:100%;max-width:5rem;min-height:100vh;background-color:var(--bgAside);.container{padding-left:1.6rem;padding-right:1.6rem}@media (min-width:640px){max-width:9rem}@media (min-width:980px){max-width:28rem}}.main{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;max-width:calc(100% - 5rem);margin-left:5rem;min-height:100vh;background:var(--bgColorMain);padding-top:1rem;@media (min-width:640px){max-width:calc(100% - 9rem);margin-left:9rem}@media (min-width:980px){padding-top:4rem;max-width:calc(100% - 28rem);margin-left:28rem}.container{width:100%;max-width:118rem;padding-left:2rem;padding-right:2rem;@media (min-width:640px){padding-left:6rem;padding-right:10.6rem}}}}.floatbox{position:fixed;z-index:1010;top:1rem;right:0;display:flex;justify-content:center;align-items:center;width:6rem;height:6.8rem;padding:2rem;border-radius:2rem 0 0 2rem;background-color:var(--floatboxBg);svg{color:var(--colorPrimary);fill:var(--colorPrimary)}@media (min-width:980px){top:1rem;width:8rem;height:9rem}}@media screen and (max-width:720px){.floatbox{top:7rem;display:none}}.logobox{margin:2rem 0 2.2rem;@media (min-width:640px){margin-left:0;margin-bottom:1.5rem;margin-right:0;margin-top:2rem}@media (min-width:980px){margin-left:0;margin-bottom:10rem;margin-right:0;margin-top:4rem}}.menu{list-style:none;margin:0;padding:0;border-top:1px solid var(--grayDark);li{margin:0;padding:0;border-bottom:1px solid var(--grayDark);a{position:relative;display:flex;flex-direction:row;justify-content:center;gap:1rem;align-items:center;min-height:6rem;font-size:1.6rem;font-weight:400;text-decoration:none;color:var(--menuColor);&:after{content:"";position:absolute;z-index:2;top:-1px;right:-.3rem;width:.3rem;height:calc(100% + 2px);background-color:var(--colorPrimary);opacity:0;transition:opacity .5s}&.active{background-color:var(--menuBgActive);&:after{opacity:1}}&:hover{&:after{opacity:1}}span{display:none;@media (min-width:980px){display:inline}@media (max-width:979px){display:none!important}}.icobox{display:inline-flex;justify-content:center;align-items:center;width:100%;max-width:2.4rem}svg{color:var(--colorPrimary);fill:var(--colorPrimary)}&.logout{svg{color:var(--ruby);fill:var(--ruby)}}@media (min-width:980px){justify-content:flex-start;gap:2rem}}}}.darkmode-link{cursor:pointer;.daymode-ico,.daymode-txt{display:none}&.active{.darkmode-ico,.darkmode-txt{display:none}.daymode-ico,.daymode-txt{display:inline-flex}}}.menu-secondary{margin-top:auto}.headerbox{display:flex;justify-content:space-between;align-items:center;gap:2rem;width:100%;padding:1rem 0;border-bottom:1px solid #707070;margin-bottom:2.4rem;@media (min-width:640px){gap:2rem;padding-left:0;padding-bottom:2rem;padding-right:0;padding-top:2rem;margin-bottom:4rem}&.no-bottom{margin-bottom:0;border-bottom:none}.h1{font-size:2.4rem;font-weight:700;padding:0;@media (min-width:640px){font-size:2.6rem}@media (min-width:980px){font-size:3.3rem}}}.view-switch{display:flex;justify-content:center;align-items:center;gap:1rem;@media (min-width:640px){display:flex}.switch-btn{color:var(--grayLight);svg{fill:var(--grayLight)}&.active,&:hover{color:var(--colorPrimary);svg{fill:var(--colorPrimary)}}@media (max-width:979px){&[data-camview="16"],&[data-camview="8"]{display:none}}}}#cams{display:grid;grid-template-rows:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:1rem 1.5rem;gap:1rem 1.5rem;&[data-camview="1"]{grid-template-rows:1fr;grid-template-columns:1fr}&[data-camview="4"]{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}&[data-camview="9"]{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr}&[data-camview="16"]{grid-template-rows:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr}&[data-camview="8"]{.cam:first-child{grid-column:1/span 3;grid-row:1/span 3}}.cam{display:block;aspect-ratio:270/184;width:100%;border-radius:2rem;overflow:hidden;background-color:#064061}}@media screen and (max-width:720px){#cams{display:flex;flex-wrap:wrap}}.map-container{position:relative;width:100%;height:calc(100vh - 6rem);@media (min-width:640px){height:calc(100vh - 11rem)}@media (min-width:980px){height:calc(100vh - 12rem);display:flex}#map{width:100%;height:100%;overflow:hidden}#sidebar{position:absolute;z-index:1000;right:0;bottom:0;width:100%;height:30rem;background-color:var(--sidebarBg);color:#fff;padding:2rem;overflow-y:auto;@media (min-width:640px){right:0;bottom:0;width:100%;height:33%;max-height:27rem}@media (min-width:980px){right:0;bottom:0;width:35rem;height:100%;max-height:100%}.searchbox{position:relative;z-index:1;input[type=text]{width:100%;padding:1rem 0;margin-bottom:10px;background:transparent;border:0;border-bottom:1px solid #5ed0ff;border-radius:0;font-size:1.6rem;font-weight:400;color:#fff;&::-webkit-input-placeholder{color:#fff}&:-moz-placeholder,&::-moz-placeholder{color:#fff}&:-ms-input-placeholder{color:#fff}}.icobox{position:absolute;z-index:-1;top:.7rem;right:0;svg{fill:#5ed0ff}}}.camera-item{display:flex;align-items:center;margin-bottom:5px}}}#camera-list{display:flex;flex-direction:column;flex-wrap:wrap;gap:1.4rem 3rem;margin-top:1.4rem;@media (min-width:640px){flex-direction:row}@media (min-width:980px){flex-direction:column}}