uyem/packages/client/dist/styles.css.map

WebRTC client-server SFU application

{"version":3,"file":"styles.css","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBA,sBACE,cAGF,sBACE,kBCrBF,sBACE,kBACA,aACA,iBACA,kBACA,gBACA,iBACA,YACA,WACA,UAEA,4CACE,kBACA,aACA,mBACA,uBAIJ,sBACE,aACA,kBAGF,sBACE,kBACA,WAGF,sBACE,kBACA,aAGF,sBACE,kBACA,WACA,YACA,aACA,WACA,gBAGF,sBAKE,kBACA,aACA,uBACA,mBACA,aACA,YACA,6BACA,YAXA,4BACE,eAYF,2CACE,aAIJ,sBAKE,YACA,eACA,YACA,aACA,iCARA,4BACE,eAUJ,sBACE,kBACA,MACA,QACA,aACA,mBACA,mBACA,yBACA,WAEA,2CACE,aAIJ,sBACE,kBACA,aACA,6BACA,mBACA,eACA,YACA,WACA,uCAEA,4CACE,aACA,mBACA,mBACA,uBAGF,4CACE,aACA,mBACA,mBACA,uBAIJ,sBACE,kBACA,WACA,aACA,mBACA,uBACA,mBACA,UAGF,sBACE,kBACA,YACA,WAGF,sBACE,aACA,mBACA,mBACA,UAGF,sBACE,kBACA,WACA,YAGF,sBACE,eACA,kBACA,WACA,YACA,MACA,QACA,aACA,mBACA,uBACA,gBAEA,4CACE,kBAGF,iCACE,4CACE;ADjJN,sBACE,cAGF,sBACE,kBErBF,sBACE,kBACA,aACA,uBACA,mBACA,kBACA,eACA,WACA,YACA,kBACA,aACA,cAEA,4BACE;AChBJ,sBACE,eACA,kBACA,WAGA,WACA,SACA,SACA,UACA,aAEA,2CACE;AHKJ,sBACE,cAGF,sBACE,kBIrBF,sBACE,eACA,kBACA,aACA,uBACA,mBACA,kBAGA,YJIc,CIFd,4BACE,gCAGF,2CACE,WACA,eAEA,iDACE;ACtBN,sBACE,YACA,eACA,QACA,SACA,gBACA,gDACA,aACA,sBACA,mBACA,uBACA,kBAEA,2CACE;ACdJ,sBACE,kBACA,WACA,YACA,YACA;ANaF,sBACE,cAGF,sBACE,kBErBF,sBACE,kBACA,aACA,uBACA,mBACA,kBACA,eACA,WACA,YACA,kBACA,aACA,cAEA,4BACE,gCKdJ,sBACE,kBAEA,4CACE,eACA,kBACA,WACA,YACA,MACA,QACA,kBACA,aACA,mBACA,uBACA,eACA,gBAEA,kEACE;APFN,sBACE,cAGF,sBACE,kBErBF,sBACE,kBACA,aACA,uBACA,mBACA,kBACA,eACA,WACA,YACA,kBACA,aACA,cAEA,4BACE,gCMdJ,sBACE;AReF,sBACE,cAGF,sBACE,kBSbF,sBACE,kBACA,aACA,sBACA,2BACA,uBACA,UACA,aAfgB,CAgBhB,YACA,iBACA,kBAEA,yBAZF,sBAaI,YAIJ,sBACE,kBACA,WACA,eACA,aACA,sBACA,uBACA,gBACA,kBACA,+BAEA,yBAXF,sBAYI,mBACA,+BAIJ,sBACE,kBACA,aACA,uBACA,gBACA,mBAQF,sBACE,kBACA,mBANiB,CAOjB,YA1DgB,CA2DhB,aACA,sBACA,mBACA,8BAEA,4CACE,kBACA,aACA,WACA,mBAEA,kEACE,kBACA,cACA,0BApBoB,CAqBpB,2BArBoB,CAsBpB,aACA,mBACA,mBACA,iDAIJ,4CACE,kBACA,WACA,aACA,mBACA,6BACA,mBACA,mBAEA,qDACE,kBACA,UACA,eACA,gBACA,WA7FmB,CA8FnB,iBA5CoB,CA6CpB,yBACA,gBA7FmB,CA+FnB,yBAVF,qDAWI,mBAIJ,yBAxBF,4CAyBI,eACA,UAIJ,yBAzDF,sBA0DI,kBA7Dc,EAiElB,sBACE,kBACA,aACA,sBAGF,sBACE,eACA,kBACA,aACA,sBACA,qBACA,aAjIgB,CAkIhB,kBACA,cACA,+DAGA,2CACE,+DAIF,4CACE,aACA,mBAEA,kEACE,iBAGF,kEACE,kBACA,iBAIJ,4CACE,YAEA,iEACE,WAIJ,4CACE,2BACA,kBAGF,4CACE,cACA,qBAGF,4CACE,mBACA,oBACA,gBACA,mBAEA,kEACE,mBACA,gBAIJ,4CACE,oBAIJ,sBACE,aACA,uBACA,YAGF,sBACE;ATpLF,sBACE,cAGF,sBACE,kBUrBF,sBACE,eACA,gBACA,WACA,WVLc,CUMd,YVLe,CUMf,MACA,qBACA,4BAEA,2CACE,SACA,6BAIJ,sBACE,kBACA,WACA,YACA,aACA,sBACA,mBACA,2BAGF,sBACE,kBACA,WACA,YACA,gBACA,aACA,mBACA,uBACA,gBVjCoB,CUkCpB,yBATF,sBAUI,uBAIJ,sBACE,YACA,eACA,QACA,yBAJF,sBAKI,cAIJ,sBACE,YACA,eACA,QACA,SACA,2BACA,yBANF,sBAOI,cAGF,2CACE,MACA;AC/DJ,sBACE,eACA;AXgBF,sBACE,cAGF,sBACE,kBYlBF,sBACE,kBACA,gBACA,+BACA,gBANsB,CAOtB,aACA,sBACA,mBACA,uBAEA,yBAVF,sBAWI,eACA,WACA,SACA,MACA,OACA,gBACA,2BACA,cAEA,2CACE,YACA,aACA,4BACA,eACA,yBAIJ,4CACE,kBACA,WACA,wBACA,aACA,YApCoB,CAqCpB,sBACA,uBAEA,yBATF,4CAUI,gBACA,gBAGF,kEACE,kBAGF,kEACE,kBACA,cACA,iBApDkB,CAsDlB,wFACE,aACA,mBAGF,wFACE,kBACA,aACA,qBAIJ,kEACE,aACA,mBACA,WACA,8BACA,mBAEA,iBAKN,sBACE,kBACA,aACA,sBAGF,sBACE,kBACA,aACA,mBACA,mBAEA,4CACE,kBACA,aACA,mBACA,uBACA,YAGF,4CACE,aACA,mBAIJ,sBACE,kBAGF,sBACE,kBACA,aACA,mBAEA,4CACE,mBACA;ACtHJ,sBACE,kBACA,SACA,QACA,gBAGF,sBACE,YACA,kBACA,MACA;AbOF,sBACE,cAGF,sBACE,kBErBF,sBACE,kBACA,aACA,uBACA,mBACA,kBACA,eACA,WACA,YACA,kBACA,aACA,cAEA,4BACE,gCYdJ,sBACE,kBACA,eACA,YACA,gBACA,kBAEA,6BACE,gGAGF,4CACE,cACA,0BACA,kBAGF,yBAjBF,sBAkBI,eACA,MACA,YACA,WACA,gBACA,SACA,8BACA,gBAEA,2CACE,aACA,gCAKN,sBACE,kBACA,aACA,mBACA,mBACA,6BAEA,4CACE,aACA,mBACA,mBACA,uBAGF,4CACE,aACA,mBACA,mBACA,uBAIJ,sBACE,eACA,kBACA,aACA,mBACA,mBACA,uBAGE,iEACE,WAIJ,4CACE,aACA,mBACA,qBACA,yBACA,iBdpES,CcwEb,sBACE,kBACA,eACA,4BACA,gBACA,aACA,mBACA,mBACA,8BACA,gBACA,yBAVF,sBAWI,8BACA,kBAGF,4CACE,kBACA,aACA,mBACA,mBAIJ,sBACE,kBACA,aACA,mBACA,uBACA,mBAEA,4CACE,kBAGF,iCACE,4CACE;AdnGN,sBACE,cAGF,sBACE,kBErBF,sBACE,kBACA,aACA,uBACA,mBACA,kBACA,eACA,WACA,YACA,kBACA,aACA,cAEA,4BACE,gCadJ,sBACE,kBACA,YfWc,CeVd,aACA,mBACA,uBAEA,4BACE,eAGF,4BACE,cfLS,CeMT;AfGJ,sBACE,cAGF,sBACE,kBgBlBF,sBACE,UACA,YACA,eACA,8BACA,gBACA,4BACA,ehBLa,CgBMb,aACA,aAXc,CAYd,mBACA,8BACA,mBACA,iBAhBc,CAiBd,wCACA,gBACA,2BAEA,4CACE,kBACA,WACA,aACA,uBAGF,yBAzBF,sBA0BI,wCACA,SAGF,2CACE,UACA,sBACA;AhBpBJ,sBACE,cAGF,sBACE,kBiBrBF,sBACE,gBAGF,sBACE,YACA,eACA,kBACA,UjBHa,CiBIb,WjBJa,CiBKb,kBACA,eACA,mCACA,sBACA,YACA,YACA,4BAEA,2CACE,yBACA,6BAGF,yBAnBF,sBAoBI,8BAIJ,sBACE,kBACA,WACA,YACA,aACA,mBACA,2BAEA,2CACE","sources":["webpack://client/./src/package/Main.scss","webpack://client/./src/package/components/Room.module.scss","webpack://client/./src/package/Global.module.scss","webpack://client/./src/package/components/ui/CloseButton.module.scss","webpack://client/./src/package/components/ui/IconButton.module.scss","webpack://client/./src/package/components/ui/Dialog.module.scss","webpack://client/./src/package/components/ui/PseudoButton.module.scss","webpack://client/./src/package/components/ui/Badge.module.scss","webpack://client/./src/package/components/ui/Volume.module.scss","webpack://client/./src/package/components/Chat.module.scss","webpack://client/./src/package/components/Hall.module.scss","webpack://client/./src/package/components/ui/Select.module.scss","webpack://client/./src/package/components/Settings.module.scss","webpack://client/./src/package/components/Video.module.scss","webpack://client/./src/package/components/Users.module.scss","webpack://client/./src/package/components/ui/Checkbox.module.scss","webpack://client/./src/package/components/ui/Alert.module.scss","webpack://client/./src/package/Main.module.scss"],"sourcesContent":["// Constants\n$wrapper-width: 100vw;\n$wrapper-height: 100vh;\n$container-max-width: 1200px;\n$container-transition: 0.3s;\n$mobile-width: 720px;\n$small-width: 360px;\n$button-width: 40px;\n$user-item-padding: 1rem;\n$text-shift: 4px;\n\n// dependency ALERT_TRANSITION in packages/client/src/package/utils/constants.ts\n$alert-transition: 0.3s;\n\n// dependencies in packages/client/src/package/components/ui/IconButton.module.scss\n$crown-padding: 10px;\n\n// colors. It's for example, implements in Theme.ts\n.colors {\n  color: lightblue;\n}\n\n.wrapper {\n  position: relative;\n}\n","@import '../Main';\n\n.wrapper {\n  position: relative;\n  display: flex;\n  flex-flow: column;\n  overflow-x: hidden;\n  overflow-y: auto;\n  min-height: 100vh;\n  height: 100%;\n  width: 100%;\n  padding: 0;\n\n  .empty {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.room__link {\n  margin: 0.5rem;\n  font-size: x-small;\n}\n\n.muted {\n  position: absolute;\n  z-index: 12;\n}\n\n.setting__actions {\n  position: relative;\n  display: flex;\n}\n\n.container {\n  position: relative;\n  width: 100%;\n  height: 90vh;\n  display: grid;\n  grid-gap: 0;\n  overflow: hidden;\n}\n\n.video {\n  video {\n    cursor: pointer;\n  }\n\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 0;\n  min-width: 0;\n  transition: width 0.3s ease-in;\n  margin: auto;\n\n  &.hidden {\n    display: none;\n  }\n}\n\n.video__fixed {\n  video {\n    cursor: default;\n  }\n\n  z-index: 120;\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgb(0 0 0 / 95%);\n}\n\n.video__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  width: 100%;\n\n  &.hidden {\n    display: none;\n  }\n}\n\n.actions {\n  position: relative;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  flex-wrap: wrap;\n  height: 10vh;\n  width: 100%;\n  background-image: rgba($color: gray, $alpha: 5%);\n\n  .icons {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.error {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  color: red;\n}\n\n.link__input {\n  position: relative;\n  height: 2rem;\n  width: 100%;\n}\n\n.link__container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 25%;\n}\n\n.button__back {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.video__timer {\n  cursor: default;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n\n  .text {\n    position: relative;\n  }\n\n  @supports (-moz-appearance: none) {\n    .text {\n      margin-top: 5px;\n    }\n  }\n}\n","@import './Main';\n\n.dialog__item {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  border-radius: 2px;\n  margin: 0.2rem;\n  padding: 0.2rem;\n\n  &:hover {\n    background-color: rgb(0 0 0 / 10%);\n  }\n}\n",".wrapper {\n  cursor: pointer;\n  position: absolute;\n  z-index: 12;\n\n  // Dependency of Room.hooks.ts actions?.setAttribute('style', 'top: 40px; right: calc(1rem - 10px);');\n  right: 1rem;\n  top: 1rem;\n  width: 24;\n  height: 24;\n  display: none;\n\n  &.open {\n    display: block;\n  }\n}\n","@import '../../Main';\n\n.wrapper {\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n\n  // Dependency of Room.hooks.ts actions?.setAttribute('style', 'top: 40px; right: calc(1rem - 10px);');\n  padding: $crown-padding;\n\n  &:hover {\n    background-color: rgb(0 0 0 / 20%);\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    cursor: default;\n\n    &:hover {\n      background-color: inherit;\n    }\n  }\n}\n",".wrapper {\n  z-index: 102;\n  position: fixed;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n  transition: width 0.2s ease-in, height 0.2s ease-in;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n\n  &.open {\n    transition: width 0.2s ease-out, height 0.2s ease-out;\n  }\n}\n",".wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  margin: 10px;\n  transition: top 3s ease, left 3s ease;\n}\n","@import '../../Global.module';\n\n.wrapper {\n  position: relative;\n\n  .value {\n    cursor: default;\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    top: 0;\n    right: 0;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: 600;\n\n    .text {\n      position: relative;\n    }\n  }\n}\n","@import '../../Global.module';\n\n.wrapper {\n  transform: rotate(-90deg);\n}\n","@import '../Main';\n\n$wrapper-padding: 0.5rem;\n\n// dependency packages/client/src/package/utils/constants.ts TEXT_AREA_PADDING_LEFT\n$text-area-padding-left: 8px;\n\n// dependency to five packages/client/src/package/utils/constants.ts TEXT_AREA_BODER_WIDTH\n$text-area-border-width: 1px;\n\n.wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 50%;\n  padding: $wrapper-padding;\n  height: 100%;\n  min-height: 100vh;\n  border-radius: 7px;\n\n  @media (max-width: $mobile-width) {\n    width: 100%;\n  }\n}\n\n.container {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  scroll-padding-top: 1px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin-bottom: calc(#{$wrapper-padding} * 4);\n\n  @media (max-width: $mobile-width) {\n    padding-right: 1rem;\n    width: calc(100% - #{$wrapper-padding} * 4);\n  }\n}\n\n.no__messages {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin-top: auto;\n  margin-bottom: 2rem;\n}\n\n$text-area-padding: 1rem;\n$input-mb-desktop: 0.5rem;\n$input-mb-mobile: 1rem;\n$text-area-border-radius: 6px;\n\n.input {\n  position: absolute;\n  margin-bottom: $input-mb-desktop;\n  bottom: $wrapper-padding;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: calc(100% - #{$wrapper-padding} * 2);\n\n  .info {\n    position: relative;\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n\n    .block {\n      position: relative;\n      padding: 0.5rem;\n      border-top-left-radius: $text-area-border-radius;\n      border-top-right-radius: $text-area-border-radius;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      box-shadow: 1px 1px 1px wheat, -1px -1px 1px wheat;\n    }\n  }\n\n  .group {\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    align-items: center;\n    margin-bottom: 1rem;\n\n    textarea {\n      position: relative;\n      width: 80%;\n      font-size: 1rem;\n      line-height: 1.2;\n      padding: $text-area-padding-left;\n      border-radius: $text-area-border-radius;\n      border-top-left-radius: 0;\n      border-width: $text-area-border-width;\n\n      @media (max-width: $mobile-width) {\n        padding-top: 0.3rem;\n      }\n    }\n\n    @media (max-width: $mobile-width) {\n      position: fixed;\n      bottom: 0;\n    }\n  }\n\n  @media (max-width: $mobile-width) {\n    margin-bottom: $input-mb-mobile;\n  }\n}\n\n.message__wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.message {\n  cursor: default;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  padding: $wrapper-padding;\n  border-radius: 5px;\n  max-width: 80%;\n  margin: calc(#{$wrapper-padding} / 2) auto calc(#{$wrapper-padding} / 2)\n    calc(#{$wrapper-padding} / 2);\n\n  &.self {\n    margin: calc(#{$wrapper-padding} / 2) calc(#{$wrapper-padding} / 2)\n      calc(#{$wrapper-padding} / 2) auto;\n  }\n\n  .name {\n    display: flex;\n    flex-direction: row;\n\n    .name__text {\n      font-weight: bold;\n    }\n\n    .role {\n      font-size: x-small;\n      margin-left: 1rem;\n    }\n  }\n\n  .text {\n    cursor: text;\n\n    &.disabled {\n      opacity: 0.5;\n    }\n  }\n\n  .quote {\n    border-left: 1px solid cyan;\n    padding-left: 1rem;\n  }\n\n  .quote__link {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .date {\n    font-size: xx-small;\n    margin: 5px 0 0 auto;\n    font-weight: 700;\n    letter-spacing: 1px;\n\n    .edited {\n      margin-right: 0.5rem;\n      font-weight: 300;\n    }\n  }\n\n  .settings__button {\n    margin: 5px 0 0 auto;\n  }\n}\n\n.day {\n  display: flex;\n  justify-content: center;\n  height: 2rem;\n}\n\n.send__icon {\n  position: relative;\n}\n","@import '../Main';\n\n.wrapper {\n  position: fixed;\n  overflow: hidden;\n  z-index: 12;\n  width: $wrapper-width;\n  height: $wrapper-height;\n  top: 0;\n  left: calc(#{$wrapper-width} * 2);\n  transition: left $container-transition ease-in;\n\n  &.open {\n    left: calc(100vw - $wrapper-width);\n    transition: left $container-transition ease-out;\n  }\n}\n\n.container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.block {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  margin-top: 10px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  max-width: $container-max-width;\n  @media (max-width: $mobile-width) {\n    flex-direction: column;\n  }\n}\n\n.settings__button {\n  z-index: 106;\n  position: fixed;\n  right: 0;\n  @media (min-width: $mobile-width) {\n    display: none;\n  }\n}\n\n.userlist__button {\n  z-index: 108;\n  position: fixed;\n  right: 0;\n  top: 45px;\n  transition: top 0.3s ease-in;\n  @media (min-width: $mobile-width) {\n    display: none;\n  }\n\n  &.open {\n    top: 0;\n    transition: top 0.3s ease-out;\n  }\n}\n",".wrapper {\n  cursor: pointer;\n  margin: 1rem;\n}\n","@import '../Main';\n\n$border-width: 2px;\n$settings-item-padding: 1rem;\n\n.wrapper {\n  position: relative;\n  overflow: hidden;\n  max-width: calc(20% + #{$settings-item-padding} * 2);\n  margin-left: $settings-item-padding;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  @media (max-width: $mobile-width) {\n    position: fixed;\n    width: 100%;\n    height: 0;\n    top: 0;\n    left: 0;\n    min-width: 100vw;\n    transition: all 0.3s ease-in;\n    margin-left: 0;\n\n    &.open {\n      z-index: 105;\n      height: 100vh;\n      transition: all 0.3s ease-out;\n      padding: 0 3rem;\n      width: calc(100% - 2rem);\n    }\n  }\n\n  .item {\n    position: relative;\n    width: 100%;\n    height: calc(100% - 4px);\n    display: flex;\n    padding: $settings-item-padding;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @media (max-width: $mobile-width) {\n      padding-top: 10%;\n      padding-left: 0;\n    }\n\n    .item__title {\n      text-align: center;\n    }\n\n    .item__actions {\n      position: relative;\n      display: block;\n      margin-right: $settings-item-padding;\n\n      .record {\n        display: flex;\n        align-items: center;\n      }\n\n      .time {\n        position: relative;\n        display: flex;\n        align-items: flex-end;\n      }\n    }\n\n    .item__row {\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      justify-content: space-between;\n      align-items: center;\n      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n      flex-wrap: nowrap;\n    }\n  }\n}\n\n.videos {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.video {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  .name {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n  }\n\n  .actions {\n    display: flex;\n    flex-direction: row;\n  }\n}\n\n.record__button__started {\n  border-radius: 7px;\n}\n\n.text__button {\n  border-radius: 7px;\n  display: flex;\n  align-items: center;\n\n  .text__button__title {\n    display: table-cell;\n    vertical-align: middle;\n  }\n}\n",".wrapper {\n  position: absolute;\n  top: 50px;\n  right: 0;\n  margin-top: 2rem;\n}\n\n.close__button {\n  z-index: 130;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n","@import '../Global.module';\n\n.wrapper {\n  position: relative;\n  flex-basis: 30%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  &::after {\n    content: '_____________________________________________________________________________________';\n  }\n\n  .title {\n    margin: 1rem 0;\n    text-decoration: underline;\n    text-align: center;\n  }\n\n  @media (max-width: $mobile-width) {\n    position: fixed;\n    top: 0;\n    z-index: 107;\n    width: 100%;\n    overflow: hidden;\n    height: 0;\n    transition: height 0.3s ease-in;\n    overflow-y: auto;\n\n    &.open {\n      height: 100vh;\n      transition: height 0.3s ease-out;\n    }\n  }\n}\n\n.users__actions {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n\n  .icons {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.user {\n  cursor: default;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  .name {\n    &.me {\n      color: cyan;\n    }\n  }\n\n  .icons {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: flex-end;\n    margin-bottom: $text-shift;\n  }\n}\n\n.users__item {\n  position: relative;\n  padding: 0 $user-item-padding;\n  width: calc(100% - #{$user-item-padding} * 2);\n  overflow-y: auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1.6;\n  @media (max-width: $mobile-width) {\n    justify-content: space-between;\n    margin-left: 10px;\n  }\n\n  .actions {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n}\n\n.button__procent {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  .text {\n    position: relative;\n  }\n\n  @supports (-moz-appearance: none) {\n    .text {\n      margin-top: 5px;\n    }\n  }\n}\n","@import '../../Global.module';\n\n.wrapper {\n  position: relative;\n  padding: $crown-padding;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  input {\n    cursor: pointer;\n  }\n\n  label {\n    margin-top: $text-shift;\n    margin-left: 5px;\n  }\n}\n","@import '../../Main';\n\n$border-radius: 8px;\n$block-padding: 0.2rem;\n\n.wrapper {\n  opacity: 0;\n  z-index: 101;\n  position: fixed;\n  bottom: calc((#{$button-width}) * -1 - 10px);\n  min-width: 300px;\n  right: calc(#{$button-width} / 2 + 1rem);\n  min-height: $button-width;\n  display: flex;\n  padding: $block-padding;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: $border-radius;\n  box-shadow: -2px -2px $border-radius rgb(0 0 0 / 30%);\n  font-size: large;\n  transition: all $alert-transition ease-in;\n\n  .text {\n    position: relative;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n  @media (max-width: $mobile-width) {\n    width: calc(100vw - #{$block-padding} - #{$block-padding} * 2);\n    right: 0;\n  }\n\n  &.open {\n    opacity: 1;\n    bottom: calc(#{$button-width} / 2);\n    transition: all $alert-transition ease-out;\n  }\n}\n","@import './Main';\n\n.wrapper {\n  overflow: hidden;\n}\n\n.button {\n  z-index: 100;\n  cursor: pointer;\n  border-radius: 25%;\n  width: $button-width;\n  height: $button-width;\n  font-size: x-small;\n  position: fixed;\n  left: calc((#{$button-width} / 2 * -1) + #{$wrapper-width});\n  bottom: calc(#{$button-width} / 2);\n  margin: auto;\n  border: none;\n  transition: left $container-transition ease-in;\n\n  &.active {\n    left: calc((#{$button-width} / 2 * -1));\n    transition: left $container-transition ease-out;\n  }\n\n  @media (max-width: $mobile-width) {\n    bottom: calc(#{$button-width} / 2 + 83vh);\n  }\n}\n\n.button__icon {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  &.active {\n    justify-content: flex-end;\n  }\n}\n"],"names":[],"sourceRoot":""}