react_hsbc_teller 2.0.7 → 2.0.8-5.1

package/packages/pages/video/video.less

@@ -1,635 +1,725 @@
-.publishVideo1{
-  width: 100px;
-  height: 100px
-}
-.mixedvideo{
-  display: none;
-  position:absolute;
-  object-fit: cover
-}
-.imgClass{
-  width: 100%;
-  height: 100%;
-  float: right
-}
-.imgClassVoice{
-  width: 25Px;
-  height: 24Px;
-  margin-bottom: 4Px;
-}
-.sharedScreen{
-  font-size: 10px;
-  position: absolute;
-  height: 30px;
-  line-height: 30px;
-  color: red;
-}
-.wrapper {
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 20%;
-  background: #f3f3f3;
-  text-align: center;
-  margin-left: 20px;
-  // display: grid;
-  // grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
-  // grid-template-rows: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
-}
-.isNoVideo{
-  display: none;
-}
-.itemed {
-  text-align: center;
-  // border: 1px solid #fff;
-  color: #fff;
-  font-weight: bold;
-  min-height: 170px;
-  position: relative;
-  background: #333;
-  margin-bottom: 20px;
-  border-radius: 6px;
-}
-.videoFit{
-  object-fit: cover !important;
-}
-// .isBack {
-//   transform: rotateY(180deg);
-//   // background: #333;
-// }
-.video1{
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-.videoTab{
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border-radius: 6px;
-}
-.video{
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-.video1Div{
-  width: 100%;
-  height: 100%;
-}
-.health{
-  padding: 20Px;
-  background: #f0f0f0;
-}
-.healthVideo{
-  height:  ~"calc(100vh - 12.9125rem)";
-  width: 100%;
-  display: inline-flex;
-}
-.all{
-  height: 100%
-}
-.ownClass{
-  height: calc(100vh - 15px);
-  object-fit: cover;
-  width: 100%;
-}
-.publishVideoClass{
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-.publishVideoDiv{
-  height: 100%;
-  width: 100%;
-  border-radius: 6px;
-}
-.invitationSpan{
-  margin-top: 5px;
-  margin-right: 15px;
-  float: right;
-  height: 37px !important;
-  width: 80px !important;
-  font-size: 16px !important;
-  border: 1px #3E505D solid!important;
-  background: #3E505D !important;
-  color: #fff!important;
-}
-.inputClick{
-  width: 65%;
-  height: 46px;
-  border-radius: 2px;
-  // border: 0px;
-  outline: none;
-  font-size: 17px;
-  padding: 0 5px;
-  border: 1px #707070 solid;
-}
-.modalSpan{
-  margin-right: 20px;
-  font-size: 17px;
-  color: #666666;
-}
-.invitationImg{
-  width: 20px;
-  height: 20px;
-}
-.invitationButton{
-  color: #1a9adc !important;
-  border: none !important;
-  background: #fff !important;
-}
-.invitationDiv{
-  margin-left: 40px;
-  margin-bottom: 15px;
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-}
-}
-.faceImg{
-  width: 60%;
-  margin-bottom: 20Px;
-}
-.faceBody{
-  text-align: center;
-  height: 100%;
-  width: ~"calc(100% - 150px)";
-  .faceCardImg{
-    // height: 100%;
-  }
-  .resuleCard{
-    text-align: -webkit-left;
-    padding: 0Px 2Px;
-    div{
-      font-size: 13Px;
-      color: #646464;
-      margin: 10Px 20Px;
-      input{
-        border: #DCDCDC 1px solid;
-        width: 15rem;
-        height: 2rem;
-        line-height: 2rem;
-        margin-left: 15px;
-      }
-      span{
-        display: inline-block;
-        min-width: 5rem;
-      }
-    }
-  }
-}
-.content{
-  height: 200px;
-  border-radius: 4px;
-  border:1px dashed  #DDDDDD;
-  margin: 24px;
-  margin-bottom: 3rem;
-  flex:1;
-  
-}
-.ant-spin-nested-loading,.ant-spin-container{
-  height: 100%;
-}
-.projection{
-  width: 80%;
-  position: relative;
-  // background: #fff;
-  color: #333;
-  border-radius: 0 4px 4px 4px;
-  text-align: left;
-  // height:  ~"calc(100vh - 130px)";
-  // position: absolute;
-  // z-index: 1;
-  // background: #fff;
-  .videoDiv{
-    width: 100%;
-    height: 100%;
-    .video{
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.65);
-    }
-  }
-}
-.customerTitle{
-  background: rgba(0, 0, 0, 0.65);
-  display: inline-flex;
-  position: absolute;
-  align-items: center;
-  // top: 0;
-  left: 10px;
-  // width: 80px;
-  line-height: 40px;
-  
-  bottom: 10px;
-  height: 40px;
-  // background: rgba(219, 0, 17, 0.1);
-  border-radius: 4px;
-  // transform: rotateY(180deg);
-  // color: #DB0011;
-  // font-size: 14px;
-}
-.tellerTitle{
-  background: rgba(0, 0, 0, 0.65);
-  display: inline-flex;
-  position: absolute;
-  // top: 0;
-  left: 10px;
-  // width: 80px;
-  line-height: 40px;
-  
-  bottom: 10px;
-  height: 40px;
-  // background: rgba(219, 0, 17, 0.1);
-  border-radius: 4px;
-  // transform: rotateY(180deg);
-  // color: #DB0011;
-  font-size: 14px;
-}
-.titleBig{
-  max-width: 30%;
-}
-.titleSamlle{
-  max-width: 70%;
-}
-.titleName{
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  padding-right: 10px;
-}
-.themeClass{
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  width: 500px;
-  height: 300px;
-  font-size: 22px;
-    color: #222222;
-    font-weight: 600;
-  ul{
-    li{ 
-      list-style: none;
-      margin: 21px 0;
-      text-align: left;
-      span{
-        font-size: 20px;
-        width: 143px;
-        text-align: left;
-        display: inline-block;
-      }
-      .labelClass{
-        font-size: 16px;
-        text-align: left;
-        display: inline-block;
-      }
-    }
-  }
-}
-.button{
-  display: inline-flex;
-  // width: 100%;
-  // position: absolute;
-  // z-index: 1;
-  // top: 0;
-  // left: 0;
-  .selectSee{
-    max-width: 8rem;
-    height: 32px;
-    text-align: center;
-    background: #303D46;
-    border-radius: 0 0 0.104167rem 0.104167rem;
-    border: 0.052083rem solid #303D46;
-    color: #ffffff;
-    font-size: 14px;
-  }
-  .noSelest{
-    max-width: 8rem;
-    height: 32px;
-    text-align: center;
-    background: #D7D8D6;
-    border-radius: 0 0 0.104167rem 0.104167rem;
-    border: 0.052083rem solid #D7D8D6;
-    color: #303D46;
-    font-size: 14px;
-  }
-  div{
-    font-size: 16px;
-    color: #FFFFFF;
-    padding: 6px 13px;
-  }
-}
-.envClass {
-  margin-bottom: 0;
-  padding-left: 1.25rem;
-}
-.ant-collapse > .ant-collapse-item > .ant-collapse-header{
-  font-weight: bold;
-}
-.ant-collapse > .ant-collapse-item.panel-error > .ant-collapse-header{
-  color: red;
-}
-.voiceClass{
-  width: 25Px;
-  height: 25.3Px;
-  margin-bottom: 1Px;
-}
-.cameraAnMicrophone{
-  margin: 10px 20px;
-}
-.ant-modal-header{
-  // padding: 36px 30px 30px 30px !important;
-  border-bottom: none !important;
-}
-.ant-modal-body{
-  padding: 0 !important;
-}
-.ant-modal-title{
-  font-size: 22px !important;
-  color: #333333 !important;
-}
-.ant-modal-footer {
-  margin-top: 0px!important;
-  // padding: 0px 0px 0px!important;
-}
-
-.modelButtonCancel{
-  width: 100px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #333!important;
-  border: 1px #333 solid!important;
-  background: #fff!important;
-  border-spacing: 20px!important;
-}
-.modelNoButton{
-  margin-left: 10px;
-}
-.modelButtonCancelOne{
-  width: 170px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #5C5C5C!important;
-  border: 1px #5C5C5C solid!important;
-  border-spacing: 20px!important;
-  background: #d9d9d9!important;
-}
-.modelButtonOkInvitation{
-  width: 170px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #ffffff!important;
-  border: 1px #DB0011 solid!important;
-  background: #DB0011!important;
-  border-spacing: 20px!important;
-}
-.modelButtonOk{
-  width: 100px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #ffffff!important;
-  border: 1px #DB0011 solid!important;
-  background: #DB0011!important;
-  border-spacing: 20px!important;
-}
-.modelButtonNo{
-  width: 100px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #5C5C5C!important;
-  border: 1px #5C5C5C solid!important;
-  background: #d9d9d9!important;
-  border-spacing: 20px!important;
-}
-.modelButtonFaceOk{
-  width: 170px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #333!important;
-  border: 1px #333 solid!important;
-  background: #fff!important;
-  border-spacing: 20px!important;
-}
-.modelButtonFaceOkColor{
-  min-width: 170px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #ffffff!important;
-  border: 1px #DB0011 solid!important;
-  background: #DB0011!important;
-  border-spacing: 20px!important;
-}
-.modelButtonFaceOkColorFile{
-  width: 170px!important;
-  height: 40px!important;
-  font-size: 16px!important;
-  color: #5C5C5C!important;
-  border: 1px #5C5C5C solid!important;
-  background: #d9d9d9!important;
-  border-spacing: 20px!important;
-}
-.endModal{
-  font-size: 16px;
-    padding: 56px 30px 0px 30px;
-    color: #333333;
-}
-.inspection{
-  font-size: 16px;
-  margin: 20px 50px;
-}
-.CustomerSelectTitle{
-  margin-bottom: 10px;
-}
-.errorClassName{
-    .ant-message-notice-content{
-      min-width: 500px;
-      min-height: 44px;
-      background: #F9F2F3;
-      border: 1px #E5B2B5 solid;
-      font-size: 16px;
-      color: #252525;
-      text-align: center;
-      padding: 7px;
-    }
-  
-    img{
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      margin-bottom: 3px;
-    }
-  
-}
-.successClassName{
-  .ant-message-notice-content{
-    min-width: 500px;
-    height: 44px;
-    background: #E5F2F2;
-    border: 1px #99CECC solid;
-    font-size: 16px;
-    color: #252525;
-    text-align: center;
-    padding: 7px;
-  }
-
-  img{
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-    margin-bottom: 3px;
-  }
-
-}
-.errorClassFace{
-  min-width: 350px;
-      min-height: 44px;
-      background: #F9F2F3;
-      border: 1px #E5B2B5 solid;
-      font-size: 16px;
-      color: #252525;
-      text-align: center;
-      padding: 7px;
-  
-    img{
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      margin-bottom: 3px;
-    }
-}
-.videoErrorClass{
-  height: 60px;
-  margin: 15px;
-}
-.successClassFace{
-    min-width: 350px;
-    height: 44px;
-    background: #E5F2F2;
-    border: 1px #99CECC solid;
-    font-size: 16px;
-    color: #252525;
-    text-align: center;
-    padding: 7px;
-
-  img{
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-    margin-bottom: 3px;
-  }
-
-}
-.radio {
-  position: relative;
-  display: inline-block;
-  font-weight: 400;
-  padding-left: 25px;
-  text-align: left;
-  width: 100%;
-  display: flex;
-}
-
-.radio input {
-  position: absolute;
-  left: -9999px;
-}
-
-.radio i {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 2px;
-  width: 12px;
-  height: 12px;
-  transform: translateY(-50%);
-  outline: 0;
-  border: 1px solid rgb(133, 133, 133);
-  background: transparent;
-  border-radius: 50%;
-  transition: border-color .3s;
-  -webkit-transition: border-color .3s;
-  box-sizing: content-box;
-}
-
-.radio input+i:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  width: 50%;
-  height: 50%;
-  border-radius: 50%;
-  background-color: #269792;
-  // border: 1px solid #269792;
-  opacity: 0;
-  transition: opacity .1s;
-  -webkit-transition: opacity .1s;
-  box-sizing: content-box;
-}
-
-.radio input:checked+i:after {
-  opacity: 1;
-}
-.errorClassInvitationColor{
-  background: #F9F2F3;
-  border: 1px #E5B2B5 solid;
-}
-.errorClassInvitation{
-  width: 90%;
-  height: 50px;
-  margin: 50px 30px 0px;
-    img{
-      margin: 15px 20px;
-      width: 18px;
-    height: 18px;
-    }
-}
-.linkClass{
-  margin: 20px 40px;
-  font-size: 14px;
-  word-break: break-all;
-}
-.speakerTitle{
-  color: red;
-}
-.selectCustomer{
-  font-size: 16px;
-margin: 20Px 40px;
-}    
-.faceImgCard{
-  width: 25rem;
-  margin-bottom: 10px;
-  height: 13.5rem;
-}
-.faceImgCardTwo{
-  margin-bottom: 0px !important;
-}
-.titleDiv{
-  font-size: 1.2rem;
-  margin: 10px 0;
-}
-.videoListClass{
-  align-content: flex-start;
-flex-wrap: wrap;
-display: inline-flex;
-}
-.videoMinutuListClass{
-  width: 50%;
-}
-.videoMinutuClass{
-  width: 100%;
-}
-.imgDIV{
-  margin: 0 !important;
-  text-align:center;
+.publishVideo1{
+  width: 100px;
+  height: 100px
+}
+.mixedvideo{
+  display: none;
+  position:absolute;
+  object-fit: cover
+}
+.imgClass{
+  width: 100%;
+  height: 100%;
+  float: right
+}
+.imgClassVoice{
+  width: 25Px;
+  height: 24Px;
+  margin-bottom: 4Px;
+}
+.sharedScreen{
+  font-size: 10px;
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  color: red;
+}
+.wrapper {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 20%;
+  background: #f3f3f3;
+  text-align: center;
+  margin-left: 20px;
+  // display: grid;
+  // grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
+  // grid-template-rows: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
+}
+.isNoVideo{
+  display: none;
+}
+.itemed {
+  text-align: center;
+  // border: 1px solid #fff;
+  color: #fff;
+  font-weight: bold;
+  min-height: 170px;
+  position: relative;
+  background: #333;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+.videoFit{
+  object-fit: cover !important;
+}
+// .isBack {
+//   transform: rotateY(180deg);
+//   // background: #333;
+// }
+.video1{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+.videoTab{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 6px;
+}
+.video{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+.video1Div{
+  width: 100%;
+  height: 100%;
+}
+.health{
+  padding: 20Px;
+  background: #f0f0f0;
+}
+.healthVideo{
+  height:  ~"calc(100vh - 12.9125rem)";
+  width: 100%;
+  display: inline-flex;
+}
+.all{
+  height: 100%
+}
+.ownClass{
+  height: calc(100vh - 15px);
+  object-fit: cover;
+  width: 100%;
+}
+.publishVideoClass{
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+.publishVideoDiv{
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+}
+.invitationSpan{
+  margin-top: 5px;
+  margin-right: 15px;
+  float: right;
+  height: 37px !important;
+  width: 80px !important;
+  font-size: 16px !important;
+  border: 1px #3E505D solid!important;
+  background: #3E505D !important;
+  color: #fff!important;
+}
+.inputClick{
+  width: 65%;
+  height: 46px;
+  border-radius: 2px;
+  // border: 0px;
+  outline: none;
+  font-size: 17px;
+  padding: 0 5px;
+  border: 1px #707070 solid;
+}
+.modalSpan{
+  margin-right: 20px;
+  font-size: 17px;
+  color: #666666;
+}
+.invitationImg{
+  width: 20px;
+  height: 20px;
+}
+.invitationButton{
+  color: #1a9adc !important;
+  border: none !important;
+  background: #fff !important;
+}
+.invitationDiv{
+  margin-left: 40px;
+  margin-bottom: 15px;
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+}
+.faceImg{
+  width: 60%;
+  margin-bottom: 20Px;
+}
+.faceBody{
+  text-align: center;
+  height: 100%;
+  width: ~"calc(100% - 150px)";
+  .faceCardImg{
+    // height: 100%;
+  }
+  .resuleCard{
+    text-align: -webkit-left;
+    padding: 0Px 2Px;
+    div{
+      font-size: 13Px;
+      color: #646464;
+      margin: 10Px 20Px;
+      input{
+        border: #DCDCDC 1px solid;
+        width: 15rem;
+        height: 2rem;
+        line-height: 2rem;
+        margin-left: 15px;
+      }
+      span{
+        display: inline-block;
+        min-width: 5rem;
+      }
+    }
+  }
+}
+.content{
+  height: 200px;
+  border-radius: 4px;
+  border:1px dashed  #DDDDDD;
+  margin: 24px;
+  margin-bottom: 3rem;
+  flex:1;
+  
+}
+.ant-spin-nested-loading,.ant-spin-container{
+  height: 100%;
+}
+.projection{
+  width: 80%;
+  position: relative;
+  // background: #fff;
+  color: #333;
+  border-radius: 0 4px 4px 4px;
+  text-align: left;
+  // height:  ~"calc(100vh - 130px)";
+  // position: absolute;
+  // z-index: 1;
+  // background: #fff;
+  .videoDiv{
+    width: 100%;
+    height: 100%;
+    .video{
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+.customerTitle{
+  background: rgba(0, 0, 0, 0.65);
+  display: inline-flex;
+  position: absolute;
+  align-items: center;
+  // top: 0;
+  left: 10px;
+  // width: 80px;
+  line-height: 40px;
+  
+  bottom: 10px;
+  height: 40px;
+  // background: rgba(219, 0, 17, 0.1);
+  border-radius: 4px;
+  // transform: rotateY(180deg);
+  // color: #DB0011;
+  // font-size: 14px;
+}
+.tellerTitle{
+  background: rgba(0, 0, 0, 0.65);
+  display: inline-flex;
+  position: absolute;
+  // top: 0;
+  left: 10px;
+  // width: 80px;
+  line-height: 40px;
+  
+  bottom: 10px;
+  height: 40px;
+  // background: rgba(219, 0, 17, 0.1);
+  border-radius: 4px;
+  // transform: rotateY(180deg);
+  // color: #DB0011;
+  font-size: 14px;
+}
+.titleBig{
+  max-width: 30%;
+}
+.titleSamlle{
+  max-width: 70%;
+}
+.titleName{
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-right: 10px;
+}
+.themeClass{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 500px;
+  height: 300px;
+  font-size: 22px;
+    color: #222222;
+    font-weight: 600;
+    transform: translateX(-100px);
+  ul{
+    li{ 
+      list-style: none;
+      margin: 21px 0;
+      text-align: left;
+      span{
+        font-size: 20px;
+        width: 143px;
+        text-align: left;
+        display: inline-block;
+      }
+      .labelClass{
+        font-size: 16px;
+        text-align: left;
+        display: inline-block;
+      }
+    }
+  }
+}
+.button{
+  display: inline-flex;
+  // width: 100%;
+  // position: absolute;
+  // z-index: 1;
+  // top: 0;
+  // left: 0;
+  .selectSee{
+    max-width: 8rem;
+    height: 32px;
+    text-align: center;
+    background: #303D46;
+    border-radius: 0 0 0.104167rem 0.104167rem;
+    border: 0.052083rem solid #303D46;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .noSelest{
+    max-width: 8rem;
+    height: 32px;
+    text-align: center;
+    background: #D7D8D6;
+    border-radius: 0 0 0.104167rem 0.104167rem;
+    border: 0.052083rem solid #D7D8D6;
+    color: #303D46;
+    font-size: 14px;
+  }
+  div{
+    font-size: 16px;
+    color: #FFFFFF;
+    padding: 6px 13px;
+  }
+}
+.envClass {
+  margin-bottom: 0;
+  padding-left: 1.25rem;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+  font-weight: bold;
+}
+.ant-collapse > .ant-collapse-item.panel-error > .ant-collapse-header{
+  color: #DA0110;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box{
+  padding-top: 0 !important;
+}
+.ant-collapse-header{
+  img{
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+    margin-bottom: 1px;
+  }
+}
+.voiceClass{
+  width: 25Px;
+  height: 25.3Px;
+  margin-bottom: 1Px;
+}
+.cameraAnMicrophone{
+  margin: 10px 20px;
+}
+.ant-modal-header{
+  // padding: 36px 30px 30px 30px !important;
+  border-bottom: none !important;
+}
+.ant-modal-body{
+  padding: 0 !important;
+}
+.ant-modal-title{
+  font-size: 22px !important;
+  color: #333333 !important;
+}
+.ant-modal-footer {
+  margin-top: 0px!important;
+  // padding: 0px 0px 0px!important;
+}
+
+.modelButtonCancel{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #333!important;
+  border: 1px #333 solid!important;
+  background: #fff!important;
+  border-spacing: 20px!important;
+}
+.modelNoButton{
+  margin-left: 10px;
+}
+.modelButtonCancelOne{
+  width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  border-spacing: 20px!important;
+  background: #d9d9d9!important;
+}
+.modelButtonOkInvitation{
+  width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #ffffff!important;
+  border: 1px #DB0011 solid!important;
+  background: #DB0011!important;
+  border-spacing: 20px!important;
+}
+.modelButtonOk{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #ffffff!important;
+  border: 1px #DB0011 solid!important;
+  background: #DB0011!important;
+  border-spacing: 20px!important;
+}
+.modelButtonNo{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  background: #d9d9d9!important;
+  border-spacing: 20px!important;
+}
+.modelButtonFaceOk{
+  width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #333!important;
+  border: 1px #333 solid!important;
+  background: #fff!important;
+  border-spacing: 20px!important;
+}
+.modelButtonFaceOkColor{
+  min-width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #ffffff!important;
+  border: 1px #DB0011 solid!important;
+  background: #DB0011!important;
+  border-spacing: 20px!important;
+}
+.modelButtonFaceOkColorFile{
+  min-width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  background: #d9d9d9!important;
+  border-spacing: 20px!important;
+}
+.endModal{
+  font-size: 16px;
+    padding: 56px 30px 0px 30px;
+    color: #333333;
+}
+.ipadModal{
+  font-size: 16px;
+  padding: 36px 30px 0px 30px;
+  color: #333333;
+}
+.ipadModal .ant-modal-body{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.ipadCode{
+  margin-top: 16px;
+  margin-bottom: 16px;
+  margin-left: 30px;
+  position: relative;
+}
+.inspection{
+  font-size: 16px;
+  margin: 20px 50px;
+}
+.CustomerSelectTitle{
+  margin-bottom: 10px;
+}
+.errorClassName{
+    .ant-message-notice-content{
+      min-width: 500px;
+      min-height: 44px;
+      background: #F9F2F3;
+      border: 1px #E5B2B5 solid;
+      font-size: 16px;
+      color: #252525;
+      text-align: center;
+      padding: 7px;
+    }
+  
+    img{
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      margin-bottom: 3px;
+    }
+  
+}
+.successClassName{
+  .ant-message-notice-content{
+    min-width: 500px;
+    height: 44px;
+    background: #E5F2F2;
+    border: 1px #99CECC solid;
+    font-size: 16px;
+    color: #252525;
+    text-align: center;
+    padding: 7px;
+  }
+
+  img{
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+    margin-bottom: 3px;
+  }
+
+}
+.errorClassFace{
+  min-width: 350px;
+      min-height: 44px;
+      background: #F9F2F3;
+      border: 1px #E5B2B5 solid;
+      font-size: 16px;
+      color: #252525;
+      text-align: center;
+      padding: 7px;
+  
+    img{
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      margin-bottom: 3px;
+    }
+}
+.videoErrorClass{
+  height: 60px;
+  margin: 15px;
+}
+.successClassFace{
+    min-width: 350px;
+    height: 44px;
+    background: #E5F2F2;
+    border: 1px #99CECC solid;
+    font-size: 16px;
+    color: #252525;
+    text-align: center;
+    padding: 7px;
+
+  img{
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+    margin-bottom: 3px;
+  }
+
+}
+.radio {
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  padding-left: 25px;
+  text-align: left;
+  width: 100%;
+  display: flex;
+}
+
+.radio input {
+  position: absolute;
+  left: -9999px;
+}
+
+.radio i {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  outline: 0;
+  border: 1px solid rgb(133, 133, 133);
+  background: transparent;
+  border-radius: 50%;
+  transition: border-color .3s;
+  -webkit-transition: border-color .3s;
+  box-sizing: content-box;
+}
+
+.radio input+i:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background-color: #269792;
+  // border: 1px solid #269792;
+  opacity: 0;
+  transition: opacity .1s;
+  -webkit-transition: opacity .1s;
+  box-sizing: content-box;
+}
+
+.radio input:checked+i:after {
+  opacity: 1;
+}
+.errorClassInvitationColor{
+  background: #F9F2F3;
+  border: 1px #E5B2B5 solid;
+}
+.errorClassInvitation{
+  width: 90%;
+  height: 50px;
+  margin: 50px 30px 0px;
+    img{
+      margin: 15px 20px;
+      width: 18px;
+    height: 18px;
+    }
+}
+.linkClass{
+  margin: 20px 40px;
+  font-size: 14px;
+  word-break: break-all;
+}
+.speakerTitle{
+  color: red;
+}
+.selectCustomer{
+  font-size: 16px;
+margin: 20Px 40px;
+}    
+.faceImgCard{
+  width: 25rem;
+  margin-bottom: 10px;
+  height: 13.5rem;
+}
+.faceImgCardTwo{
+  margin-bottom: 0px !important;
+}
+.titleDiv{
+  font-size: 1.2rem;
+  margin: 10px 0;
+}
+.videoListClass{
+  align-content: flex-start;
+flex-wrap: wrap;
+display: inline-flex;
+}
+.videoMinutuListClass{
+  width: 50%;
+}
+.videoMinutuClass{
+  width: 100%;
+}
+.imgDIV{
+  margin: 0 !important;
+  text-align:center;
+}
+.QRCode{
+  position: absolute;
+  right: -200px;
+  top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .num{
+    background: #DB0011;
+    border-radius: 20px;
+    padding: 0 15px;
+    text-align: center;
+    line-height: 40px;
+    height: 40px;
+    color: white;
+    margin-top: 5px;
+  }
+  .sessionDiv{
+    display: flex;
+    flex-direction: column;
+    span{
+      margin-bottom: 3px;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+  &.flex{
+    position: initial;
+    flex-direction: row;
+    .sessionDiv{
+      margin-left: 20px;
+    }
+    .num{
+      margin-top: 0px;
+      font-weight: 500;
+      font-size: 1rem;
+    }
+  }
+  &.center{
+    position: initial;
+    .ipadCode{
+      margin-left: 0px;
+    }
+    .num{
+      margin-top: 0px;
+      font-weight: 500;
+      font-size: 1rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+body {
+  font-size: 100%;
+}
+.currentDevice{
+  color: #DB0011;
+}
+.sliderClass{
+  width: 70%;
+  margin-left: 1.25rem;
 }