// ::ng-deep emoji-picker {
//   position: absolute;
//   bottom: 200px;
//   right: 20px;
// }

// .header {
//   display: flex;
//   justify-content: space-between;
//   background: #0e122f;
//   align-items: center;
//   border-bottom: solid 1px #1d1e32;
//   box-sizing: border-box;

//   .title {
//     color: #a3a0d5;
//     font-size: 17px;
//     font-weight: 600;
//     padding: 15px;
//     display: flex;
//     align-items: center;

//     mat-icon {
//       padding-right: 5px;
//       cursor: pointer;
//     }
//   }

//   .control {
//     display: flex;
//     color: #9061e9;
//     font-size: 16px;
//     font-weight: 600;

        .icons {
      display: flex;
      align-items: center;
      padding: 0 17px;
      cursor: pointer;

      mat-icon {
        padding-right: 10px;
        color: #FF0000;
      }

      span {
        color: #fff;
      }

      // .unmute {
      //   color: #f050ac;
      // }
    }

//     .icons {
//       display: flex;
//       align-items: center;
//       padding: 0 17px;
//       cursor: pointer;

//       mat-icon {
//         padding-right: 10px;
//         color: #9061e9;
//       }

//       img {
//         padding-right: 10px;
//         cursor: pointer;
//       }

//       span {
//         color: #8069c1;
//       }

//       .unmute {
//         color: #f050ac;
//       }
//     }

//     .icons1 {
//       border-left: 1px solid #1d1e32;
//       border-right: 1px solid #1d1e32;
//       padding: 0 17px;
//     }
//   }

//   .logo {
//     img {
//       width: 50px;
//     }
//   }
// }

// .section {
//   width: 100%;
//   display: flex;
//   height: calc(100vh - 56px);

//   .video-section {
//     width: 75%;

//     .video-list {
//       height: calc(100vh - 56px);
//       overflow-y: scroll;
//     }
//   }

//   .video-section-full {
//     width: 100%;
//   }

//   .chat-section {
//     width: 25%;
//     background: #0e122f;
//     border: solid 1px #1d1e32;
//     box-sizing: border-box;

//     .drop {
//       background: #1c1f42;
//       color: #a3a0d5;
//       display: flex;
//       justify-content: space-between;
//       padding: 10px;
//       font-weight: 600;
//       margin-bottom: 5px;
//       cursor: pointer;
//     }

//     .active-drop {
//       background: #4b3891;
//     }

//     .attenndees {
//       height: calc(100vh - 200px);
//       overflow: auto;
//       scrollbar-width: thin;
//       scrollbar-color: #645c95db #00041a;

//       .chat {
//         padding: 10px;
//         border-bottom: solid 1px #1d1e32;

//         .user {
//           display: flex;
//           justify-content: space-between;

//           span {
//             color: #4a4b6a;
//           }

//           .image {
//             display: flex;
//             align-items: center;

//             .live {
//               position: relative;

//               span {
//                 width: 8px;
//                 height: 8px;
//                 border-radius: 100%;
//                 background: #51568a;
//                 border: 3px solid #070b25;
//                 display: block;
//                 position: absolute;
//                 right: 2px;
//                 top: 15px;
//               }

//               .activeUser {
//                 background: green;
//               }
//             }

//             span {
//               color: #9061e9;
//               font-weight: 600;
//             }

//             .presenter-color {
//               color: #f050ac;
//             }

//             .presenter {
//               background: #2b2358;
//               padding: 1px 10px;
//               border-radius: 15px;
//               margin-left: 10px;
//               color: #8559d8;
//               font-size: 12px;
//             }

//             img {
//               width: 25px;
//               border-radius: 50%;
//               margin-right: 10px;
//             }
//           }
//         }

//         .mute {
//           mat-icon {
//             color: #8559d8;
//             cursor: pointer;
//           }

//           .off {
//             color: #353160;
//           }
//         }

//         .user_logs {
//           text-align: center;
//           position: relative;

//           span {
//             padding: 5px 15px;
//             font-size: 10px;
//             font-weight: 600;
//             background: #1c1f42;
//             border-radius: 15px;
//             color: #a3a0d5;
//           }
//         }

//         .message {
//           padding-top: 10px;

//           span {
//             color: #9797bb;
//             font-weight: 600;
//           }
//         }
//       }
//     }

//     .type {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       background: #1c1f42;
//       position: absolute;
//       bottom: 0;
//       right: 0;
//       width: 25%;
//       padding: 13px;
//       box-sizing: border-box;

//       mat-icon {
//         color: #989aaf;
//         margin-right: 10px;
//       }

//       img {
//         cursor: pointer;
//         position: absolute;
//         right: 10px;
//       }

//       input {
//         height: 20px;
//         background: #0000;
//         outline: none;
//         border: none;
//         color: #a3a0d5;

//         &::-webkit-input-placeholder {
//           color: #a3a0d5;
//         }
//       }
//     }

//     .oflow {
//       height: calc(100vh - 200px);
//       overflow: auto;
//       scrollbar-width: thin;
//       scrollbar-color: #645c95db #00041a;

//       .chat {
//         padding: 10px;
//         border-bottom: solid 1px #1d1e32;

//         .user {
//           display: flex;
//           justify-content: space-between;

//           span {
//             color: #4a4b6a;
//           }

//           .image {
//             display: flex;
//             align-items: center;

//             .live {
//               position: relative;

//               span {
//                 width: 8px;
//                 height: 8px;
//                 border-radius: 100%;
//                 background: #51568a;
//                 border: 3px solid #070b25;
//                 display: block;
//                 position: absolute;
//                 right: 2px;
//                 top: 15px;
//               }

//               .activeUser {
//                 background: green;
//               }
//             }

//             span {
//               color: #9061e9;
//               font-weight: 600;
//             }

//             .presenter-color {
//               color: #f050ac;
//             }

//             .presenter {
//               background: #2b2358;
//               padding: 1px 10px;
//               border-radius: 15px;
//               margin-left: 10px;
//               color: #8559d8;
//               font-size: 12px;
//             }

//             img {
//               width: 25px;
//               border-radius: 50%;
//               margin-right: 10px;
//             }
//           }
//         }

//         .mute {
//           mat-icon {
//             color: #8559d8;
//             cursor: pointer;
//           }

//           .off {
//             color: #353160;
//           }
//         }

//         .user_logs {
//           text-align: center;
//           position: relative;

//           span {
//             padding: 5px 15px;
//             font-size: 10px;
//             font-weight: 600;
//             background: #1c1f42;
//             border-radius: 15px;
//             color: #a3a0d5;
//           }
//         }

//         .message {
//           padding-top: 10px;

//           span {
//             color: #9797bb;
//             font-weight: 600;
//           }
//         }
//       }
//     }

//     .chat-attendee-open {
//       height: calc(100vh - 64vh);
//     }
//   }

//   .full-screen {
//     display: none;
//   }
// }

// .cutome-modal {
//   z-index: 1000;
//   position: fixed;
//   left: 0;
//   top: 0;
//   width: 100%;
//   height: 100%;
//   background-color: #050523ab;

//   .cutome-modal-content {
//     position: absolute;
//     outline: 0;
//     width: 50%;
//     background: #1b1f48;
//     border: 1px solid #353c7d;
//     border-radius: 10px;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);

//     .modal-header {
//       padding: 20px;
//       display: flex;
//       border-top-left-radius: 5px;
//       border-top-right-radius: 5px;
//       justify-content: space-between;

//       p {
//         font-size: 20px;
//         font-weight: 600;
//         letter-spacing: 0.5px;
//         color: #d7779b;
//         margin: 0;

//         mat-icon {
//           font-size: 15px;
//         }
//       }

//       span {
//         color: #7773a8;
//         cursor: pointer;
//         position: absolute;
//         right: 12px;
//         top: 12px;
//       }
//     }

//     .modal-body {
//       padding: 0 20px;
//       overflow-y: auto;
//       max-height: 450px;
//       overflow-x: hidden;
//       scrollbar-width: thin;
//       scrollbar-color: #343560 #090f2f;

//       &::-webkit-scrollbar {
//         width: 2px;
//         height: 5px;
//         cursor: pointer;
//       }

//       &::-webkit-scrollbar-track {
//         background-color: transparent;
//       }

//       &::-webkit-scrollbar-thumb {
//         -webkit-border-radius: 0;
//         border-radius: 0;
//         background: #766daa66;
//       }

//       .example-form {

//         .formwrapper>div input,
//         .formwrapper>div select,
//         .formwrapper>div textarea {
//           background: #1a1e47;
//           border: 1px solid #595690;
//           border-radius: 4px;
//           padding: 10px;
//         }

//         .formwrapper>div select {
//           width: 100%;
//           color: #9b94d5;
//           width: calc(100% - 20px);
//           -moz-appearance: none;
//           -webkit-appearance: none;
//           appearance: none;
//         }

//         input {
//           background: #1a1e47;
//           border: 1px solid #595690;
//           border-radius: 4px;
//           padding: 10px;
//           width: calc(100% - 20px);
//           color: #a099da;

//           &:disabled {
//             opacity: 0.4;
//           }
//         }
//       }

//       .table-div {
//         margin-bottom: 20px;

//         table {
//           font-family: arial, sans-serif;
//           border-collapse: collapse;
//           width: 100%;
//         }

//         tr {
//           th {
//             background: #161c40;
//           }
//         }

//         td,
//         th {
//           border: 1px solid #968bdb;
//           text-align: left;
//           padding: 8px;
//         }
//       }
//     }

//     .modal-footer {
//       padding: 15px 20px;
//       display: flex;
//       margin-top: 10px;
//       align-items: center;
//       border-top: 1px solid #353c7d;
//       justify-content: flex-end;

//       button {
//         margin: 0 5px;
//         min-width: 90px;
//       }
//     }
//   }
// }

// .cutome-modal .cutome-modal-content .modal-footer button {
//   margin: 0 5px;
//   min-width: 90px;
// }

// .cancel-btn {
//   padding: 7px 15px;
//   border-radius: 30px;
//   border: 1px solid #766daa;
//   color: #766daa;
//   background: none;
//   transition: all 0.5s;
//   cursor: pointer;
// }

// .cutome-modal .cutome-modal-content .modal-footer button {
//   margin: 0 5px;
//   min-width: 90px;
// }

// .select-box {
//   margin-bottom: 20px;
// }

// .submit-btn {
//   background: linear-gradient(47deg, #ee4c7e, #ee8250);
//   border: none;
//   padding: 8px 15px;
//   border-radius: 30px;
//   color: #fff;
//   letter-spacing: 0.5px;
//   cursor: pointer;
//   margin: 10px 0;
//   transition: all 0.5s;
// }

// @media screen and (min-width: 768px) and (max-width: 992px) {
//   .section {
//     height: calc(100vh - 76px);

//     .video-section {
//       .video-list {
//         height: calc(100vh - 76px);
//       }
//     }

//     .chat-section {
//       .chat-attendee-open {
//         height: calc(100vh - 65vh);
//       }
//     }
//   }
// }

// @media screen and (max-width: 768px) {
//   .header {
//     .control {
//       .icons {
//         padding: 0 10px;

//         span {
//           display: none;
//         }
//       }

//       .icons1 {
//         padding: 0 0px;
//       }
//     }

//     .logo {
//       position: absolute;

//       img {
//         width: 50px;
//       }
//     }

//     .title {
//       font-size: 15px;

//       mat-icon {
//         padding-right: 12px;
//       }
//     }
//   }

//   .section {
//     flex-direction: column;

//     .video-section {
//       width: 100%;

//       .video-list {
//         height: calc(100vh - 202px);
//       }
//     }

//     .chat-section {
//       width: 100%;
//       background: #0e122f;
//       border: solid 1px #1d1e32;

//       .type {
//         width: 100%;
//         box-shadow: 1px 0px 32px -13px #a64cd7;
//         position: fixed;
//       }

//       .oflow {
//         height: calc(100vh - 395px);
//       }

//       .attenndees {
//         height: calc(100vh - 395px);
//       }

//       .active-drop~.second-drop {
//         margin-bottom: 50px;
//       }
//     }
//   }

//   ::ng-deep .swal2-popup {
//     width: 100% !important;
//   }

//   .video-section-full {
//     .landscape-video {
//       position: absolute;
//       width: 100%;
//       height: auto;
//       z-index: -1;
//       visibility: visible;
//       top: 50%;
//       right: 0;
//       left: 0;
//       bottom: 0;
//       object-fit: cover;
//       transform: translate(0px, -50%);

//       @media screen and (orientation: landscape) {
//         transform: translate(0px, -58%);
//         height: 100vh;
//       }
//     }
//   }

//   .rotation {
//     @media screen and (orientation: landscape) {
//       position: absolute;
//       bottom: 0;
//       left: 0;
//       right: 0;
//     }
//   }
// }

// .landscape-video {
//   width: 100%;
//   height: 100%;
//   visibility: visible;
// }