:root {
--night:#020a12ff;
--night2:#0e141bff;
--night3:#151e28ff;
--night4:#1c2835ff;
--dark:#233243ff;
--blue-light:#294b6bff;
--white-light:#FFF5EB;
--bg-light:#FFF;
--grey-light:#d4d5d9;
--fresh:#ffc482ff;

--beige:#F9F7F3;


  /* --blue-ncs:#0087adff;
  --sage:#b3af8fff;
  --peach:#ffc482ff; */

}

*{box-sizing: border-box;}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(material.otf) format('opentype');
}
@font-face {font-family:'f-serif'; src:url('playfair.ttf') format('truetype'); }

@font-face {font-family:'recall'; src:url('recall.ttf') format('truetype'); }
@font-face {font-family:'f-bold'; src:url('roboto_bold.ttf') format('truetype'); }
@font-face {font-family:'f-med'; src:url('roboto_med.ttf') format('truetype'); }
@font-face {font-family:'f-light'; src:url('roboto_light.ttf') format('truetype'); }
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}


::-webkit-scrollbar{display:none;}

*{overscroll-behavior:none;}
html{font-family:f-med;}
*, *:active, *:hover, *:focus{-webkit-appearance:none;outline:none;}
::placeholder{color:var(--blue-light);}
#frame-1{width:400px;height:100vh;position:relative;scroll-behavior:smooth;left:0;z-index:5;}
#frame-2{width:400px;height:100vh;position:relative;scroll-behavior:smooth;overscroll-behavior:none;z-index:5;}
#frame-3{width:400px;height:100vh;position:relative;scroll-behavior:smooth;overscroll-behavior:none;}



body{margin:0;padding:0;padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.framework{display:flex;justify-content:center;left:0;right:0;top:0;}
.scope{position:absolute;left:0;right:0;width:400px;display:flex;flex-direction:row;height:100vh;-webkit-overflow-scrolling:touch;overflow-x:scroll;scroll-snap-type:x mandatory;}
.contain{width:400px;position:relative;overflow-y:scroll;-webkit-overflow-scrolling:touch;flex-shrink:0;background:transparent;scroll-snap-align:start;scroll-snap-stop:always;}


div{box-sizing:border-box;}
.diag{position:relative;width:380px;height:400px;border:0px solid black;}
.diag-s{position:relative;width:80px;height:80px;border:1px solid #F5F2EF;border-radius:20px;background:var(--beige);display:flex;justify-content:center;align-items:center;}
  .safety-icon{width:72px;height:72px;border-radius:18px;box-shadow:#F9F7F3 0 0 5px 1px;}
.diag-l{position:relative;width:296px;min-height:316px;border:1px solid #F5F2EF;border-radius:20px;left:84px;top:-10px;background:var(--beige);padding:40px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;}

.text-l{font-size:24px;line-height:32px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:500;letter-spacing:8px;text-transform:uppercase;}
.text-m{font-size:19px;line-height:24px;align-self:flex-start;font-family:"Roboto", sans-serif;font-weight:400;letter-spacing:6px;}
.text-s{font-size:13px;line-height:20px;align-self:flex-start;font-family:"Playfair Display", sans-serif;font-weight:400;letter-spacing:.5px;}
.text-c{align-self:center;}
.text-wide{letter-spacing:6px;}
.text-narrow{letter-spacing:-.25px;}
.text-normal{letter-spacing:.5px;}
  .serif{font-family:f-serif;font-weight:600;}
.button{position:relative;background:#333;color:#f0f0f0;width:236px;text-align:center;height:48px;line-height:48px;font-size:16px;border-radius:24px;}
.button:hover{background:#111;}
.input{position:relative;color:#333;background:inherit;width:236px;border:3px solid #E5E1DC;box-sizing:border-box;height:48px;line-height:48px;font-size:16px;border-radius:24px;padding:0 16px;}
input::placeholder{color:inherit;}
input:focus{background:#E5E1DC;outline:none !important;outline-width:0 !important;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
.text-link{text-decoration:underline;} /* or none */
.text-link::after{position:absolute;content: '\203A';margin-left:3px;}
.spacer{position:relative;}
  .double{padding:10px 0;}


.nav{position:relative;margin:30 60px;height:60px;background:#333;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;border-radius:20px;border:.5px solid #333;border-radius:12px;box-shadow:0 2px 3px 2px rgba(0,0,0,0.3);}
.nav-icon{position:relative;width:40px;left:24px;height:40px;border:.5px solid #333;border-radius:12px;box-shadow:0 0 5px 2px #111;}
.nav-company{position:relative;margin-left:48px;letter-spacing:5px;color:var(--beige);}
.nav-menu{position:relative;display:flex;margin-left:auto;right:24px;border:.5px solid #333;border-radius:12px;box-shadow:0 0 3px 1px rgba(0,0,0,0.3);}
.nav-arrow{margin-left:24px;width:40px;height:40px;background:var(--beige);border-radius:20px;}

.headline{position:relative;top:0;left:0;right:0;padding:30 20 20 20px;}
.container{position:relative;left:0;right:0;bottom:0;margin:0;padding:0;overflow-y:scroll;}
.construct{position:relative;left:0;right:0;padding:20 30px;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;}
  .section{position:relative;display:flex;flex-direction:column;gap:15px;}
    .section-text{position:relative;font-size:24px;font-family:f-med;color:#111;}
    .header{font-size:40px;line-height:48px;}
    .upper{font-size:24px;line-height:30px;}
    .lower{font-size:20px;line-height:24px;color:#484848;}
    .legal{font-size:16px;line-height:18px;}
    .text-left{text-align:left;align-self:flex-start;}
    .text-center{text-align:center;align-self:center;}
  .stream{position:relative;background:#ccc;width:340px;height:191.25px;border-radius:24px;box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);}
    .vertical{height:340px;width:191.25px;}
  .stream-info, .stream-info-popup{position:relative;left:0;right:0;text-align:center;}
    .video{position:relative;border-radius:24px;}
  .stream > img{width:inherit;height:inherit;border-radius:inherit;}

.popup{position:fixed;bottom:0;left:0;right:0;padding:20px 20px 10px 20px;display:none;flex-direction:column;gap:10px;margin:10 10 24 10px;background:#F0F1F1;border-radius:39px;z-index:10;}
  .pop-nav{position:relative;left:0;right:0;top:0;padding:10px;height:60px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;}
    .popup-icon{position:relative;top:0;right:0;border-radius:100%;width:40px;height:40px;background:#DADADA;display:flex;justify-content:center;align-items:center;}
    .popup-icon:first-of-type{margin-left:auto;}
    .popup-max{display:none;}
    .popup-hq{margin-left:auto;}
      .using{color:#2B85BD;}
    .popup-close{margin-left:10px;}
  .stream-detail{width:auto;flex-grow:1;min-width:340px;left:0;right:0;}
  .slide-events{align-self:center;appearance:none;padding:0 4px;-webkit-appearance:none;overflow:hidden;width:300px;height:44px;background:#919291;border-radius:22px;}
    .slide-events::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:36px;background:#D6D5D5;width:60px;border-radius:20px;}
    .slide-events:focus{background:#919291;}
    sinput::-webkit-slider-runnable-track{appearance:none;-webkit-appearance:none;}
  .history{position:relative;display:flex;padding:10px 10px 0 10px;flex-direction:column;}
    .history-events{position:relative;display:flex;flex-direction:column;max-height:240px;overflow-y:scroll;margin:0;padding:10px;margin:0;gap:8px;}
    .history-events::-webkit-scrollbar{display:block;}
      .history-event{position:relative;padding:0;display:flex;flex-direction:row;border-bottom:.5px solid #D6D5D5;color:#484848;align-items:center;}
        .activesequence{background:#D6D5D5;border-radius:30px;}
        .history-wrap{position:relative;display:flex;flex-direction:column;flex:1;gap:5px;letter-spacing:.5px;}
        .history-wrap:last-child{align-items:flex-end;margin-right:12px;}
          .history-wrap > div{font-size:15px;flex:1;}
        .history-preview{position:relative;display:flex;padding:5px;}
          .video-preview{position:relative;border-radius:48px;}
        .history-date{}
        .history-time{}
          .time-seconds{color:#111;}
        .history-type{}
        .history-duration{position:relative;display:flex;background:#333;color:#f3f3f3;border-radius:26px;min-width:30px;padding:4px 8px;align-items:center;}

.boxes{position:relative;left:0;right:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:15px;}
  .box{position:relative;flex:1;display:flex;background:#333;border-radius:22px;padding:20px;min-height:100px;align-items:center;}
    .welcome{font-family:f-bold;font-size:24px;line-height:30px;color:#ccc;display:flex;flex-direction:column;}
      .notify{background:#ccc;font-family:f-bold;font-size:20px;min-height:20px;line-height:24px;color:#333;display:flex;flex-direction:column;align-items:flex-start;}
      .vpn-info{position:relative;font-size:f-bold;left:0;top:0;right:0;font-size:18px;letter-spacing:-.5px;padding:10px 0;min-height:30px;line-height:24px;background:#2B85BD;display:none;justify-content:center;color:#f0f0f0;text-align:center;flex:1 0 340px;}
      .logout{position:relative;font-size:f-light;left:0;top:0;right:0;font-size:18px;letter-spacing:-.5px;line-height:24px;display:flex;justify-content:center;color:#f0f0f0;}
      .boxes > a{color:#f0f0f0;text-decoration:inherit;}
      .welcome-name{align-self:flex-end;}
    .lastlogin{font-family:f-light;font-size:18px;line-height:30px;color:#ccc;display:flex;flex-direction:column;align-items:flex-start;}
      .lastlogin-date{font-family:f-bold;font-size:15px;line-height:22px;align-self:flex-end;}
      .lastlogin-time{font-family:f-bold;font-size:18px;line-height:22px;align-self:flex-end;}
    .events{font-family:f-bold;font-size:24px;padding:30px 20px;line-height:30px;display:block;background:#ccc;align-items:center;}
      .events-head{position:relative;font-size:24px;line-height:30px;background:-webkit-linear-gradient(#F9F9F9, #111);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;font-family:'f-med';color:#333;font-size:20px;letter-spacing:7px;text-transform:uppercase;line-height:60px;z-index:3;}
      .events-count{position:relative;background:#333;margin-left:auto;margin-top:-44px;width:80px;height:80px;flex-shrink:0;border-radius:100%;display:flex;justify-content:center;align-items:center;font-family:f-bold;color:#f3f3f3;font-size:32px;line-height:32px;z-index:2;}
      .events-text{position:relative;display:flex;flex-direction:row;margin-top:-44px;gap:10px;font-family:'f-light';color:#333;font-size:18px;line-height:40px;}
        .events-icon{}
      .events-warning, .events-null{display:none;}
      .events-list{position:relative;margin:0;padding:0 10px;margin-top:-40px;width:200px;}
        .event{position:relative;list-style-type:none;display:flex;flex-direction:row;justify-content:space-between;font-size:16px;line-height:26px;}
          .event-cctv{font-family:f-med;}
          .event-count{font-family:f-light;}
          .event-count::after{position:relative;content: '\203A';margin-left:8px;}
  .notify, .scale{display:none;}
  .imgcheck{display:none;}
/*
.section{position:relative;left:0;right:0;padding:20px;font-family:f-med;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;}
  .section-xl{position:relative;width:360px;left:0;right:0;display:flex;flex-direction:row;flex-grow:1;flex-shrink:0;flex-basis:100%;}
  .section-l{position:relative;width:260px;display:flex;flex-direction:row;align-items:center;}
  .section-m{position:relative;width:170px;display:flex;flex-direction:row;}
  .section-s{position:relative;width:80px;display:flex;flex-direction:row;}
    .section-text{position:relative;font-size:24px;line-height:30px;color:#111;}
      .header{font-size:36px;line-height:40px;}
      .upper{font-size:24px;line-height:30px;}
      .lower{font-size:20px;line-height:24px;}
      .legal{font-size:16px;line-height:18px;}
    .section-fonticon{position:relative;font-size:24px;line-height:30px;color:#111;}
    .fonticon-round{position:relative;width:80px;height:80px;background:#111;border-radius:100%;}
    #fonticon-check{color:darkgreen;font-size:44px;}

    .stream{position:relative;background:#ccc;left:0;right:0;}
      .stream-l{height:200px;}
      .video{width:360;height:180px;}

*/