@layer components{.webcam-modal{max-width:100%;margin:0}.webcam-modal-content-wrap{align-items:flex-start;width:100%;min-height:100dvh;padding-top:64px;padding-bottom:var(--ant-margin-xl)}.webcam-modal-content{width:100%;display:grid;grid-template-columns:1fr;gap:var(--ant-padding);background:var(--ant-kpbrandsecondary-11)}.video-container{background:var(--ant-kpbrandsecondary-11);.videojs-container{width:100%;overflow:hidden}.videojs-container,video{border-radius:var(--ant-kp-border-radius-xl)}video{aspect-ratio:928/522}}.videojs-container,.videojs-container .video-js{touch-action:pan-y;-webkit-overflow-scrolling:touch}.video-js .vjs-control-bar{touch-action:pan-y}.video-js .vjs-tech{touch-action:pan-y;pointer-events:auto}.webcam-current-name{padding:var(--ant-margin-xs) var(--ant-kp-layout-margin) var(--ant-margin) var(--ant-kp-layout-margin);text-align:center}.webcam-body{background:var(--ant-kpbrandsecondary-11)}.webcam-cameras-list{padding:0 var(--ant-kp-layout-margin)}.webcam-cameras-group{padding-bottom:var(--ant-margin-xs)}.webcam-list-item{padding:var(--ant-margin-xxs);border-radius:20px;border:1px solid transparent;cursor:pointer;transition:outline-color .3s ease;&.active{border-color:var(--ant-kp-color-border-brand)}&.disabled{cursor:default;img,span{opacity:.5}.webcam-list-item-image{position:relative;svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}}span{width:100%}}.webcam-list-item-image{max-width:85px;width:100%;aspect-ratio:4/3;border-radius:var(--ant-border-radius-lg);overflow:hidden;img{width:100%;height:100%}}.modal-skeleton{width:100%;height:100%}@media screen and (min-width:768px){.webcam-modal-content-wrap{align-items:center;padding:62px var(--ant-kp-layout-margin) 0}.webcam-cameras-list{max-height:unset;height:calc(.5625 * (-328px - var(--ant-kp-gutter-row) + 100vw));padding:0 5px 0 0;overflow-y:auto}.webcam-modal-content{grid-template-columns:1fr 280px;gap:var(--ant-kp-gutter-row)}}@media screen and (min-width:1200px){.webcam-modal-content{grid-template-columns:minmax(0,1fr) 328px}.webcam-list-item-image{max-width:95px}.webcam-cameras-list{height:calc(.5625 * (-328px - (var(--ant-kp-layout-margin) * 2 + var(--ant-kp-gutter-row)) + 100vw))}.webcam-list-item{&:hover{border-color:var(--ant-color-border)}}}@media screen and (min-width:1440px){.webcam-modal-content-wrap{max-width:var(--layout-width-standard);margin:0 auto;padding:62px 0 0}.webcam-cameras-list{height:calc(.5625 * (-328px - var(--ant-kp-gutter-row) + var(--layout-width-standard)))}}}