:root {
  --panel-border: 2px solid #f1f1f1 !important;
  --icon-scale: 12;
  --button-scale: 6.4;
  /* Global minimize/maximize visibility/opacity
   * (Used for initial show/fade out of maximize/minimize controls)
  */
  --maximize-minimize-button-visibility: visible;
  --maximize-minimize-button-opacity: 1;
  --side-panel-displacement: 0px;
}

html {
  height: 100%;
}

body {
  font-family: 'Montserrat' !important;
  font-size: 15px;
  height: 100%;
  overflow: hidden;
}

video {
  object-fit: cover;
}

.raisehand-logo-img img {
  height: 92px !important;
  width: 92px !important;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

#sidebar-holder {
  z-index: 1204;
  transition: all .3s
}

#sidebar {
  background: white;
  border-right: var(--panel-border);
  overflow-y: overlay;
  width: 102px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sidebar-item img {
  height: 3.5vh;
  width: 3.5vh;
  max-height: 34px;
  max-width: 34px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sidebar-text {
  font-family: 'Montserrat';
  font-size: 12px;
  font-weight: 600;
  color: #3e3e3e;
}

.sidebar-item {
  z-index: 1000;
  width: 100px;
  margin: 0.5rem 0;
}

.sidebar-item:hover {
  text-decoration: none;
}

.sidebar-item .active {
  color: #ff7407;
}

.preclass .instructor {
  font-size: 12px;
  font-family: 'Roboto Mono';
  font-weight: 700;
  background-color: #ff7407;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

#sidebar-holder ::-webkit-scrollbar {
  width: 5px;
  background: white;
  scrollbar-color: white;
}

/* Track */

#sidebar-holder ::-webkit-scrollbar-track {
  background: white;
  scrollbar-color: white;
}

/* Handle */

#sidebar-holder ::-webkit-scrollbar-thumb {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle on hover */

#sidebar-holder ::-webkit-scrollbar-thumb:hover {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

.settings-box ::-webkit-scrollbar {
  width: 5px;
  background: rgb(190, 185, 185);
  scrollbar-color: grey;
}

/* Track */

.settings-box ::-webkit-scrollbar-track {
  background: rgb(190, 185, 185);
  scrollbar-color: grey;
}

/* Handle */

.settings-box ::-webkit-scrollbar-thumb {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle on hover */

.settings-box ::-webkit-scrollbar-thumb:hover {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

#settings-scroll-container ::-webkit-scrollbar {
  width: 5px;
  background: transparent;
  scrollbar-color: transparent;
}

/* Track */

#settings-scroll-container ::-webkit-scrollbar-track {
  background: transparent;
  scrollbar-color: transparent;
}

/* Handle */

#settings-scroll-container ::-webkit-scrollbar-thumb {
  background: rgb(199, 192, 192);
  scrollbar-color: rgb(199, 192, 192);
}

/* Handle on hover */

#settings-scroll-container ::-webkit-scrollbar-thumb:hover {
  background: rgb(199, 192, 192);
  scrollbar-color: rgb(199, 192, 192);
}

#options-box-scroll ::-webkit-scrollbar {
  width: 5px;
  background: transparent;
  scrollbar-color: white;
}

/* Track */

#options-box-scroll ::-webkit-scrollbar-track {
  background: white;
  scrollbar-color: white;
}

/* Handle */

#options-box-scroll ::-webkit-scrollbar-thumb {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle on hover */

#options-box-scroll ::-webkit-scrollbar-thumb:hover {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

.screen_share_box ::-webkit-scrollbar {
  width: 5px;
  background: white;
  scrollbar-color: white;
}

/* Track */

.screen_share_box ::-webkit-scrollbar-track {
  background: white;
  scrollbar-color: white;
}

/* Handle */

.screen_share_box ::-webkit-scrollbar-thumb {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle on hover */

.screen_share_box ::-webkit-scrollbar-thumb:hover {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

.class-details-section {
  display: inline-block;
  overflow-y: auto;
  width: 37.5%;
}

.class-details-section.small-screen {
  width: 100%;
  overflow-y: initial;
  display: none !important;
}

.class-details-section .light-grey-section {
  background-color: #dcdcdc;
  padding: 7rem 2rem 3rem;
}

.class-details-section .class-details-bottom {
  padding: 2rem 3rem;
}

.class-details-section .class-detils-info-text {
  font-size: 25px;
  font-weight: 600;
}

.class-details-section .ml-40 {
  margin-left: 40px;
}

.waiting-room-message {
  right: calc(50% - 200px);
  bottom: calc(50% - 50px);
  transition: all 0.3s;
}

.waiting-room-content {
  display: flex;
  -webkit-user-select: auto;
  -webkit-app-region: no-drag;
}

.game-and-banner-section {
  -webkit-user-select: auto;
  -webkit-app-region: no-drag;
  margin-top: 50px;
}

.mobile-menu-btn {
  position: absolute;
  top: 43px;
  left: 3px;
}

.meeting-and-actions {
  display: flex;
}

.meeting-content {
  width: 75%;
}

@media only screen and (max-width: 991px) {
  .waiting-room-message {
    right: 0px;
    transition: all 0.3s;
    width: 100%
  }

  .sidenav.menu-open .mobile-menu-btn {
    left: 32px;
  }

  .sidenav {
    width: 52px !important;
    padding: 10px !important;
    text-align: center;
    transition: width 0.3s;
  }

  .sidenav a {
    display: none !important;
    white-space: nowrap;
  }

  .sidenav img {
    margin-bottom: 36px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sidenav.menu-open {
    width: 22% !important;
    padding: 48px 51px 35px 44px !important;
  }

  .sidenav.menu-open a {
    display: flex !important;
  }

  .sidenav.menu-open img {
    margin-bottom: 36px !important;
    margin-left: 0px !important;
    padding-top: 4px;
    margin-right: 10px !important;
  }

  .meeting-and-actions {
    flex-direction: column-reverse;
  }

  .meeting-content {
    width: 100%;
  }

  .class-not-started {
    width: 100% !important;
    padding: 0px !important;
  }

  .class-details-section {
    width: 100% !important;
  }

  .waiting-room-content {
    display: block;
  }

  .class-details-section {
    display: none !important;
  }

  .class-details-section.small-screen {
    display: block !important;
  }

  .class-details-section .light-grey-section {
    padding: 2rem;
  }

  .game-and-banner-section {
    margin-top: 0px;
    padding: 4rem !important;
  }

  .waiting-greeting-section {
    padding: 2rem !important;
  }
}

.class-not-started {
  display: inline-block;
  overflow-y: auto;
  width: 62.5%;
  background-color: #f1f1f1;
  padding: 3.5rem 3rem;
}

.headline {
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: 600;
  line-height: 1;
  color: #3e3e3e;
}

.sub-headline {
  font-size: 1.5rem;
  font-weight: 600;
  color: #3e3e3e;
}

.sub-headline-1 {
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 9px;
  color: #3e3e3e;
}

.game-window {}

.roboto {
  font-family: 'Roboto Mono';
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 1.5px;
  color: #3e3e3e;
}

.announcement-image {
  width: 100%;
  height: 11rem;
  border-radius: 10px;
}

.description {
  font-size: 15px;
  font-weight: 500;
}

.class-details-box {
  word-wrap: break-word;
  border-radius: 10px;
  background-color: #ececec;
  padding: 12px;
}

.class-details-box img {
  height: 1.5rem;
  width: 1.5rem;
}

.mont-bold {
  font-family: 'Montserrat';
  font-weight: 700;
}

.class-details-box .time {
  font-size: 1.55rem;
  font-weight: bold;
  line-height: 1.6;
  color: #3e3e3e;
}

.instructor-pic {
  width: 100px;
  height: 100px;
  margin: auto;
}

.participant-pic {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #ececec;
  vertical-align: middle;
  text-align: center;
}

.extra-participants-count {
  padding-top: 15px;
}

.instructor-name {
  font-size: 1.55rem;
  color: #3e3e3e;
  font-weight: 600;
}

.letter-spacing-normal {
  letter-spacing: normal !important;
}

.yw-logo {
  width: 141px;
  height: 22.7px;
  object-fit: contain;
}

@media only screen and (max-width: 1250px) and (min-width: 990px) {
  .class-details-col {
    max-width: 49% !important;
  }
}

/* style code for all the content from the video part of the page. (student preview page) */

.request_screen_popup_box {
  width: 300px;
  height: 135px;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  background-color: #ffffff;
}

.request-screen-text {
  font-family: 'Montserrat';
  font-size: 15px;
  font-weight: 600;
  line-height: 1.33;
  color: #3e3e3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Dismiss {
  font-family: 'Montserrat';
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #ff7407;
}

.enable-button-box {
  width: 175px;
  height: 37px;
  border-radius: 10px;
  background-color: #ff7407;
}

.Enable-screen-sharing {
  font-family: 'Montserrat';
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.icon-box {
  position: absolute;
  left: calc(50% + (102px + var(--side-panel-displacement)) / 2);
  bottom: 0;
  transform: translateX(-50%);
  width: fit-content;
  z-index: 1504;
  display: inline-block;
  transition: left 300ms;
}

.whisper-box {
  width: 396px;
  height: 90px;
  /* margin: 360px 520px 0 0; */
  padding: 13px 13px 16px 14px;
  background-color: #4f4e4e;
  opacity: 0.8;
  position: absolute;
  left: calc(50% + (var(--side-panel-displacement)) / 2 - 140px);
  transition: left 300ms;
  border-radius: 10px 10px 0px 0px;
}

.whisper-text {
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon_box_rectangles:hover {
  cursor: pointer;
}

.icon_box_rectangles {
  width: 37px;
  height: 31px;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  background-color: #ffffffe6;
  text-align: center;
  position: relative;
  top: 8px;
}

.icon_box_rectangles img {
  margin-top: 7px;
}

.icons-image-size {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-top: 3px;
}

.call-options {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  background-color: #ff5050;
}

/* .customer-video {
  position: absolute;
  bottom: 63px !important;
  right: 16px !important;

  height: 150px;
  width: 150px;

  border-radius: 10px;
  background-color: #ff5050;
} */

.customer-initials-on-video-box {
  width: 28px;
  height: 28px;
  background-color: #3d50ff;
  /* margin-top: 10px; */
  position: absolute;
  z-index: 1;
}

.customer-initials-on-video-text {
  width: 27px;
  height: 27px;
  font-family: ‘Roboto Mono’, monospace;
  font-size: 60px;
  font-weight: bold;
  line-height: 1.08;
  color: #ffffff;
}

.maximize-minimize-button-box {
  position: absolute;
  bottom: 18px !important;
  right: 16px !important;
  width: 36.6px;
  height: 36.6px;
  object-fit: contain;
  color: #ffffff;
}

.nav-btn {
  width: 39px;
  height: 102px;
  mix-blend-mode: multiply;
  background-color: #c4c4c4;
  padding: 10px 0px;
}

.nav-left {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.nav-right {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.nav-btn .name-box {
  width: 25px;
  height: 25px;
  padding: 5px;
  color: white;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
  font-family: 'Roboto Mono';
}

.arrow-div img {
  height: 20.7px;
  width: 10px;
  margin-bottom: 10px;
}

.other-participants-image-box {
  position: fixed;
  width: 100%;
  text-align: right;
  height: 80px;
  margin-left: auto;
  margin-right: 0;
  bottom: 64px;
  display: inline-block;
}

.other-participants-image-box div {
  height: 100%;
  width: 80px;
  margin-left: 1rem;
  border-radius: 10px;
}

.other-participants-image-box .active {
  border: solid 5px #ff833d;
}

.exit_full_screen {
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 9px 13px;
}

.bg-light {
  background-color: #f1f1f1 !important;
}

.border-2 {
  border-width: 2px !important;
}

.bg-orange {
  background-color: #ff7407;
  color: #ffffff;
}

.bg-grey {
  background-color: #f1f1f1;
  color: black;
}

.bg-darkgrey {
  background-color: #c4c4c4;
  color: black;
}

.text-orange {
  color: #ff7407;
}

.text-monsteratt-bold {
  font-family: 'Montserrat';
  font-weight: 700;
}

/* Mutilple screen share page*/

.participant-buttons {
  position: absolute;
  right: calc(20 / 16 * 1em);
  top: calc(10 / 16 * 1em);
  display: flex;
  z-index: 1040;
  justify-content: flex-end;
}

.participant-buttons>div {
  margin-left: 10px;
}

#upload-virtual-background {
  opacity: 0;
  width: 1px;
  /* Hide input but make accessible for assistive technology */
}

#virtual-backgrounds {
  padding: 3px;
  width: 100%;
  height: 320px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#virtual-backgrounds>div {
  background-color: #4d4d4d;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 4px;
  z-index: 0;
  color: white;
  user-select: none;
}

#virtual-backgrounds>div.selected {
  outline: solid 3px #ff7407;
}

#virtual-backgrounds>div.selected::after {
  content: url('/assets/inverted-check.svg');
  width: 100%;
  height: 100%;
  background-color: #ff740733;

  /* Center image in div */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


.virtual-background-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  position: absolute;
  z-index: -1;
}

.virtual-background-delete {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 20px;
  background-color: white;
  padding: 3px;
  border-radius: 50%;
  display: none;
  /* outline: 1px solid black; */
}

#virtual-backgrounds>div:hover .virtual-background-delete {
  display: block;
}

/*  SCROLLBAR CONFIG START */
/* ----------------------- */
/* Scrollbar */
#virtual-backgrounds::-webkit-scrollbar {
  width: 5px;
  background: rgb(190, 185, 185);
  scrollbar-color: grey;
}

/* Track */
#virtual-backgrounds::-webkit-scrollbar-track {
  background: rgb(190, 185, 185);
  scrollbar-color: grey;
}

/* Handle */
#virtual-backgrounds::-webkit-scrollbar-thumb {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle on hover */
#virtual-backgrounds::-webkit-scrollbar-thumb:hover {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/*  SCROLLBAR CONFIG END */
/* --------------------- */

.maximize-minimize,
.resolve-box,
.user-options {
  border-radius: calc(10 / 16 * 1em);
  /* display: none; */
  background: hsla(0, 0%, 30%, 0.4);
  font-size: clamp(6px, calc(var(--button-scale) * 1vh / var(--grid-columns)), 16px);
  color: white !important;
  padding: 0.375em 0.75em;
}

.maximize-minimize img,
.user-options img {
  width: calc(24 / 16 * 1em);
  height: calc(24 / 16 * 1em);
}

.user-options img {
  transform: rotate(90deg);
  margin-top: 4px;
}

.maximize-minimize,
.user-options {
  visibility: var(--maximize-minimize-button-visibility);
  opacity: var(--maximize-minimize-button-opacity);
}

.maximize-minimize,
.user-options {
  transition: visibility 300ms linear, opacity 300ms linear;
}

.video-container-mouse-move .maximize-minimize,
.video-container-mouse-move .user-options {
  visibility: visible;
  opacity: 1;
}

.maximize-minimize label,
.resolve-box label {
  margin: 0;
  cursor: inherit;
}

.user-options {
  padding: 2px 6px;
}

.resolve-box {
  right: calc(170 / 16 * 1em);
  background-color: #ff74079a;
}

.resolve-box img {
  width: calc(17 / 16 * 1em);
  height: calc(20 / 16 * 1em);
}

.self-box,
.us-box,
.questions-box {
  line-height: 0;
  position: absolute;
  /* width: 25%;
  height: 35%; */
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  z-index: 2000;
  -webkit-app-region: drag;
  overflow: hidden;
}

.us-box {
  width: 17% !important;
  z-index: 2500 !important;
}

.questions-box {
  width: 30%;
  min-height: 40%;
  min-width: 30%;
  resize: both;
  max-height: fit-content;
  max-width: fit-content;
  line-height: 1.5rem;
  border: solid 2px #d3d3d3;
  overflow: scroll;
  background: #fff;
}

.questions-box .close-question {
  position: absolute;
  top: 10%;
  right: 0%;
}

.questions-box img,
.questions-box video {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.questions-box::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

/* .questions-box::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
} */

/* Integration login flow */

.bg {
  background-color: #ececec !important;
}

.logo {
  margin: 30px;
  text-align: center;
}

.login-box {
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
  max-width: 600px;
  padding: 35px 32px;
}

.create-acc {
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 25px;
  color: #3e3e3e;
}

.acc-exists {
  font-size: 15px;
  font-family: 'Montserrat';
  font-weight: 500;
  line-height: 1.33;
  vertical-align: bottom;
  color: #ff7407;
}

.font-label {
  font-size: 15px;
  font-family: 'Montserrat';
  font-weight: 500;
  color: #3e3e3e;
}

.input-box {
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  padding: 10px 23px;
  font-size: 15px;
  font-family: 'Montserrat';
  font-weight: 500;
}

.input-box:focus {
  outline: none;
}

.terms {
  font-size: 12px;
  font-family: 'Montserrat';
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  color: #a4a4a4;
}

.terms .links {
  color: #ff7407;
  padding: 0px 5px;
}

.disabled-btn {
  border-radius: 10px;
  background-color: #b6b6b6;
  color: white;
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 15px;
  padding: 20px 0px;
  line-height: 20px;
}

.line {
  background-color: #ececec;
  height: 2px;
  width: 40%;
  margin: auto;
}

.line-separation {
  margin: 37px 0px 28px 0px;
  vertical-align: middle;
}

.half-enabled-btn {
  border: solid 1px #3e3e3e;
  color: #3e3e3e;
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  padding: 20px 0px;
  border-radius: 10px;
}

.clickable:hover {
  cursor: pointer;
}

/* ------------ */

.enabled-btn {
  border-radius: 10px;
  background-color: #ff7407 !important;
  color: white;
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 15px;
  padding: 20px 0px;
  line-height: 20px;
}

.links {
  color: #ff7407 !important;
  padding: 0px 5px;
}

.links:hover {
  text-decoration: none !important;
}

.carousel-control-prev,
.carousel-control-next {
  bottom: 80% !important;
  /* align-items:top; Aligns it at the top */
}

.carousel-control-next-icon {
  background-image: url('../assets/carousel/back.svg') !important;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.carousel-control-prev-icon {
  background-image: url('../assets/carousel/back.svg') !important;
}

/* .carousel-indicators li {

  } */

.carousel-indicators {
  /* position: relative; */
  bottom: 86% !important;
  /* z-index: 1 !important; */
}

.carousel-indicators li {
  width: 50px !important;
  height: 6px !important;
  object-fit: contain;
  border-radius: 10px;
  background-color: #ececec !important;
}

.carousel-indicators .active {
  background-color: #9b9b9b !important;
}

.password-view {
  background: url(../assets/eye-visible.png);
  float: right;
  width: 21px;
  height: 14px;
  top: -1.85em;
  right: 1em;
  position: relative;
  z-index: 2;
}

.eye-hidden {
  background: url(../assets/eye-hidden.png) !important;
  width: 22px;
  height: 18px;
  top: -2em;
}

.select_categories {
  overflow: hidden;
  position: relative;
}

.select_categories .select {
  width: 120%;
  /* background:url('/images/carousel/back.svg') ;
    background-position:80% center; */
  position: relative;
  z-index: 20;
}

.select_categories .select select {
  background: transparent;
  line-height: 1;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 155%;
  position: relative;
  z-index: 10;
  font-size: inherit;
}

/* .select_categories .select:focus{
    outline: none;
  } */

.select_categories .select select:focus {
  outline: none;
}

.dropdown-arrow {
  float: right;
  margin-right: 12px;
  margin-top: -23px;
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

/* Home page */

.border-radius-10 {
  border-radius: 10px;
}

.fs-13 {
  font-size: 13px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-25 {
  font-size: 25px;
}

.fs-26 {
  font-size: 26px;
}

.fs-italic {
  font-style: italic;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.font-bold {
  font-family: 'Montserrat' !important;
  font-weight: 700;
}

.custom-input-field {
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  padding: 0.625rem 0.875rem;
  color: #9b9b9b;
}

.custom-input-field:focus {
  outline: none;
  color: #3e3e3e;
}

.c-orange {
  color: #ff7407;
}

.sidenav-logo {
  display: none;
}

.sidenav.menu-open .mobile-menu-btn {
  left: 264px;
  background: #adadad;
  color: white;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  flex-direction: column;
  padding: 0px !important;
  padding-left: 8px !important;
  justify-content: center;
}

.sidenav {
  width: 52px !important;
  padding: 10px !important;
  text-align: center;
  transition: width 0.3s;
}

.sidenav a {
  display: none !important;
  white-space: nowrap;
}

.sidenav img {
  margin-bottom: 36px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sidenav.menu-open {
  min-width: 280px !important;
  width: 280px !important;
  padding: 40px 0px 40px 40px !important;
}

.sidenav.menu-open a {
  display: flex !important;
}

.sidenav.menu-open img {
  margin-bottom: 36px !important;
  margin-left: 0px !important;
  margin-right: 10px !important;
}

.mobile-menu-btn {
  transition: all 0.3s;
  display: flex !important;
}

.sidenav.menu-open .mobile-menu-btn:hover {
  background: #5a5a5a !important;
  height: 35px;
  width: 35px;
}

.sidenav {
  padding: 48px 51px 35px 44px;
  width: 22%;
}

.sidenav .nav-links {
  margin-top: 20px;
}

.sidenav .nav-links .links {
  font-family: 'Montserrat';
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 26px;
  display: block;
  transition: all 0.3s;
}

.sidenav .nav-links .links {
  color: #3e3e3e !important;
}

.sidenav .nav-links .active {
  color: #ff7407 !important;
}

.sidenav .nav-links .links:hover {
  font-size: 16px;
  color: #ff7407 !important;
}

.sidenav .try-pro-acc {
  padding: 29px 27px 26px 22px;
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  background-color: #f5f5f5;
}

.sidenav .try-pro-acc p {
  font-family: 'Montserrat';
  font-weight: 500;
  color: #3e3e3e;
}

.sidenav .try-pro-acc .need-more {
  line-height: 1.33;
  margin-bottom: 0;
  margin-top: 30px;
}

.sidenav .try-pro-acc .outline-orange-btn {
  border-radius: 10px;
  border: solid 1px #ff7407;
  background-color: #f5f5f5;
  color: #ff7407;
  padding: 8px;
}

.modal,
.main {
  -webkit-app-region: no-drag !important;
  -webkit-user-select: auto;
}

body.desktop {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

.dashboard {
  font-family: 'Montserrat';
  font-weight: 500;
  padding: 39px 50px;
  color: #3e3e3e;
  overflow: auto;
}

.dashboard .header {
  font-size: 20px;
  font-family: 'Montserrat';
  font-weight: 600;
}

.dashboard .alert-box {
  border-radius: 10px;
  background-color: #dedede;
  padding: 10px 25px;
  margin-right: 20%;
}

.dashboard .header-section .initials,
.contacts-page .initials {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  background-color: #c4c4c4;
  color: white;
  font-family: 'Roboto Mono';
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  min-width: 40px;
  margin-left: 10px;
}

.dashboard .header-section {
  margin-bottom: 66px;
}

.dashboard .dark-grey-underline {
  height: 3px;
  background-color: #c4c4c4;
  margin-bottom: 1rem;
}

.dashboard .meetings-list .launch-btn {
  min-width: 93px;
  height: 36px;
  border-radius: 10px;
  background-color: #ececec;
  text-align: center;
  font-family: 'Montserrat';
  font-weight: 600;
  transition: all 0.1s;
}

.dashboard .meetings-list .launch-btn:hover {
  border-radius: 10px;
  background-color: #e5e5e5;
  color: #ff7407;
}

.dashboard .meetings-list .meeting-list-item {
  padding: 15px 0px;
  border-bottom: 1px solid #9b9b9b;
}

.dashboard .meetings-list .time {
  font-size: 13px;
  width: 18.75%;
  height: auto;
  vertical-align: middle;
  margin-top: 28px;
  text-align: center;
  color: #9b9b9b;
}

.dashboard .meetings-list .details {
  width: 55%;
}

.dashboard .meetings-list .actions {
  width: 26.25%;
}

.dashboard .enabled-btn {
  width: 225px;
  padding: 11px 30px;
  text-align: center;
}

.dashboard .meetings-list .members {
  font-size: 13px;
}

.dashboard .meetings-list .link {
  color: #9b9b9b;
  font-size: 13px;
}

.dashboard .meetings-list.recents {
  margin-top: 74px;
}

.dashboard .join-meeting {
  width: 225px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal {
  text-align: center;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-content {
  width: 596px;
  font-family: 'Montserrat';
  font-weight: 500;
  border-radius: 10px;
  /* margin-top: 30%; */
  font-size: 15px;
  padding: 0;
}

#transciptModal .modal-content {
  width: 960px;
  max-width: 100%;
}

.alert-modal {
  z-index: 1300 !important;
}

.modal.fade {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal .modal-content .header {
  font-size: 25px;
  font-family: 'Montserrat';
  font-weight: 600;
}

.modal .modal-content .preference-item {
  margin-bottom: 19px;
}

.modal .modal-content .preferences {
  font-size: 15px;
}

.launch-modal .modal-content .meeting-link {
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  padding: 10px 23px;
  font-size: 15px;
}

.modal .modal-content .outline-orange-btn {
  width: 116px;
  height: 39px;
  border-radius: 10px;
  border: solid 2px #ff7407;
  color: #ff7407;
  font-family: 'Montserrat';
  font-weight: 600;
  text-align: center;
  padding: 6px;
}

.modal .modal-content .enabled-btn {
  width: 219px;
  height: 40px;
  border-radius: 10px;
  background-color: #ff7407;
  color: white;
  font-family: 'Montserrat';
  font-weight: 600;
  text-align: center;
  padding: 10px;
}

#open-screen-share-permission {
  width: 230px;
}

@media only screen and (max-width: 600px) {
  .launch-modal .modal-content {
    width: 100% !important;
  }
}

.profile-menu {
  width: 270px;
  padding: 17px;
  border-radius: 10px;
  border: solid 1px #d3d3d3;
  position: fixed;
  right: 60px;
  top: 90px;
  z-index: 10;
  display: none;
}

.profile-menu div {
  font-size: 13px;
}

.profile-menu .details .edit {
  font-size: 10px;
}

.profile-menu .section {
  padding: 15px 0px;
  border-top: solid 1px #d3d3d3;
  margin-top: 10px;
}

.profile-menu .section .free-plan {
  color: #b6b6b6;
}

.profile-menu:hover~.profile-menu {
  display: block;
}

/* Custom checkbox */

.check-group {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.check-group input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 20px;
  width: 200px;
  margin-left: -35px;
  z-index: 10;
}

/* Create a custom checkbox */

.checkmark.not-rounded {
  border-radius: 2px !important;
  transition: all 0.3s;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  /* z-index: -999px; */
  background-color: #ddd;
  border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */

.check-group:hover input~.checkmark {
  background: #ccc;
}

/* When the checkbox is checked, add a blue background */

.check-group input:checked~.checkmark {
  background: #ff7407;
  border: 1px solid #ff7407;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.check-group input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.check-group .checkmark:after {
  left: 6px;
  top: 1px;
  width: 6px;
  height: 14px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.side-panel-hidden {
  margin-left: -398px;
  transition: margin-left 300ms, transform 0.3s;
  border-right: var(--panel-border);
}

.side-panel-open {
  margin-left: -1px;
}

.info-participant {
  height: 48px;
  z-index: 1203;
  margin-bottom: 10px;
}

.slide-left .settings-box {
  transform: translateX(-100%);
}

.settings-box {
  position: absolute;
  z-index: 1203;
  width: 398px;
  height: 100%;
  background-color: #ffffff;
  border-width: 0.5px;
  border-left-style: solid;
  border-color: #d3d3d3;
}

.medical-dashboard {
  z-index: 1203;
  height: 100%;
  width: 95%;
  position: absolute;
  border-width: 0.5px;
  border-left-style: solid;
  border-color: #d3d3d3;
  transition: all 0.3s;
  margin-left: -1px;
  left: -95%;
  overflow-x: hidden;
}

.medical-dashboard .user-profile-picture,
.notification-on-top-right .user-profile-picture {
  height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: white;
}

.settings-box-content {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  flex-grow: 0;
  padding-bottom: 5px;
}

#pods-box {
  width: min(100% - 113px, 1070px);
}

/* #pods-creator { */

/*   width: 1043px; */

/* } */

.pods-panel-hidden {
  margin-left: -1070px;
  transition: margin-left 300ms;
  border-right: var(--panel-border);
}

.pods-panel-open {
  margin-left: -1px;
}

.select_choices {
  overflow: hidden;
  position: relative;
}

.select_choices .select {
  width: 120%;
  /* background:url('/images/carousel/back.svg') ;
  background-position:80% center; */
  position: relative;
  z-index: 20;
}

.select_choices .select select {
  background: transparent;
  line-height: 1;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 120%;
  position: relative;
  z-index: 10;
  font-size: inherit;
}

/* .select_categories .select:focus{
  outline: none;
} */

.select_choices .select select:focus {
  outline: none;
}

/* .dropdown-arrow {
  float: right;
  margin-right: 71px;
  margin-top: -20px;
}

Conflicting, Not used*/

.audio-video-source-choice {
  width: 334px;
  height: 48px;
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  font-family: 'Montserrat';
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #3e3e3e;
  padding: 10px 8px 10px 14px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 20px;
  border-radius: 10px;
  background-color: #e5e5e5;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  width: 28px;
  height: 28px;
  left: 0px;
  bottom: -4px;
  background-color: #ececec;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.patient-links-filter-switch {
  height: 22px !important;
  width: 48px;
}

.patient-links-filter-switch .slider:before {
  width: 18px !important;
  height: 18px !important;
  left: 4px !important;
  bottom: 2px !important;
}

input:checked+.slider {
  background-color: #50c15b;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(30px);
}

.patient-links-filter-switch input:checked+.slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* **********************************info-page********************************* */

.Montserrat-text {
  font-family: 'Montserrat';
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #000000;
}

.Edit {
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.67;
  color: #ff7407;
  background-color: #ffffff;
  padding: 0px;
}

.roboto-text {
  font-family: 'Roboto Mono';
  font-size: 12px;
  font-weight: 700;
  line-height: 1.08;
  color: #3e3e3e;
}

.plain ol>li {
  line-height: 0.8em;
}

/* .panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.list-group {
  max-height: 300px;
  margin-bottom: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
} */

.view_box_rectangle {
  width: 60px;
  height: 28px;
  border-radius: 10px;
  border: solid 1.5px #ff7407e6;
}

.resolve_box_rectangle {
  width: 85px;
  height: 28px;
  border-radius: 10px;
  border: solid 1.5px #ff7407e6;
}

.view_box_rectangle.view_box_rectangle_normal {
  border: solid 1.5px;
}

.call-icons {
  position: relative;
  vertical-align: middle;
}

.border-line {
  width: 335px;
  height: 2px;
  background-color: #d3d3d3;
}

#options-box-container {
  position: absolute;
}

.options-box-container-center {
  position: absolute;
  top: 50%;
  left: calc(50% + 55px);
  transform: translate(-50%, -50%);
  z-index: 1501;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid #d3d3d3;
  border-bottom: 10px solid transparent;
  z-index: 1502;
  margin-bottom: -20px;
  position: relative;
  left: -19px;
}

.triangle-left-inner {
  z-index: 1503;
  left: -17px;
  border-right: 20px solid #fff;
}

#options-box {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  border-radius: 10px;
  border: solid 1px #d3d3d3;
  background-color: #ffffff;
  position: fixed;
  z-index: 1501;
  overflow-y: auto;
  margin-bottom: 0px;
}

#options-box .kick-from-meeting {
  color: #ff3939;
}

#options-box ul {
  list-style-type: none;
  padding: 0px;
  margin-bottom: 0px;
}

#options-box ul li {
  padding: 10px 25px;
}

#options-box ul li:last-child {
  border-bottom: none;
}

#options-box img {
  display: none;
}

#options-box-center {
  width: 486px;
  display: flex;
  flex-direction: column;
  z-index: 1205;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 10px;
  z-index: 1501;
}

#options-heading {
  display: flex;
  justify-content: space-between;
  margin: 20px 32px 0px;
}

#options-hr {
  margin-left: 32px;
  width: calc(100% - 64px);
  height: 1px;
  background-color: white;
}

#options-title {
  margin-bottom: 18px;
  font-family: 'Montserrat';
  font-weight: 700;
}

#options-box-center ul {
  list-style-type: none;
  padding: 0px;
  margin: 32px;
  margin-top: 0px;
  max-height: 70vh;
  overflow-y: auto;
}

#options-box-center ::-webkit-scrollbar {
  width: 5px;
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Track */

#options-box-center ::-webkit-scrollbar-track {
  background: rgb(95, 95, 95);
  scrollbar-color: rgb(95, 95, 95);
}

/* Handle */

#options-box-center ::-webkit-scrollbar-thumb {
  background: white;
  scrollbar-color: white;
}

#options-box-center ul li {
  padding-top: 27px;
}

#options-box-center ul li img {
  height: 25px;
  /* Make sure images don't take up space */
}

#options-box-center ul li i {
  font-size: 25px;
  /* Make sure images don't take up space */
}

#options-box-center .options-box-option {
  margin-left: 15px;
}

/*Participants in waiting room popup*/

.reactions-popup {
  position: absolute;
  border-top-right-radius: 50px;
  left: 115px;
  bottom: 185px;
  height: 75px;
  border-bottom-right-radius: 50px;
  transition: all 0.3s;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
}

.reactions-popup .emoji {
  font-size: 40px;
  transition: all 0.3s;
}

.reactions-popup .emoji:hover {
  font-size: 44px;
}

.floating-emoji {
  font-size: 200px;
  z-index: 1503;
}

.floating-emoji-sent-by {
  z-index: 1503;
  text-align: center;
  min-width: 200px;
  padding: 10px 30px;
  background-color: white;
  font-size: 20px;
  font-family: 'Montserrat';
  font-weight: 500;
  border-radius: 50px;
  margin: 20px auto;
}

.reactions-container {
  display: none;
  text-align: center;
  background-color: transparent;
  flex-direction: column;
  justify-content: center;
  z-index: 1503;
  top: 0;
  left: 100px;
  width: calc(100% - 100px);
}

.sidebar-popup {
  position: absolute;
  left: 126px;
  margin-top: -8.5em;
  background: #ffffff;
  border-radius: 0.7rem;
  padding: 1em;
  font-family: 'Montserrat';
  font-weight: 500;
  line-height: 1.33;
  text-align: center;
  display: none;
}

.sidebar-popup:after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 27px 29px 27px 0;
  border-color: transparent #ffffff transparent transparent;
  left: -24px;
  top: 33%;
  margin-top: -10px;
}

.show-sidebar-popup {
  display: block;
}

/* *************************************White board********************************************** */

.app-window {
  width: 33.8px;
  height: 33.7px;
  object-fit: contain;
  margin-top: 20px;
  margin-left: 60px;
}

.customer-video.app-window {
  position: absolute;
  bottom: 63px !important;
  /* left: 56px !important; */
  margin: 0px !important;
  overflow: hidden;
  height: 150px;
  width: 150px;
  border-radius: 10px;
  background-color: #ff5050;
}

.customer-video-rightside.app-window {
  position: absolute;
  bottom: 63px !important;
  right: 15px !important;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  background-color: #e5e5e5cd;
}

.youngwonks-logo2 {
  width: 141px;
  height: 22.7px;
  object-fit: contain;
  margin-left: 20px;
  margin-bottom: 20px;
}

.starting-board {
  width: 192px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  background-color: #ffffff;
}

.Whiteboard-tool-box {
  width: 252px;
  height: 57px;
  border-radius: 10px;
  background-color: #ffffff;
}

.buttons-box {
  display: flex;
  flex-direction: row;
  margin-left: 6px;
  padding: 10px;
}

.white-board-icons-image-size {
  width: 22.5px;
  height: 22.5px;
  object-fit: contain;
}

/* Tool box for inking */

.Whiteboard-tool-box.inking-tool-box {
  width: 300px;
  height: 45px;
}

.request-screen-text.inking-clear {
  color: #ff7407 !important;
  font-size: 12px;
}

.color-box.inking-colorbox {
  width: 186px;
  height: 33px;
  border-radius: 0px 0px 10px 10px;
  margin-left: 19px;
}

.color-circle.red-colored {
  background-color: #ff5b5b;
}

.color-circle.green-colored {
  background-color: #50c15b;
}

.color-circle.blue-colored {
  background-color: #3b6ff6;
}

.color-circle.orange-colored {
  background-color: #ffbe3f;
}

.color-circle.black-colored {
  background-color: #000000;
}

.select2-dropdown {
  z-index: 1500 !important;
  width: 100%;
}

.select2-container .select2-selection--single {
  height: 38px;
  padding-top: 4px;
}

/* ********************************Pre-loader-page************************* */

.Pre-loader-box,
.preferences-modal {
  border-radius: 10px;
  box-shadow: 0 4px 20px 10px rgba(0, 0, 0, 0.15);
  background-color: #ffffffff;
  max-width: 752px;
}

.permission-modal {
  position: absolute !important;
  top: 160px;
  left: 280px !important;
  width: 500px;
}

.permission-denied-modal {
  top: 20px !important;
  left: 65px !important;
}

.permission-position-firefox {
  top: 180px;
  left: 510px !important;
}

.permission-denied-firefox {
  top: 20px;
  left: 280px !important;
}

.pref-modal:before,
.pref-modal:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #dddddd;
}

.pref-modal:after {
  left: 20px;
  border: 20px solid transparent;
  border-bottom-color: #ffffff;
}

.preferences-alert {
  flex-grow: 0;
  border-radius: 14px;
  background-color: #f3f3f3;
}

.patient-info-alert {
  flex-grow: 0;
  border-radius: 14px;
  background-color: #fff6a9;
}

.alert-icon-danger {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  flex-grow: 0;
  margin: 2px 31px 0 0;
  padding: 12px 11.5px 10.5px 11px;
  background-color: #ff4343;
}

.alert-icon-warning {
  min-width: 35px;
  height: 35px;
  border-radius: 50%;
  flex-grow: 0;
  margin: 2px 31px 0 0;
  padding: 12px 11.5px 10.5px 11px;
  background-color: #ffe353;
}

/* *********************************** AUDIO Video Prefrences Before Join*********************************** */

.preferences-modal {
  z-index: 1400;
  height: fit-content;
  overflow: hidden;
  transition: all 0.5s ease;
}

#video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* ********************************Raisehand webview*********************************** */

.request_screen_popup_box.queue_box {
  width: 268px;
  height: 97px;
}

.sidebar-text.colored-text {
  color: #ff7407;
}

/* Video Pages Controls */

.video-page-control {
  /* filter: brightness(0) invert(1); */
  /* bottom: 0% !important ; */
  width: 39px;
  opacity: unset;
  top: 50%;
  height: 102px;
  mix-blend-mode: multiply;
  border-radius: 10px;
  background-color: #b6b6b6;
  transform: translateY(-50%);
}

.video-page-control-icon {
  width: 10px;
  height: 20.7px;
}

.video-name-label {
  background-color: #ff7407;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1040;
  height: 25px;
  color: white;
  padding: 6px 10px;
  font-family: 'Roboto Mono' !important;
  line-height: 13px;
  font-size: 12px;
  font-weight: bold;
  border-top-left-radius: 10px;
}

/* Screen picker for desktop app */

#videoCarousel .carousel-inner .carousel-item {
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.force-hide {
  display: none !important;
}

.screen_share_box {
  z-index: 1400;
  position: fixed;
  width: 65%;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  background-color: white;
  top: 3rem;
  left: calc(102px / 2);
  transform: translate(calc(50vw - 50%));
}

.screenshare_box_label {
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.screen_share_thumbnail_container {
  height: calc(100vh - 25rem);
  overflow-y: scroll;
  background: #ececec;
  padding: 30px;
}

.screen_share_box_thumbnail {
  object-fit: contain;
  width: 100%;
}

.search_box {
  width: 185px;
  height: 30px;
  border-radius: 10px;
  background-color: #ececec;
}

.search_icon {
  height: 15px;
  width: 15px;
  object-fit: contain;
}

.search_button {
  border-radius: 10px 0px 0px 10px;
}

.input_box_for_search {
  background-color: #ececec;
  font-size: 12px;
  border: 0px;
  border-radius: 0px 10px 10px 0px;
}

.sharing_screen_box {
  border-radius: 5px;
  background-color: #ececec;
}

.sharing_screen_box_selected,
.sharing_screen_box:hover {
  cursor: pointer;
  border: solid 3px #ff7407;
}

.sharing_screen_box.vertical {
  width: 76.9px;
  height: 125px;
  margin: auto;
}

.tool-box.screenshare_page {
  margin: auto;
}

.sharing_screen_box video {
  height: 100%;
  width: 100%;
}

.screen_share_box_content {
  height: 100%;
  overflow: auto;
}

.video-restart-timer {
  z-index: 1040;
  font-size: 1em;
  width: fit-content;
  font-weight: 600;
  font-family: 'Montserrat';
  color: #656565;
  top: 80%;
  left: 50%;
  position: absolute;
  margin: 0%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.waiting-room-preloader {
  z-index: 14490;
}

.video-disconnected,
.waiting-room-preloader {
  z-index: 1199;
  font-size: 1em;
  display: flex;
  margin: 0%;
  background-color: rgba(1, 1, 1, 0.6);
  position: absolute;
  text-align: center;
  top: 0px;
}

.video-disconnected img,
.waiting-room-preloader img {
  width: 20%;
}

.video-disconnected .reconnecting-text,
.waiting-room-preloader .connecting-text {
  font-family: Montserrat;
  font-size: 2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  margin-top: 2rem;
}

/* App welcome page */

.welcome-page.page-wrapper {
  padding-top: 5%;
}

.welcome-page.Montserrat-big {
  font-family: 'Montserrat';
  font-size: 40px;
  font-weight: 600;
  color: #3e3e3e;
}

.welcome-page.Montserrat-small {
  font-family: 'Montserrat';
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #000000;
}

.welcome-page.IBMPlexMono-text {
  font-family: IBMPlexMono !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 1.5px;
  color: #000000;
}

.welcome-page.Student-Portal-image {
  width: auto;
  height: 227px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.welcome-page.meeting-button {
  width: 334px;
  height: 60px;
  border-radius: 10px;
  background-color: #ff7407;
}

/************************************** Feedback Page *******************************************/

.ratings-page.page-wrapper {
  padding-top: 62px;
}

.ratings-page.ratings-text-big {
  font-family: Montserrat;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: #3e3e3e;
}

.ratings-page.ratings-text-small {
  font-family: Montserrat;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #000000;
}

.ratings-page.ratings-text-small.roboto-mono {
  font-family: 'Roboto Mono' !important;
}

.ratings-page.ratings-text-small.IBMPlexMono {
  font-family: IBMPlexMono !important;
  letter-spacing: 1.5px;
}

.ratings-page.ratings-text-small.IBMPlexSans-Text {
  font-family: 'IBMPlexSans-Text' !important;
  color: #3e3e3e;
}

.colored-hand {
  object-fit: contain;
  font-family: IBMPlexSans-Text;
  font-size: 100px;
  line-height: 0.2;
  color: #000000;
}

.shadowed-hand {
  object-fit: contain;
  mix-blend-mode: luminosity;
  font-size: 100px;
  line-height: 0.2;
  color: #000000;
}

.ratings-page.underlined {
  width: 400px;
  height: 1px;
  background-color: #000000;
}

.ratings-page.feedback-box {
  width: 596px;
  height: 69px;
  border-radius: 10px;
  border: solid 1px #656565;
}

.ratings-page.submit-feedback {
  width: 172px;
  height: 37px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 2px solid #777;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.33;
  color: #3e3e3e;
  text-align: center;
}

.ratings-page ul {
  border: 0px solid #f1f1f1;
}

.ratings-page li {
  background-color: #f1f1f1;
}

.button-backgroundcolor {
  color: #fff;
}

/* ***********Settings Page********** */

.tab-links {
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  border: none;
  background-color: transparent;
  color: black;
}

.tab-links.active {
  color: #ff7407;
  font-weight: bold;
  border-bottom: 2px solid;
  padding-bottom: 5px;
}

.tab-links:hover,
.nav-links a:hover {
  text-decoration: none;
  color: #ff7407 !important;
}

/* *****************Main Settings page */

.settings-page .meeting-list-item {
  padding-left: 1.5rem;
  margin-bottom: 1rem !important;
}

.settings-page .meeting-list-item .account-option {
  color: #9b9b9b;
  width: 20%;
}

.outline-btn {
  background-color: transparent !important;
  border-color: #ff7407;
  color: #ff7407 !important;
  border-style: solid;
}

/* *****************Contacts page */

.contacts-page .check-group input[type='checkbox'] {
  height: 100%;
  width: 100%;
}

.contacts-page .checkmark {
  margin-top: 0.2em;
  margin-left: -2em;
  border-radius: 0.3em;
  background-color: transparent;
  border: solid 1px #c4c4c4;
  height: 20px !important;
  width: 20px !important;
}

.recent-contact-tab {
  padding: 15px 0px;
  border: 1px solid #9b9b9b;
  border-radius: 1rem;
  /* padding-left: 1.5rem; */
  margin-bottom: 1rem !important;
  /* flex: auto; */
}

.recent-contact-tab:hover {
  background-color: #dedede !important;
}

.recent-contact-tab.selected,
.recent-contact-tab:active {
  border: solid 2px #ff7407 !important;
  background-color: rgba(255, 116, 7, 0.22) !important;
}

#sidebar-raise-hand {
  padding-top: 4rem !important;
}

#waiting-room-list .spinner {
  font-size: 0.4rem;
  height: 1rem;
  width: 1rem;
}

.spinner-all {
  font-size: 0.3rem;
  height: 0.8rem;
  width: 0.8rem;
}

.waiting-room-text {
  font-family: Montserrat;
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #000000;
}

.waiting-room.host-joined img {
  max-width: 100%;
}

.waiting-room.grey-bg-banner {
  padding: 6px 25px;
  font-family: 'Roboto Mono';
  font-weight: 700;
  font-size: 15px;
  background-color: #494949;
  letter-spacing: 1.5px;
  color: white;
  width: fit-content;
}

.knock-button {
  width: 219px;
  height: 40px;
  border-radius: 10px;
  background-color: #ff7407;
}

/*
modals should have focus priority
.modal {
  z-index: 1203 !important;
}
*/

#video-boxes-container {
  width: calc(100% - var(--side-panel-displacement));
  margin-left: var(--side-panel-displacement);
  transition: width 300ms, margin-left 300ms;
}

.video-boxes-subcontainer,
.video-container-maximized {
  width: 100%;
  height: 100%;
}

#video-boxes {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 3px;
}

.video-container {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #f9f9f9;
  margin: 3px;
  border-radius: 10px;
  transition: all 0.2s;
  /* Force browser hardware acceleration - commented out for now since it seems to be problematic on lower-spec laptops. */
  /* transform: translateZ(0); */
}

#extras-video-boxes {
  display: flex;
  justify-content: center;
}

.screenshare-stream-box {
  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.video-box {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.local-video {
  transform: rotateY(180deg);
}

.small-video-box {
  border: 1px solid grey;
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  cursor: grabbing;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

#previous-page-button {
  display: block;
  position: relative;
  top: calc(-50% - 51px);
  left: 0;
  width: 35px;
  height: 102px;
  padding-top: 40px;
  padding-left: 7px;
  color: white;
  user-select: none;
  cursor: pointer;
  background: hsla(0, 0%, 30%, 0.4);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1041;
}

#next-page-button {
  display: block;
  position: absolute;
  text-align: right;
  top: calc(50% - 51px);
  right: 0px;
  width: 35px;
  height: 102px;
  padding-top: 40px;
  padding-right: 7px;
  color: white;
  user-select: none;
  cursor: pointer;
  background: hsla(0, 0%, 30%, 0.4);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1041;
}

.cam-image-box-video-on,
.mic-image-box-unmuted,
.whisper-image-box-unmuted {
  background-color: #ffffff;
}

.cam-image-box-video-off,
.mic-image-box-muted,
.whisper-image-box-muted {
  background-color: #ff7407;
}

.whisper-image-box svg {
  fill: #000;
}

.show {
  display: block;
}

#pods-panel-button-tray {
  width: 411px;
  margin-bottom: 10px;
  padding: 12px 45px 12px 32px;
  border-radius: 10px;
  background-color: #f1f1f1;
  display: flex;
}

.pods-panel-button {
  width: 40px;
  line-height: 1.08;
}

.pods-panel-button-label {
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 600;
  color: #3e3e3e;
}

.pod-logo {
  display: inline;
}

.pod-title-flexbox {
  display: flex;
  align-items: center;
}

.pod-title {
  margin-left: 5px;
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 600;
}

.pod-text-input {
  border: none;
  margin-left: 5px;
  outline: none;
  width: 200px;
}

.join-pod-button {
  text-align: center;
  height: 40px;
  font-size: 15px;
  line-height: 15px;
  margin-bottom: 1rem;
}

.pod-attendee {
  width: 250px;
  margin-bottom: 17px;
  padding: 7px 12px;
  border-radius: 5px;
  background-color: #f1f1f1;
  word-wrap: break-word;
}

#pods-container {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.pod-box {
  position: relative;
  width: 277px;
  height: 608px;
  margin: 18px 24px 0 0px;
  padding: 14px 11px 23px;
  border-radius: 10px;
  border: solid 2px #d8d8d8;
  background-color: #ffffff;
}

.pod-box-real {
  border: solid 2px #ff7407;
}

.pod-close-button {
  position: absolute;
  top: 14.5px;
  right: 14.5px;
}

.pod-attendees {
  height: 400px;
  padding-top: 15px;
}

.host-disabled {
  opacity: 0.5;
}

.maximize-minimize-icon-span {
  padding-right: clamp(1.875px, calc(var(--button-scale) * 1vh / var(--grid-columns)), 5px);
}

.pod-input-label {
  margin-bottom: 0;
}

#apply-changes-button {
  text-align: center;
  width: fit-content;
  border-radius: 10px;
  border: solid 2px #ff7407;
  padding: 10px 20px;
}

.apply-changes-button-disabled {
  color: #ff7407;
}

input[type='number'] {
  width: 76px;
  height: 48px;
  padding: 14px 14px 14px 23px;
  border-radius: 10px;
  border: solid 1px #c4c4c4;
  outline: none;
}

.outline-orange-btn {
  border-radius: 10px;
  border: solid 2px #ff7407;
  background-color: white;
  color: #ff7407;
  padding: 11px 40.8px 9px 44.4px;
}

.enabled-btn {
  color: white;
}

#create-pod-arrangement-button {
  width: 160px;
  text-align: center;
}

#report-issue-button {
  font-family: Montserrat;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.67;
  color: #ff7407;
  background-color: #ffffff;
  padding: 0px 7px 2px;
}

#report-issue-text {
  position: relative;
  top: 1px;
  left: 2px;
}

input[type='radio'] {
  appearance: none;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 2px solid #b6b6b6;
  background-color: #ececec;
}

input[type='radio']:checked {
  border: 6px solid #ff7407;
  background-color: white;
}

.no-input {
  position: absolute;
  z-index: 1040;
  bottom: 5px;
  background-color: #00000080;
  border-radius: 50%;
  /* border-radius: clamp(2.66px, calc(var(--icon-scale) / 3 * 1vh / var(--grid-columns)), 10px); */
}

.no-input-right {
  right: clamp(4px, calc(var(--icon-scale) / 2 * 1vh / var(--grid-columns)), 15px);
}

.no-input-left {
  left: 5px;
  /* left: clamp(4px, calc(var(--icon-scale) / 2 * 1vh / var(--grid-columns)), 15px); */
}

.no-input img {
  /* height: 30px; */
  /* height: clamp(8px, calc(var(--icon-scale) * 1vh / var(--grid-columns)), 30px); */
  width: auto;
  margin: clamp(2.66px, calc(var(--icon-scale) / 3 * 1vh / var(--grid-columns)), 10px);
}

.video-container-maximized .no-input {
  border-radius: clamp(2.66px, calc(var(--icon-scale) / 3 * 1vh), 10px);
}

.video-container-maximized .no-input-right {
  right: clamp(4px, calc(var(--icon-scale) / 2 * 1vh), 15px);
}

.video-container-maximized .no-input-left {
  left: clamp(4px, calc(var(--icon-scale) / 2 * 1vh), 15px);
}

.video-container-maximized .no-input img {
  height: clamp(8px, calc(var(--icon-scale) * 1vh), 30px);
  margin: clamp(2.66px, calc(var(--icon-scale) / 3 * 1vh), 10px);
}

.modal {
  z-index: 1500;
}

#page-mask {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1501;
}

#notification_prompt {
  display: none;
  position: fixed;
  z-index: 1502;
  top: 15px;
  right: 15px;
}

.join-pod-button-disabled {
  border-color: #b6b6b6;
  background-color: #b6b6b6;
  color: white;
}

.not-joined-yet {
  color: red;
}

#vue-div {
  height: 100%;
}

#upgradeParticipantToHost .vue-select {
  border-radius: 5px;
  border: 1px solid black;
}

.settings-box-content .vue-select ::placeholder,
#upgradeParticipantToHost .vue-select ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1;
  /* Firefox */
}

.settings-box-content .vue-select :-ms-input-placeholder,
#upgradeParticipantToHost .vue-select :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
}

.settings-box-content .vue-select ::-ms-input-placeholder,
#upgradeParticipantToHost .vue-select ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
}

.vue-select:hover,
.vue-input input:hover {
  cursor: pointer;
}

.arrow-downward {
  display: none !important;
}

.vue-select {
  width: 255px;
  height: 40px;
  border-radius: 12px;
  color: black;
  appearance: none;
  -webkit-appearance: none;
  /* safari and chrome */
  -moz-appearance: none;
  /* Mozilla */
  -ms-appearance: none;
  /* Ie */
  background-position: calc(100% - 12px) center !important;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat;
  padding-right: 20px;
}

.vue-input input {
  font-size: 11.5pt;
  padding-top: 5px;
  padding-left: 5px;
}

.vue-input input::placeholder {
  color: black;
  opacity: 1;
  /* Firefox */
  font-size: 14px;
  padding-left: 5px;
  margin-right: 20px;
}

.vue-input input:placeholder-shown {
  text-overflow: ellipsis;
}

.pod-text-input-box {
  display: flex;
  align-items: center;
  width: 255px;
  height: 40px;
  padding: 10px 90px 10px 12px;
  border-radius: 10px;
  border: solid 1px #b6b6b6;
  background-color: #ffffff;
  margin-bottom: 1rem;
}

.edit-pod-title-button {
  color: #ff7407;
  margin-left: 10px;
}

.edit-pod-title-input-div {
  width: 225px;
}

.edit-pod-title-input {
  width: 200px;
}

.picture-in-picture-video-container {
  height: 180px;
}

.active-speaker {
  border: 5px solid #ff7407;
  border-radius: 10px;
  transition: all 0.5;
  background-color: transparent;
  z-index: 989;
}

.participant-placeholder {
  font-size: 48px;
  color: white;
  border-radius: 50%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.active-speaker-side-menu-wrapper {
  height: 80px;
  width: 80px;
  border: solid 1px rgba(255, 116, 7, 0.3);
  margin: auto;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.active-speaker-side-menu {
  border: solid 3px #ff7407;
  background-color: #acacac;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 17px;
}

.speaker-image-wrapper {
  background-color: #ff7407;
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 50%;
  left: 58px;
  margin-top: 30px;
}

.speaker-image-wrapper img {
  height: 15px;
  width: 15px;
  margin-top: 3px;
}

.no-input-left-dashboard-pip {
  bottom: calc(clamp(4px, calc(var(--icon-scale) / 2 * 1vh / var(--grid-columns)), 15px) + 45px);
  left: 10px;
}

.no-input-left-dashboard-pip img {
  width: 24px;
  height: 24px;
  margin: 8px;
}

.back-to-meeting {
  color: white;
  width: 125px;
  display: flex;
}

.back-to-meeting-text {
  margin-top: 8px;
  line-height: 1;
}

.windows-btn.desktop-close-btn {
  -webkit-app-region: no-drag !important;
}

.windows-btn.desktop-maximize-btn {
  height: 15px;
  width: 15px;
  border-radius: 2px;
  border: 1px solid;
  -webkit-app-region: no-drag !important;
}

.windows-btn.desktop-minimize-btn {
  height: 15px;
  width: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-app-region: no-drag !important;
}

.windows-btn.desktop-minimize-btn span {
  height: 1px;
  width: 15px;
  background-color: black;
  -webkit-app-region: no-drag !important;
}

.window-actions {
  width: 102px;
  -webkit-app-region: no-drag !important;
}

.macos-btn {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  -webkit-app-region: no-drag !important;
  cursor: pointer;
}

.macos-btn.desktop-close-btn {
  background-color: #ff6262;
}

.macos-btn.desktop-minimize-btn {
  background-color: #ffbe3f;
}

.macos-btn.desktop-maximize-btn {
  background-color: #50c15b;
}

.back-home-btn {
  -webkit-app-region: no-drag !important;
  width: 18px;
  display: none;
}

.titlebar {
  background-color: #f1f1f1;
}

#macos-titlebar {
  width: 100%;
  display: none;
}

.desktop #macos-titlebar {
  display: block;
}

.search-meeting-input-field {
  border-radius: 6px;
  background-color: #fff;
  border: none;
  outline: none;
  width: 360px;
  font-size: 11px;
  padding: 6px;
  display: none;
  -webkit-app-region: no-drag !important;
}

#search-results-section {
  height: 44vh;
  position: absolute;
  z-index: 1280;
  width: 360px;
  background: white;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border: solid 0.5px #b4b4b4;
  top: 30px;
  display: none;
  overflow: scroll;
}

#search-results-section .meeting-name {
  font-size: 13px;
}

#search-results-section .link {
  font-size: 13px;
  color: #9b9b9b;
}

#search-results-section .launch-btn {
  font-size: 13px;
  font-weight: 600;
}

.active-screen-share-tab {
  border-bottom: 3px solid #ff7407;
}

.app-update-notification {
  background: #ff7407;
  z-index: 1502;
  top: 30px;
  left: 100px;
  right: 0px;
  width: calc(100% - 100px);
  -webkit-user-select: auto;
  -webkit-app-region: no-drag;
}

.reconnecting-notification {
  position: absolute;
  background-color: #ffdd64;
  z-index: 1200;
  left: 100px;
  right: 0px;
  width: calc(100% - 100px);
  text-align: center;
  -webkit-user-select: auto;
  -webkit-app-region: no-drag;
}

.notification-on-top-right {
  transition: all 0.3s;
  top: -310px;
  right: 10px;
  z-index: 1504;
  border-radius: 6px;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0px 1px 5px -1px grey;
}

.badge-purple a {
  color: white !important;
}

.color-grey-1 {
  color: #636366;
}

.fs-12 {
  font-size: 12px;
}

.send-notification-btn {
  max-width: 100%;
}

.error-indicator {
  background-color: #ff4343;
  width: 35px;
  height: 35px;
  padding: 10px;
}

.warning-indicator {
  background-color: #ffe353;
  width: 35px;
  height: 35px;
  padding: 10px;
}

@media only screen and (max-width: 600px) {
  .video-box-main {
    padding: 3px;
  }

  .video-name-label {
    top: 3px;
    left: 3px;
  }

  .sidebar-popup {
    position: absolute;
  }

  .sidebar-item {
    width: 25vw;
  }

  .show-sidebar-popup {
    bottom: 20vh;
    width: 100vw;
    margin-left: 0px
  }

  .maximize-minimize,
  .resolve-box,
  .user-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #messengerIframe {
    width: 100% !important;
    padding-bottom: 60px !important;
    background: white;
  }

  .options-box-container-center {
    top: 10vh;
    left: 5vw;
    width: 90vw;
    transform: translate(0px, 0px);
  }

  #options-box-center {
    width: 90vw !important;
  }

  .reactions-popup .emoji {
    font-size: 25px;
    display: flex;
    transition: all 0.3s;
    flex-direction: column;
    justify-content: center;
  }

  .reactions-popup {
    bottom: 40vh;
    left: 15px;
    border-radius: 0px;
    width: 100vw;
    justify-content: center;
  }

  .embed-responsive {
    height: 50vh
  }

  .dashboard {
    margin-left: 52px;
  }

  .sidenav-logo {
    display: none;
  }

  .sidenav {
    position: absolute;
    background-color: #ececec;
  }

  .sidenav.menu-open .top {
    overflow-y: scroll;
    padding-bottom: 100px;
  }

  .meeting-list-item .actions {
    padding: 5px 14px !important;
  }

  .meeting-list-item .launch-btn {
    width: 100px;
    margin-left: auto;
  }

  .meeting-list-item,
  .meeting-list-item .actions,
  .meeting-list-item .details {
    display: block !important;
    width: auto !important;
  }

  .meeting-list-item .copy-meeting-code {
    margin-left: 0px !important;
  }

  .meeting-list-item .time,
  .meeting-list-item .members,
  .meeting-list-item .code,
  .meeting-list-item .dot-menu {
    display: none;
  }

  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
  }

  .Pre-loader-box {
    width: 70%;
    left: calc(50% + 30px);
  }

  .dashboard .enabled-btn {
    width: 100%;
    padding: 11px 30px;
  }

  #sidebar {
    width: 100vw;
    padding-bottom: 60px !important;
    flex-direction: row !important;
    padding-top: 80px !important;
    height: auto !important;
    justify-content: start !important;
    flex-wrap: wrap;
  }

  .sidebar-item img {
    width: 12vw;
    max-width: 20vw;
    height: 12vw;
    max-height: 20vw;
  }

  .sidebar-top-elements,
  .sidebar-bottom-elements {
    display: flex
  }

  .sidebar-text {
    font-size: 10px;
  }

  .settings-box {
    width: 100%;
    padding: 10px !important;
    padding-bottom: 60px !important;
  }

  .side-panel-hidden {
    margin-left: -100%;
  }

  .side-panel-open {
    margin-left: -1px;
  }

  #video-boxes-container {
    margin-left: 0px;
    width: 100%;
  }

  .icon-box {
    left: 50%
  }

  .modal-content {
    width: auto;
    min-width: 85vw;
    max-width: 90vw;
  }

  #input-chat-msg {
    width: 82%;
  }

  .audio-video-source-choice {
    width: 100%;
    overflow: hidden;
  }

  .pods-btn,
  #sidebar-share-screen,
  .medical-dashboard-btn,
  .start-board-btn {
    display: none;
  }

  .sidebar-popup {
    left: 0px;
  }

  .sidebar-popup:after {
    top: 37%;
  }

  #video-boxes {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    justify-content: center;
  }

  #extras-video-boxes .video-container {
    height: 100%;
  }

  .video-container {
    width: 100% !important;
    margin: 3px 0px;
  }

  #extras-video-boxes {
    flex-direction: column;
    grid-column: none;
  }

  #extras-video-boxes .video-container {
    height: 100% !important;
    width: 100% !important;
    margin: 0px;
  }

  .icon_box {
    left: calc(30px + 50%) !important;
  }

  .small-screen-video-container {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
  }

  .video-container-maximized {
    left: 0px !important;
    width: 100% !important;
  }
}

.transcription-container,
.receptionist-checklist-container {
  position: absolute;
  width: calc(100% - 100px);
  left: 100px;
  bottom: 0px;
  height: 45%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  transition: all 0.3s;
  z-index: 2;
}

.receptionist-checklist-container {
  height: auto !important;
  z-index: 1202 !important;
  padding-bottom: 100px !important;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) -50%, rgb(0, 0, 0) 100%) !important;
}

.transcription-container .person-label {
  font-family: 'Roboto Mono';
  font-size: 12px;
  font-weight: bold;
  padding: 6px 8px;
  background-color: #ff7407;
  margin-top: 25px;
  width: fit-content;
  color: white;
}

.transcription-container .transcription-message {
  font-size: 15px;
  font-weight: 500;
  color: #3e3e3e;
  background-color: #ececec;
  padding: 9px 18px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 8px;
  width: fit-content;
}

.stop-transcription-btn {
  right: 50px;
  bottom: 50px;
  width: 165px;
}

.more-meeting-sidebar-options {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#transcripted-message-window {
  height: 80%;
  overflow-y: auto;
}

.speech-to-text-indicator-bubble {
  border: 1px solid #d30000;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s;
  padding: 2px;
}

.speech-to-text-indicator-bubble div {
  height: 15px;
  width: 15px;
  min-height: 15px;
  min-width: 15px;
  background-color: #ff5050;
  border-radius: 50%;
}

.bg-custom-warning {
  background-color: #fff6a9;
}

.custom-warning-indicator {
  border-radius: 50%;
  min-width: 30px;
  min-height: 30px;
  border: 2px solid #ff7407;
  background-color: transparent;
  color: #ff7407;
  max-width: 30px;
  max-height: 30px;
  font-weight: 1000;
}

#messengerIframe {
  width: 35vw;
  max-width: 410px;
  z-index: 1203;
}

.dashboard-notifications {
  top: 10px;
  right: 10px;
  z-index: 1204;
}

.dashboard-notification-element {
  margin-bottom: 15px;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff6a9;
  color: #3e3e3e;
  transition: all 0.3s;
  width: 20vw;
  max-width: 20vw;
}

.meeting-mobile-menu {
  top: 15px;
  right: 15px;
  color: white;
  background: rgb(231 231 231);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 1303;
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.max-w-100 {
  max-width: 100%
}

div:focus {
  outline: none;
}

.second-device-text {
  position: absolute;
  width: 100%;
  padding: 10px;
  background-color: #fff6a9;
  color: #3e3e3e;
  font-size: 15px;
  z-index: 1205;
  bottom: 0px;
  left: 0px;
}