/*****************************************************************
 *
 * video call default style
 *
 *****************************************************************/
.btn-size-20,
.icon-size-20 {
  width: 20px;
  height: 20px;
}

.btn-size-18 {
  width: 18px;
  height: 18px;
}

.btn-size-16 {
  width: 16px;
  height: 16px;
}

.item-align-center {
  text-align: center;
}

.top-margin-50 {
  margin-top: 50px;
}

.top-margin-20 {
  margin-top: 20px;
}

.top-margin-10 {
  margin-top: 10px;
}

.border-bottom-1 {
  border-bottom: 1px solid #D1D3D4;
}

.no-border-bottom {
  border-bottom: 0;
}

.full-width {
  width: 100%;
}

/*****************************************************************
 *
 * video call window
 *
 *****************************************************************/
#video-call-window {
  position: fixed;
  /*z-index: 1000;*/

  /*
   * current-page-menu -> z-index: 10;
   */
  z-index: 9;

  width: 400px;
  right: -400px;
  top: 50px;
  bottom: 0;
  
  background: #fff;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;

  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;

  /*
   * default font style
   */
  font-family: 'Montserrat', sans-serif;
  color: #3C3228;
}

#video-call-window.open {
  right: 0px;
}

#video-call-window.expand {
  width: 100%;
  border-left: 0;

  top: 0;
  border-top: 0;
}

#video-call-window.open.top-modal {
  z-index: 1100;
}

.window-waiting {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

/*****************************************************************
 *
 * minimize window
 *
 *****************************************************************/
.toggle-window-size-btn {
  background: url("../img/video-call-window/resize/expand.svg") no-repeat 0px 0px;
  width: 20px;
  height: 20px;
  
  position: relative;
  top: -11px;
  left: 8px;
}
.toggle-window-size-btn:hover {
  background: url("../img/video-call-window/resize/expand-hover.svg") no-repeat 0px 0px;
}

.toggle-window-size-btn.expand {
  background: url("../img/video-call-window/resize/reduce.svg") no-repeat 0px 0px;
}
.toggle-window-size-btn.expand:hover {
  background: url("../img/video-call-window/resize/reduce-hover.svg") no-repeat 0px 0px;
}

/*****************************************************************
 *
 * window header
 *
 *****************************************************************/
.window-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 45px;
  background-color: #FFF;
  border-bottom: 1px solid #D1D3D4;
}

.header-menu {
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 10px;
  padding-left: 5px;

  border-left: 1px solid #D1D3D4;
  display: inline-block;
}

.header-menu li {
  float: left;   
  width: 100px;
  height: 40px;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  text-align: center;
  margin-right: 5px;
}

.header-menu li button {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  color: #695541;
  font-size: 14px;

  border: 1px solid #D1D3D4;
  border-radius: 5px 5px 0 0;
  padding: 0;
}
.header-menu li button.disabled-button {
  color: #D1D3D4;
  cursor: not-allowed;
}
.header-menu li.selected button {
  background-color: #7BAFC2;
  border-color: #7BAFC2;
  color: #FFF;
}

.header-menu .window-header-icon {
  width: 20px;
  height: 20px;
}

#calling-tab .cbox-spinner {
  position: relative;
  top: -16px;
  left: -25px;
}
/*****************************************************************
 *
 * window body
 *
 *****************************************************************/
.window-body {
  margin-top: 45px;
  height: calc(100% - 45px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #FFF;
  padding: 10px 10px;
}

.secondary-tab {
  border-bottom: 1px solid #D1D3D4;
  margin-bottom: 15px;
}
.secondary-tab ul {
  margin-bottom: 0;
  position: relative;
  top: 1px;
}

.secondary-tab .tab-item {
  float: left;
  width: 50%;
}

.secondary-tab .tab-item button {
  background-color: #E6E7E8;
  border-top: 1px solid #D1D3D4;
  border-left: 1px solid #D1D3D4;
  border-right: 1px solid #D1D3D4;

  /* border-color is header color */
  border-bottom: 1px solid #E6E7E8;

  border-radius: 5px 5px 0px 0px;
  padding: 3px 10px;

  width: 98%;
  height: 30px;

  color: #808080;
  font-size: 14px;
}

.secondary-tab .tab-item.selected button {
  background-color: #FFF;
  color: #3773A5;
  font-weight: bold;
  border-top: 1px solid #D1D3D4;
  border-left: 1px solid #D1D3D4;
  border-right: 1px solid #D1D3D4;
  border-bottom: 0;
}

/*****************************************************************
 *
 * setting tab
 *
 *****************************************************************/
#sample-video {
  width: 160px;
}

/*****************************************************************
 *
 * input form
 *
 *****************************************************************/
.input-form {
  margin-top: 15px;
  min-height: 23px;
}

.input-form .title,
.input-form .detail {
  font-size: 14px;
}
.input-form .title {
  padding-left: 0;
}
.input-form .detail {
  padding: 0;
  font-weight: bold;
}

.input-form li {
  margin-bottom: 10px;
  height: 30px;
}
.input-form li.auto-height {
  height: auto;
}

.input-form .fa {
  font-size: 17px;
  margin-left: 10px;
}
.input-form .fa-check {
  color: #8EB734;
}
.input-form .fa-warning {
  color: #FFC200;
}

.edit-icon {
  background: url("../img/video-call-window/setting-tab/edit-device.svg") no-repeat 0px 0px;
  width: 20px;
  height: 20px;
  border: 0;
}
.edit-icon:hover {
  background: url("../img/video-call-window/setting-tab/edit-device-hover.svg") no-repeat 0px 0px;
}

.input-form .error-massage {
  color: #F47620;
  font-size: 12px;
  font-weight: normal;
}

.confirm-form-center {
  text-align: center;
  margin-top: 30px;
}

.input-form .detail.group-of-storage-percent {
  top: 0;
}

.input-form .detail .text-fiele {
  border: 1px solid #D1D3D4;
  padding: 0 5px;
}
.input-form .detail .text-fiele:focus {
  border: 1px solid #4B9BCD;
}

.input-form .detail .select-picker,
.input-form .detail .text-fiele {
  width: 100%;
  max-width: 288px;
  height: 30px;
}

.input-form .detail .select-picker.select-picker-with-icon {
  width: calc(100% - 35px);
}

#recheck-device-btn,
#recheck-device-btn:hover {
  padding-left: 30px;
}
#recheck-device-btn {
  background: url("../img/video-call-window/setting-tab/recheck-device.svg") no-repeat 6px 6px;
  background-size: 20px;
}
#recheck-device-btn:hover {
  background: url("../img/video-call-window/setting-tab/recheck-device-hover.svg") no-repeat 6px 6px;
  background-size: 20px;
}

/*****************************************************************
 *
 * Room list
 *
 *****************************************************************/
.section-list {
  border-top: 1px solid #D1D3D4;
  padding-top: 15px;
}

.section-list.first-section {
  border-top: 0;
  padding-top: 0;
}

.section-list .room-list {
  border-bottom: 1px solid #D1D3D4;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 0;
  margin-left: 15px;
}
.section-list .room-list:first-child {
  padding-top: 0;
}
.section-list .room-list:last-child {
  border-bottom: 0;
}

.section-list .special-box {
  color: #ED9494;
  border: 1px solid #ED9494;
  padding: 3px 5px;
  font-size: 12px;
  border-radius: 5px;
}

.section-list .room-side,
.section-list .button-side {
  padding: 0;
}
.section-list .button-side {
  text-align: right;
}

.section-list .room-side p {
  margin: 0;
}
.section-list .room-side .room-name {
  font-size: 14px;
  color: #3C3228;
  font-weight: normal;

  width: auto;
  max-width: calc(100% - 40px);
  padding-right: 10px;
}

.section-list .room-side .invited-icon {
  color: #808080;
}
.section-list .room-side .invited-icon img {
  vertical-align: sub;
}

.section-list .room-side .document-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #808080;

  display: inline-block;
}

.section-list .join-room-btn {
  width: auto;
  min-width: auto;
}

#video-call-window .section-list .section-header {
  font-size: 16px;
  color: #695541;
}

#video-call-window .section-list .section-header button {
  color: #4B9BCD;
  padding: 0;
  border: 0;
  background: transparent;
}

/*****************************************************************
 *
 * incoming call modal
 *
 *****************************************************************/
.header-push-modal {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  color: #3C3228;
}

.app-modal #accept-call {
  width: 40px;
  height: 40px;
  margin-left: 15px;
  background: url("../img/video-call-window/calling-tab/dialing-menu/start-call.svg") no-repeat 0px 0px;
}

.app-modal #decline-call {
  width: 40px;
  height: 40px;
  background: url("../img/video-call-window/calling-tab/dialing-menu/end-call.svg") no-repeat 0px 0px;
}

/*****************************************************************
 *
 * video calling tab
 *
 *****************************************************************/
.room-header {
  text-transform: capitalize;
  font-size: 14px;
  color: #3C3228;
}
.room-subheader {
  font-size: 16px;
  color: #695541;
  margin-top: 10px;
}
.room-smallest-header {
  font-family: 12px;
  color: #3C3228;
}

.dialing-video-icon {
  width: 80px;
  height: 80px;
}
.dialing-spinner {

}

#end-waiting-call {
  width: 60px;
  height: 60px;

  background: url("../img/video-call-window/calling-tab/dialing-menu/end-call.svg") no-repeat 0px 0px;
}

.video-room-header {
  border-bottom: 1px solid #E6E7E8;
  padding-bottom: 5px;
}

.room-name {
  font-size: 16px;
  font-weight: bold;
  color: #695541;

  width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-menu {
  width: 24px;
  height: 24px;
}
.room-link-btn {
  background: url("../img/video-call-window/calling-tab/room-menu/room-link.svg") no-repeat 0px 0px;
}
.room-link-btn:hover {
  background: url("../img/video-call-window/calling-tab/room-menu/room-link-hover.svg") no-repeat 0px 0px;
}
.conference-room-type-btn {
  background: url("../img/video-call-window/calling-tab/room-menu/conference-room-type.svg") no-repeat 0px 0px;
}
.conference-room-type-btn:hover {
  background: url("../img/video-call-window/calling-tab/room-menu/conference-room-type-hover.svg") no-repeat 0px 0px;
}

.video-view {
  position: relative;
  width: calc(100% - 110px); /* 110px is .user-video-list-section width */
}

.video-view .no-center-view-text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 20px); /* 20px is end call button at bottom center view */
  text-align: center;
}

.user-video-list-section {
  width: 110px;
  height: 100%;
  text-align: center;
  background-color: #FFF;
}

.user-video-list-section > ul > li {
  margin-bottom: 15px;
  position: relative;
}

.video-section,
.video-view {
  height: 230px; /* 200px (.video-section and .video-view) + 30px (.video-tool) */
}

.video-view-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  background-color: #808080;
  height: 22px;
  border: 1px solid #D1D3D4;
}

#stop-call-btn,
#leave-room-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/end-meeting.svg") no-repeat 0px 0px;
  background-size: 30px 20px;

  height: 20px;
  background-color: #FFF;
  background-position: center;
}

#stop-call-btn:hover,
#leave-room-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/end-meeting-hover.svg") no-repeat 0px 0px;
  background-size: 30px 20px;

  height: 20px;
  background-color: #FFF;
  background-position: center;
}

/*****************************************************************
 *
 * video call display view 
 *
 *****************************************************************/

/*
 * normal video window
 */

.video-view,
.user-video-list-section {
  float: left;
}

.center-display-view-group {
  padding: 0;
  margin: 0;

  text-align: center;
  background-color: #D1D3D4;
  height: calc(100% - 52px); /* 30px is .video-view-menu height + 22px is .video-view-menu height */
}

.video-display-status {
  color: #FFF;
  font-size: 12px;
  text-align: center;
}
.video-display-status .text {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
}

.attendee-video-name,
.attendee-spoker {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;

  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
}

.video-view .attendee-video-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  color: #FFF;
  text-align: center;
  text-shadow: 1px 1px #000;
}

.video-view .attendee-spoker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  font-size: 13px;
  color: #FFF;
  text-shadow: 1px 1px #000;
}

#video-call-window .center-display-view {
  float: left;
  padding: 6px;
}

#video-call-window .center-display-view .selected-view {
  position: relative;
  width: 100%;
}

.video-view .video-display,
.video-view .empty-video-display {
  width: 100%;
  height: 100%;
}

.video-view .video-display {
  background-color: #000;
}

.video-view .empty-video-display {
  background-color: #808080;
}
.empty-video-display.setting-not-show {
  background-color: #000;
}

/* display 1 view */
#video-call-window .center-view-1 .center-display-view,
.video-view .center-view-1 .video-display,
.video-view .center-view-1 .center-display-view .empty-video-display {
  height: 178px;
}

#video-call-window .center-view-1 .center-display-view {
  padding: 0;
}

#video-call-window .center-view-1 .center-display-view .selected-view {
  height: 178px;
}

.center-display-view-group.center-view-1 {
  padding: 0 16px;
}

/* display 2 views */
.center-display-view-group.center-view-2 {
  padding: 36px 0;
}

#video-call-window .center-view-2 .center-display-view {
  width: 50%;
}

#video-call-window .center-view-2 .center-display-view:first-child {
  padding-right: 3px;
}
#video-call-window .center-view-2 .center-display-view:last-child {
  padding-left: 3px;
}

#video-call-window .center-view-2 .center-display-view .selected-view {
  height: 91px;
}

/* display 4 views */
#video-call-window .video-view .center-view-4 .center-display-view {
  width: 50%
}

#video-call-window .video-view .center-view-4 .center-display-view:nth-child(odd) {
  padding-right: 3px;
}
#video-call-window .video-view .center-view-4 .center-display-view:nth-child(even) {
  padding-left: 3px;
}

#video-call-window .video-view .center-view-4 .center-display-view:nth-child(1),
#video-call-window .video-view .center-view-4 .center-display-view:nth-child(2) {
  padding-bottom: 3px;
}
#video-call-window .video-view .center-view-4 .center-display-view:nth-child(3),
#video-call-window .video-view .center-view-4 .center-display-view:nth-child(4) {
  padding-top: 3px;
}

#video-call-window .center-view-4 .center-display-view .selected-view {
  height: 80px;
}

/* display 6 views */
.center-display-view-group.center-view-6 {
  padding: 20px 0;
}

#video-call-window .video-view .center-view-6 .center-display-view {
  width: 33.33%;
}

#video-call-window .video-view .center-view-6 .center-display-view:nth-child(1),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(4) {
  padding-right: 3px;
}

#video-call-window .video-view .center-view-6 .center-display-view:nth-child(2),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(5) {
  padding-left: 3px;
  padding-right: 3px;
}

#video-call-window .video-view .center-view-6 .center-display-view:nth-child(3),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(6) {
  padding-left: 3px;
}

#video-call-window .video-view .center-view-6 .center-display-view:nth-child(1),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(2),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(3) {
  padding-bottom: 3px;
}

#video-call-window .video-view .center-view-6 .center-display-view:nth-child(4),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(5),
#video-call-window .video-view .center-view-6 .center-display-view:nth-child(6) {
  padding-top: 3px;
}

#video-call-window .center-view-6 .center-display-view .selected-view {
  height: 60px;
}

/* display 9 views */
#video-call-window .video-view .center-view-9 .center-display-view {
  width: 33.33%;
}

#video-call-window .video-view .center-view-9 .center-display-view:nth-child(1),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(4),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(7) {
  padding-right: 3px;
}

#video-call-window .video-view .center-view-9 .center-display-view:nth-child(2),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(5),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(8) {
  padding-right: 3px;
  padding-left: 3px;
}


#video-call-window .video-view .center-view-9 .center-display-view:nth-child(3),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(6),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(9) {
  padding-left: 3px;
}

#video-call-window .video-view .center-view-9 .center-display-view:nth-child(1),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(2),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(3) {
  padding-bottom: 3px;
}

#video-call-window .video-view .center-view-9 .center-display-view:nth-child(4),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(5),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(6) {
  padding-top: 3px;
  padding-bottom: 3px;
}

#video-call-window .video-view .center-view-9 .center-display-view:nth-child(7),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(8),
#video-call-window .video-view .center-view-9 .center-display-view:nth-child(9) {
  padding-top: 3px;
}

#video-call-window .center-view-9 .center-display-view .selected-view {
  height: 51px;
}

/* 
 * display 4 views 
 */
#video-call-window .center-view-4 .center-display-view.person-3:nth-child(3) {
  width: 100%;
}
#video-call-window .center-view-4 .center-display-view.person-3:nth-child(3) .selected-view {
  padding: 0 calc((100% - 50%) / 2);
}

/* 
 * display 6 views and display 9 views 
 */
#video-call-window .center-view-9 .center-display-view.person-7:nth-child(7) {
  width: 100%;
  padding-left: calc(((100% - 33.33%) / 2) + 3px);
  padding-right: calc(((100% - 33.33%) / 2) + 3px);
}

#video-call-window .center-view-6 .center-display-view.person-5:nth-child(4),
#video-call-window .center-view-9 .center-display-view.person-8:nth-child(7) {
  width: 50%;
  padding-left: calc(50% - 33.33%);
  padding-right: 3px;
}
#video-call-window .center-view-6 .center-display-view.person-5:nth-child(5),
#video-call-window .center-view-9 .center-display-view.person-8:nth-child(8) {
  width: 50%;
  padding-left: 3px;
  padding-right: calc(50% - 33.33%);
}

/*****************************************************************
 *
 * video call tool 
 *
 *****************************************************************/
.video-section .video-tool,
.user-video-list-section .video-call-section-header {
  height: 30px;
  padding: 8px 0 0;
}

.video-section .video-tool {
  background-color: #FFF;
  font-size: 12px;
  text-align: center;
  margin-bottom: 0;
}

.video-section .video-tool button,
.video-section .user-tool button {
  color: #3C3228;
  border: 0;
  padding: 0;
}

.video-section .video-tool li,
.user-video-list-section .user-tool li {
  display: inline-block;
}

#whiteboard-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/whiteboard.svg") no-repeat 0px 0px;
  background-size: 20px;
} 
#whiteboard-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/whiteboard.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#share-screen-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/share-screen.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#share-screen-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/share-screen-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#raise-hand-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/raise-hand.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#raise-hand-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/raise-hand-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#lower-hand-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/lower-hand.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#lower-hand-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/lower-hand-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#select-display-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/select-display-view.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#select-display-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/select-display-view-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#invite-user-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/invite-more-user.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#invite-user-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/invite-more-user-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

#batch-manage-user-btn {
  background: url("../img/video-call-window/calling-tab/video-tool/batch-manage-user.svg") no-repeat 0px 0px;
  background-size: 20px;
}
#batch-manage-user-btn:hover {
  background: url("../img/video-call-window/calling-tab/video-tool/batch-manage-user-hover.svg") no-repeat 0px 0px;
  background-size: 20px;
}

/*****************************************************************
 *
 * video call remote list
 *
 *****************************************************************/
.user-video-list-section .video-call-section-header .image {
  width: 20px;
  height: 20px;
}

.user-video-list-section .video-call-section-header .text {
  font-size: 12px;
  vertical-align: sub;
}

.user-video-list {
  height: calc(100% - 30px); /* 30px is .video-call-section-header */
  border-right: 1px solid #D1D3D4;
  border-top: 1px solid #D1D3D4;
  border-bottom: 1px solid #D1D3D4;
  padding: 10px 0 5px;
  margin: 0;

  overflow-x: hidden; 
  overflow-y: auto; 
}

/*****************************************************************
 *
 * video call avatar
 *
 *****************************************************************/
.user-video-list-section .video-display,
.user-video-list-section .avatar-dropdown-container {
  width: 50px;
  height: 50px;
}

.user-video-list-section .avatar-dropdown-container {
  top: 0;
}

.user-video-list-section .avatar-dropdown-container > img {
  width: 51px;
  height: 51px;
}

.user-video-list-section .avatar-video {
  width: auto;
  height: 50px;
}

.user-video-list-section .avatar-dropdown-container .avatar-name {
  margin-top: 13px;
  font-size: 15px;
}

.user-video-list-section .video-display {
  border-radius: 50%;
  background-color: #000;
}

.user-video-list-section .attendee-video-name {
  color: #3C3228;
  margin-bottom: 0;
}

/*****************************************************************
 *
 * user video tool
 *
 *****************************************************************/

.moderator-sign {
  background: url("../img/video-call-window/calling-tab/user-sign/moderator-sign.svg") no-repeat 0px 0px;
  background-size: 18px;  
}

.spoker-sign {
  background: url("../img/video-call-window/calling-tab/room-menu/conference-room-type.svg") no-repeat 0px 0px;
  background-size: 18px;
}

.block-video-sign {
  background: url("../img/video-call-window/calling-tab/user-sign/block-video-sign.svg") no-repeat 0px 0px;
  background-size: 18px;  
}

.block-audio-sign {
  background: url("../img/video-call-window/calling-tab/user-sign/block-audio-sign.svg") no-repeat 0px 0px;
  background-size: 18px;  
}

.moderator-sign,
.spoker-sign,
.block-video-sign,
.block-audio-sign {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 0;
}
.moderator-sign.is-spoker {
  top: -11px;
  left: 24px;
}

/* isn't moderator */
.block-audio-sign.is-block-video {
  top: -11px;
  left: 24px;
}
.block-video-sign.is-block-audio {
  left: 10px;
  top: 0;
}

/* is moderator with block audio or video */
.moderator-sign.block-audio-or-video {
  top: -11px;
  left: 24px
}

.block-video-sign.is-moderator,
.block-audio-sign.is-moderator {
  left: 10px;
  top: 0;
}

/* is moderator with block audio and video */
.moderator-sign.block-audio-and-video {
  left: 37px;
  top: -11px
}

.block-video-sign.is-moderator.is-block-audio {
  left: 18px;
  top: -7px;
}
.block-audio-sign.is-moderator.is-block-video {
  left: 8px;
  top: 10px;
}

.moderator-sign:hover,
.spoker-sign:hover,
.block-video-sign:hover,
.block-audio-sign:hover {
  cursor: default;
}

.manage-personal-user-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/manage-user.svg") no-repeat 0px 0px;
  background-size: 18px;

  position: absolute;
  z-index: 1;

  left: 65px;
}

/*
 * center view
 */
.block-video-sign.center-view,
.block-audio-sign.center-view  {
  position: absolute;
  top: 5px;
  right: 5px;
  left: auto;
}

.block-audio-sign.center-view.is-block-video {
  position: absolute;
  top: 5px;
  right: 28px;
}

.block-video-sign.center-view:hover,
.block-audio-sign.center-view:hover {
  cursor: default;
}

.center-view-menu-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
}
.center-view-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}
.center-view-menu .icon {
  width: 30px;
  height: 30px;
}
.center-view-menu .text {
  font-size: 13px;
  color: #4B9BCD;
  margin-bottom: 0;
}

.center-display-view-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/show-center-view.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.center-display-view-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/show-center-view-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.center-display-view-btn[disabled],
.center-display-view-btn[disabled]:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/show-center-view-disabled.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.hide-center-display-view-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/hide-center-view.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.hide-center-display-view-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/hide-center-view-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.mute-video-btn  {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-video.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.mute-video-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-video-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.mute-video-btn[disabled],
.mute-video-btn[disabled]:hover  {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-video-disabled.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.unmute-video-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unmute-video.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.unmute-video-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unmute-video-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.mute-audio-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-audio.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.mute-audio-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-audio-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.mute-audio-btn[disabled],
.mute-audio-btn[disabled]:hover  {
  background: url("../img/video-call-window/calling-tab/user-video-tool/mute-audio-disabled.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.unmute-audio-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unmute-audio.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.unmute-audio-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unmute-audio-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.block-video-btn {
  background: url("../img/video-call-window/video-status/video-call-enable.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.block-video-btn:hover {
  background: url("../img/video-call-window/video-status/video-call-enable-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.block-video-btn[disabled],
.block-video-btn[disabled]:hover  {
  background: url("../img/video-call-window/video-status/video-call-disable.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.unblock-video-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unblock-video.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.unblock-video-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unblock-video-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.block-audio-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/block-audio.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.block-audio-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/block-audio-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.block-audio-btn[disabled],
.block-audio-btn[disabled]:hover  {
  background: url("../img/video-call-window/calling-tab/user-video-tool/block-audio-disabled.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.unblock-audio-btn {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unblock-audio.svg") no-repeat 0px 0px;
  background-size: 16px;
}
.unblock-audio-btn:hover {
  background: url("../img/video-call-window/calling-tab/user-video-tool/unblock-audio-hover.svg") no-repeat 0px 0px;
  background-size: 16px;
}

.center-display-view-btn[disabled]:hover,
.mute-video-btn[disabled]:hover, 
.mute-audio-btn[disabled]:hover,
.block-video-btn[disabled]:hover,
.block-audio-btn[disabled]:hover {
  cursor: not-allowed;
}

/*****************************************************************
 *
 * expand video call window
 *
 *****************************************************************/
#video-call-window.expand {
  z-index: 10;
}

.video-call-body,
.video-calling-body,
.video-calling-view {
  height: 100%;
}

#video-call-window.expand .video-section {
  height: calc(100% - 45px);
}

#video-call-window.expand .video-view {
  width: 70%;
  height: 100%;
}
#video-call-window.expand .user-video-list-section {
  width: calc(30% - 10px); /* 10px is margin-left */
  margin-left: 10px;
}
#video-call-window.expand .user-video-list {
  border-left: 1px solid #D1D3D4;
}

#video-call-window.expand .video-view-menu {
  border: 0;
  height: 40px;
  background-color: #FFF;
}

#video-call-window.expand #stop-call-btn,
#video-call-window.expand #leave-room-btn {
  background: url("../img/video-call-window/calling-tab/expand-window-icon/end-call-icon.svg") no-repeat 0px 0px;
  background-size: 100px 40px;

  height: 40px;
  width: 100px;
  background-color: #FFF;
  background-position: center;
}
#video-call-window.expand #stop-call-btn:hover,
#video-call-window.expand #leave-room-btn:hover {
  background: url("../img/video-call-window/calling-tab/expand-window-icon/end-call-hover-icon.svg") no-repeat 0px 0px;
  background-size: 100px 40px;
}

/* user list avatar */
#video-call-window.expand .user-video-list-section > ul > li {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
}

#video-call-window.expand .user-list-avatar {
  position: absolute;
  left: 23px;
}

#video-call-window.expand .manage-personal-user-btn {
  left: 67px;
  right: auto;
}

#video-call-window.expand .user-list-tool {
  text-align: left;
  position: absolute;
  left: 95px;
  top: 8px;
  width: calc(100% - 95px);
}

/*
 * center display view
 */
#video-call-window.expand .center-display-view-group {
  /* 
   * 30px is .video-section .video-tool height
   * 40px is #video-call-window.expand .video-view-menu height 
   * 5px is margin from #video-call-window.expand .video-view-menu
   */
  height: calc(100% - 75px);
  padding: 0
}

#video-call-window.expand .center-display-view {
  padding: 10px;
}

#video-call-window.expand .center-display-view .selected-view {
  width: 100%;
  height: 100%;
}
#video-call-window.expand .video-view .video-display {
  height: 100%;
}

/* display 1 view */
#video-call-window.expand .center-view-1 .center-display-view {
  width: 100%;
  height: 100%; 
}

/* display 2 view */
#video-call-window .center-view-2 .center-display-view {
  width: 50%;
  height: 100%;
}

#video-call-window.expand .center-view-2 .center-display-view:first-child {
  padding-right: 5px;
}
#video-call-window.expand .center-view-2 .center-display-view:last-child {
  padding-left: 5px;
}

/* display 4 views */
#video-call-window.expand .video-view .center-view-4 .center-display-view {
  width: 50%;
  height: 50%;
}
#video-call-window.expand .center-view-4 .center-display-view.person-3:nth-child(3) {
  width: 100%;
}

#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(odd) {
  padding-right: 5px;
}
#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(even) {
  padding-left: 5px;
}

#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(1),
#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(2) {
  padding-bottom: 5px;
}
#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(3),
#video-call-window.expand .video-view .center-view-4 .center-display-view:nth-child(4) {
  padding-top: 5px;
}

/* display 6 views */
#video-call-window .video-view .center-view-6 .center-display-view {
  width: 33.33%;
  height: 50%;
}

#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(1),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(4) {
  padding-right: 5px;
}

#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(2),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(5) {
  padding-left: 5px;
  padding-right: 5px;
}

#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(3),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(6) {
  padding-left: 5px;
}

#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(1),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(2),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(3) {
  padding-bottom: 5px;
}

#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(4),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(5),
#video-call-window.expand .video-view .center-view-6 .center-display-view:nth-child(6) {
  padding-top: 5px;
}

/* display 9 views */
#video-call-window.expand .video-view .center-view-9 .center-display-view {
  width: 33.33%;
  height: 33.33%;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(1),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(4),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(7) {
  padding-right: 5px;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(2),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(5),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(8) {
  padding-right: 5px;
  padding-left: 5px;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(3),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(6),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(9) {
  padding-left: 5px;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(1),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(2),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(3) {
  padding-bottom: 5px;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(4),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(5),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(6) {
  padding-top: 5px;
  padding-bottom: 5px;
}

#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(7),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(8),
#video-call-window.expand .video-view .center-view-9 .center-display-view:nth-child(9) {
  padding-top: 5px;
}

/* 
 * display 6 views and display 9 views 
 */
#video-call-window.expand .center-view-9 .center-display-view.person-7:nth-child(7) {
  width: 100%;
  padding-left: calc(((100% - 33.33%) / 2) + 5px);
  padding-right: calc(((100% - 33.33%) / 2) + 5px);
}

#video-call-window.expand .center-view-6 .center-display-view.person-5:nth-child(4),
#video-call-window.expand .center-view-9 .center-display-view.person-8:nth-child(7) {
  width: 50%;
  padding-left: calc(50% - 33.33%);
  padding-right: 5px;
}
#video-call-window.expand .center-view-6 .center-display-view.person-5:nth-child(5),
#video-call-window.expand .center-view-9 .center-display-view.person-8:nth-child(8) {
  width: 50%;
  padding-left: 5px;
  padding-right: calc(50% - 33.33%);
}


/*****************************************************************
 *
 * feedback
 *
 *****************************************************************/
.window-body .top-feedback {
  position: absolute;
  z-index: 1;
  top: 55px;
  left: 10px;
  right: 10px;
  padding: 5px 10px;
  font-size: 12px;

  opacity: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.window-body .top-feedback.success, 
.window-body .top-feedback.error {
  opacity: 1;
}

.window-body .top-feedback.error {
  background-color: #EE9494;
  color: #3C3228;
}

.window-body .top-feedback .item-name {
  max-width: 100px;
}

/*****************************************************************
 *
 * video call modal - create video call
 *
 *****************************************************************/

.modal-open .modal.video-call-modal {
  z-index: 1110 !important;
  /* hide backdrop and show background modal */
  background: rgba(255, 255, 255, 0.5);
}

.video-call-modal .modal-body.create-room-modal,
.video-call-modal .modal-body.invite-more-user-modal {
  height: 507px;
}

.video-call-modal h3.modal-title span {
  position: relative;
  left: 0;
  top: 0;
}
.video-call-modal h3.modal-title span.header-step {
  font-size: 15px;
  width: calc(100% - 200px);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  top: 5px;
}

.manage-video-call-room {
  padding-top: 15px;
}

/* create room form */
.video-call-modal .input-form {
  padding: 0;
}

.video-call-modal .input-form .detail.item-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.video-call-modal .input-form .detail .select-picker,
.video-call-modal .input-form .detail .text-fiele {
  width: 100%;
  max-width: 100%;
  height: 30px;
}

.video-call-modal p.triangle-isosceles {
  width: 100%;
}

.input-form .detail .item-type-icon {
  width: 20px;
  height: 20px;
}

/* invite user */
.video-call-modal .search-user-list,
.video-call-modal .confirm-btn-modal {
  padding-left: 0;
}

.video-call-modal .selected-user-list {
  padding-right: 0;
}

.video-call-modal .selected-user-list .selected-user-table {
  position: relative;
  height: 240px;
}

.video-call-modal .share-file .selected-user-table .permission-setting.body {
  height: 310px;
}

.result.suggest-user-result {
  height: 354px;
}

.selected-user-list .suggest-button {
  height: 320px;
}

/* invite more user */
.video-call-modal .invite-more-user-modal .selected-user-list .selected-user-table {
  height: 240px;
}
.video-call-modal .invite-more-user-modal .share-file .selected-user-table .permission-setting.body {
  height: 145px;
}

.video-call-modal .invite-more-user-modal .selected-user-list .invited-user-list .selected-user-table {
  height: 150px;
}
.video-call-modal .invite-more-user-modal .share-file .invited-user-list .selected-user-table .permission-setting.body {
  height: 110px;
}
.video-call-modal .invite-more-user-modal .confirm-btn-modal {
  position: absolute;
  right: 0;
  bottom: 0;
}

.selected-user-list .invite-more-user-modal .suggest-button {
  height: 320px;
}

.video-call-modal .invite-more-user-modal .search-user-list .result {
  height: 352px;
}
.video-call-modal .invite-more-user-modal .search-user-list .result.search-with-doc {
  height: 312px;
}
.video-call-modal .invite-more-user-modal .search-user-list .result.search-with-suggest-and-search {
  height: 290px;
}

.video-call-modal .invite-more-user-modal .result .user-result.full-width {
  width: 100%;
}

/*****************************************************************
 *
 * video calling 
 * - setting user menu
 * - leave/end call for moderator
 *
 *****************************************************************/
.window-setting-menu {

}

.window-setting-menu .close-modal {
  font-size: 18px;
  left: 0;
  top: 0;
}

.window-setting-menu .setting-header {
  font-size: 16px;
  font-weight: bold;
  color: #4B4137;

  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  max-width: calc(100% - 0px);
}

.window-setting-menu .setting-menu-header {
  font-size: 16px;
  font-weight: bold;
  color: #695541;
}

.window-setting-menu .setting-item-btn {
  margin-top: 10px;
  color: #3c3228;
  font-size: 14px;

  height: 40px;
  width: 250px;
  border-radius: 5px;
  border: 1px solid #D1D3D4;
}

.window-setting-menu .avatar-dropdown-container {
  width: 80px;
  height: 80px;
  top: 0;
}
.window-setting-menu .avatar-dropdown-container > img {
  width: 81px;
  height: 81px;
}
.window-setting-menu .avatar-dropdown-container .avatar-name {
  font-size: 30px;
  margin-top: 20px;
}
.window-setting-menu .setting-destination {
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: #3C3228;
}

/*****************************************************************
 *
 * video calling - conference mode
 * change mode bwtween free for all and speaker mode
 *
 *****************************************************************/
.window-setting-menu .search-user-list {
  border-right: 0;
}

.window-setting-menu .search-user-list .result {
  height: 250px;
}

.window-setting-menu .search-result-list {
  position: relative;
}

.window-setting-menu .search-user-list input.search-result-radio-input {
  position: absolute;
  left: 0;
  top: 6px;
}

.window-setting-menu .result .user-result {
  margin-left: 25px;
}

/*****************************************************************
 *
 * video calling modal
 *
 *****************************************************************/
.video-call-modal.video-calling .modal-body {
  height: auto;
  text-align: center;
}


/*****************************************************************
 *
 * preview file
 *
 *****************************************************************/
.preview-video-call {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #FFF;
}
.preview-video-call.enabled {
  background: url("../img/video-call-window/video-status/video-call-enable-preview.svg") no-repeat 5px 5px;
  background-size: 23px 23px;
}
.preview-video-call.enabled:hover {
  background: url("../img/video-call-window/video-status/video-call-enable-hover.svg") no-repeat 5px 5px;
  background-size: 23px 23px;
  border: 1px solid #4B9BCD;
}

/*****************************************************************
 *
 * responsive
 *
 *****************************************************************/

@media (max-width: 991px) {
  .video-call-modal.video-calling .modal-content {
    background: rgba(255, 255, 255, 0.5);
  }

  .video-call-modal.video-calling .app-modal {
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  }
}

@media (max-height: 512px) {
  .video-call-modal .modal-body.create-room-modal {
    top: 255px;
  }
}