.card-agenda {
  flex: none;
  width: 340px;
  padding: 16px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
}

.in-meeting {
  border-radius: 8px;
  border: 1px solid #C0C6DC;
}

.card-list-meeting {
  border: 1px solid #C0C6DC;
  border-radius: 8px;
}

  .card-list-meeting:hover {
    border-color: transparent;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
  }

  .card-list-meeting .is-control{
    opacity: 0;
  }

  .card-list-meeting:hover .is-control {
    opacity: 1;
  }

.dropdown-location {
  top: -25px;
  height: fit-content !important;
  left: 130px;
  position: absolute;
  width: 320px !important;
}

.dropdown-menu-child {
  top: -10px;
  left: auto;
  right: calc(100% + 2rem);
  width: 330px;
}

.card-calendar-meeting {
  padding: 4px 2px 4px 6px;
  border-radius: 4px;
}

.meeting-calendar-status-1 {
  border-left: 3px solid #266066;
  background: #F1F7F7;
  color: #266066;
}

.meeting-calendar-status-2 {
  border-left: 3px solid #355CAA;
  background: #ECF0FF;
  color: #002C70;
}

.background-layer {
  background: white;
  position: relative;
  height: 24.5px;
  border-radius: 4px;
}

.layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border: 0.5px solid #fff;
}

.container-meeting-infomation {
  border-radius: 8px;
  background: white;
  border: 1px solid #C0C6DC;
}

.sections-meeting-item {
  border-radius: 4px;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  background: white;
  cursor: pointer;
}

  .sections-meeting-item.is-active {
    background: #ECF0FF !important;
  }

  .sections-meeting-item.is-even {
    background: #FAFAFA;
  }

.container-meeting-detail {
  padding: 12px;
  border-radius: 8px;
  background: #fafafa;
}



.container-members {
  max-height: calc(100vh - 295px);
  min-height: calc(100vh - 295px);
  padding-right: 5px;
}

.container-notes-item {
  border-radius: 4px;
  padding: 12px;
  background-color: #F1F7F7;
}

.container-notes-icons {
  transform: translate(9999px);
  opacity: 0;
}

.container-notes-item:hover > .container-notes-icons {
  transition: opacity .1s linear;
  transform: translate(0);
  opacity: 1;
}

.card-summary-item {
  border-radius: 8px;
  border: 1px solid rgba(192, 198, 220, 0.50);
  background: #FFF;
}

.card-summary-heading {
  padding: 12px;
}

  .card-summary-heading.child {
    padding: 4px 12px;
    opacity: 0.8;
  }

.square {
  display: inline-block;
  width: 12px;
  height: 12px;
}

.container-nodata {
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.container-hasdata {
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  padding: 16px;
}

.container-sidebar-meeting {
  position: relative;
  padding: 12px 0px 12px 12px;
  max-height: calc(100vh - 51px - 40px);
  min-height: calc(100vh - 51px - 40px);
  width: 350px;
  max-width: 350px;
  transition: width 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
}

  .container-sidebar-meeting > .container-meeting-infomation {
    opacity: 1;
  }

  .container-sidebar-meeting.is-less {
    width: 40px !important;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.14);
    max-height: calc(100vh - 45px);
    min-height: calc(100vh - 45px);
  }

    .container-sidebar-meeting.is-less > .container-meeting-infomation {
      opacity: 0;
    }

  .container-sidebar-meeting > .sidebar-plan-icon {
    top: 50px;
  }

  .container-sidebar-meeting.is-less > .sidebar-plan-icon {
    left: 40px;
  }

  .container-sidebar-meeting > .sidebar-plan-icon {
    left: 350px;
  }

.container-brainstorm {
  transition: background-color 0.1s ease-out;
}

#main:has(.custom_datepicker_calendar.is-active) section:first-child {
  z-index: 0 !important;
}

.selectTag.is-active {
  background-color: #ECF0FF;
  border-radius: 4px;
}

.selectTag > a:hover {
  color: #355CAA !important;
}

#sidebar > section .dropdown-content ul li + li 
{
  margin-top: 0px;
}

#sidebar > section .columns .column {
  margin-top: 0px;
  display:block
}
#sidebar > section .dropdown-content .scrolly {
  margin-top: 0;
}

.meeting_sidebar > section .scrolly ul li > ul{
  display: flex !important;
  padding: 0 !important;
}
.meeting-infomation-content {
  max-height: calc(100vh - 51px - 40px - 54px - 80px);
  min-height: calc(100vh - 51px - 40px - 54px - 80px);
}

.slider-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.td-value .ql-editor:has([contenteditable]) {
  min-height: 80px;
}

.slider.fmeeting .ql-tooltip.ql-editing {
  left:1rem!important;
}

#meeting-call {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 100%;
  max-width: 500px;
  height: 100%;
  max-height: 400px;
  background: #313131;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}

#meeting-call.meeting-call-fullscreen {
  max-width: 100%;
  max-height: 100%;
  z-index: 999;
  bottom:0;
  right:0;
  border-radius:0;
}

  #meeting-call.meeting-call-fullscreen #meeting-call-body .video.remoteVideo {
    width: calc((100% - 16px) / 3);
  }

  #meeting-call.meeting-call-minimal {
    height: fit-content;
    width: 200px;
  }

    #meeting-call.meeting-call-minimal #meeting-call-header {
      position: relative;
      opacity: 1;
    }

    #meeting-call.meeting-call-minimal #meeting-call-body {
      flex: none;
      height: 0px;
      padding: 0;
      overflow:hidden;
    }

      #meeting-call-header {
        width: 100%;
        padding: 4px;
        display: flex;
        justify-content: end;
        gap: 4px;
        align-items: center;
        z-index: 9;
        position: absolute;
        top: 0;
        left: 0;
        background: #ffffffe0;
      }

#meeting-call-body {
  position: relative;
  width: 100%;
  flex: 1;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 7;
  justify-content: center;
  align-items: center;
}

  #meeting-call-body > *:only-child {
    width:100%;
    height:100%;
  }

  #meeting-call-body > *:only-child, #meeting-call-body .video.remoteVideo:not(.is-hidden):only-child {
    width: 100%;
    height: 100%;
  }

  #meeting-call-body .video.remoteVideo {
    width: calc((100% - 8px) / 2);
    height: calc((100% - 8px) / 2);
    max-height: 300px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #252525; /* Optional: gives contrast around the video */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
  }

    #meeting-call-body .video.remoteVideo:hover > .video-name {
      opacity:1;
    }

    #meeting-call-body .video.remoteVideo .remoteVideo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      max-width: 100%;
      max-height: 100%;
    }

#meeting-call-footer {
  width: 100%;
  height: fit-content;
  border-radius: 4px;
  z-index: 9;
  display: flex;
  padding: 4px 4px 8px 4px;
  justify-content: center;
  gap: 8px;
}

  #meeting-call-footer .button {
    color:white;
  }

  #meeting-call-start {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
  }

#localVideo {
  position:absolute;
  right:4px;
  bottom:4px;
  width:100%;
  max-width:calc(100% / 3);
  height:100%;
  max-height:calc(100% / 3);
  z-index:8;
}

.video-name {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  background: white;
  padding: 4px 8px;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  opacity: 0.4;
  transition: opacity ease 300ms;
  transform: translateX(-50%);
}

.video-avatar {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--shadow-2);
}