/* Need to modify global class as follows */

body{margin:0; background-image:none;}


/* New definitions here */

#console_head {
	display: flex;
	flex-direction: column;
	align-items: center;
	width:100%;
	background-color:#000000;
	position:sticky;
	top:0;
	z-index:1000;
}

#console_top_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px; /* Keep the 900px container width */
    width:100%;
    height: 50px;
}

#logo {
	width:400px;
	height:50px;
	margin-left: 5px;
}

#logo a {
	display:block;
	float:left;
	background:url(/images/t1/logo-400x50-clearbg.jpg) no-repeat center center;
	background-size: contain;
	height:50px;
	width:100%;
	margin: 0 0 0 0;
	text-indent:-9999px;
}

#connection_status {
	margin-right: 5px;
    padding: 0px 7px 0 5px;
    border-radius: 5px;
    border: 0;
    cursor: default;
    background-color: #dadada;
    transition: all 0.5s ease;
}

@media (max-width: 480px) {
  #connection_status {
    position: fixed;       /* take it out of the normal flow */
    top: 15px;             /* distance from top */
    right: 10px;           /* distance from right */
    z-index: 9999;         /* make sure it floats above everything */
  }
}

.connection-icon {
    margin-right: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
}

.connection-text {
    font-size: 10px;
    position: relative;
    top: -2px;
}



#status_wrap{width:100%;height:22px;background-color:#666666}

#status_wrap2{width:900px;margin: 0 auto 0;padding-top:2px;}

#status_calls{
	float:left;
	margin: 0 0 0 0;
	color:white;
	font-size:13px;
	font-family: verdana, arial, san-serif;
}

#status_balance{
	float:right;
	margin: 0 0 0 0;
	color:white;
	font-size:13px;
	font-family: verdana, arial, san-serif;
}

#status_balance .status-chat-link {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

#status_balance .status-chat-link:hover,
#status_balance .status-chat-link.cis-chat-button-active,
#status_balance .status-chat-link.cis-console-button-new,
#status_balance .status-chat-link.cis-console-button-new.cis-console-button-fading {
	background-color: transparent !important;
	color: #fff !important;
	font-weight: bold;
}

#status_balance .status-chat-link:hover {
	text-decoration: underline;
}

#console_head_shadow {
	box-shadow:5px 5px 8px #888888;
	width:100%;
	height: 8px;
	margin-top: -8px;
	position: sticky;
	top: 64px;
	z-index:190;
}

#connection_status.connection-online {

}

#connection_status.connection-online .connection-icon {
	color: #016700;
}

#connection_status.connection-offline {
    /* background-color: #dc3545; */
    color: #212529;
}

#connection_status.connection-offline .connection-icon {
	color: #bf0000;
}

#connection_status.connection-reconnecting {
    /* background-color: #ffc107; 
    color: #212529; */
    animation: pulse 1.5s infinite;
}
#connection_status.connection-reconnecting .connection-icon {
	color: #9d9d0c;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

#contentPart{ width:900px; margin:0 auto; min-height:325px; font:13px Verdana, Arial, sans-serif; color:#151515; }

/* end of old callinstudio.call_console.css, start of call_list.css **/

:root {
	--sortborder: #8f8f8f; /*#bf0000; */
}

.sortborder-top td {
	background-color: var(--sortborder);
	border-top: 1px solid #696969 !important;
	color: #f3f3f3;
	padding-left: 25px;
	border-left: 6px var(--sortborder) solid !important;
}

.sortborder-top td.is_sticky {
	position: fixed;
	top: 95px;
	z-index: 199;
	box-shadow: 5px 5px 8px #888888;
	border-radius: 0 0 15px 0;
	padding-right: 25px;

/***
 * position: fixed;
    top: 70px;
    box-shadow: 5px 5px 8px #888888;
    border-radius: 0 0 15px 0;
    padding-right: 25px;
    text-align: right;
    z-index: 500;
    left: 406px;
    padding-bottom: 4px;
**/
}

.sortborder td:first-of-type {
	border-left: 5px var(--sortborder) solid !important;
}

.sortborder-bottom td {
	border-bottom: 8px var(--sortborder) solid !important;

}

tr:last-child.sortborder-bottom>td:first-child {
	border-bottom-width: 6px !important;
	transition: border-radius 1s;
}




#call_list_container {
	min-height: 420px;


}

.main_loading_img {
	background: url('/hostcenter/img/loading_gif.gif');
	z-index: 100;
	position: absolute;
	top: 150px;
	left: 10px;
	width: 508px;
	height: 381px;
}

.list_error {
    color: #FF0000;
}

a {
		text-decoration: underline;
}

a.makepointer {
		cursor: pointer;
		cursor: hand;
}



.list_container {
		display: none;
		margin-top:8px;
}

 #call_list_container th {
	text-align: center;
	border: 0px;
	border-collapse: collapse;
}

#call_list_container td {
	border: 0px;
	border-collapse: collapse;		
}

.call td {
	text-align: center;		
		
}
td .note_text {
	text-align: left;		
		
}

#call_list_container .number {
		width: 14px;
	
}

#call_list_container .from {

	width: 225px
	
}

#call_list_container .type {

	width:74px

}

#call_list_container .duration {

	width:117px

}

#call_list_container .actions {
	width: 270px;
	text-align:right;
}


#call_list_container td.loading {
	width: 30px;
	position: relative;
}

#call_list_container td.loading.active {
	background: none;
}

#call_list_container td.loading.active::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/hostcenter/img/loading_row.gif');
	background-repeat: no-repeat;
	background-position: center center;
	pointer-events: none;
}

#call_list_container tr.speaking td.loading::before {
	content: '';
	position: absolute;
	inset: 6px;
	z-index: 1;
	border-radius: 50%;
	border: 2px solid #16a34a;
	animation: speaker-pulse 900ms ease-out infinite;
	pointer-events: none;
}

@keyframes speaker-pulse {
	0% {
		transform: scale(0.75);
		opacity: 1;
	}
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

#call_list_container td.loading .video_indicator {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	font-size: 18px;
	line-height: 1;
	opacity: 0.9;
}

#call_list_container td.loading .video_indicator.attached {
	color: rgb(0, 103, 0);
}

#call_list_container td.loading .video_indicator.obs-active {
	color: #0046c5;
	cursor: pointer;
	opacity: 1;
}

#call_list_container td.loading .video_indicator.obs-active:hover,
#call_list_container td.loading .video_indicator.obs-active:focus {
	color: #00308a;
	outline: none;
}

#call_list_container td.loading .video_indicator.obs-active.threedots_menu_open {
	background-color: #8f8f8f;
	border-radius: 0;
}

#call_list_container td.loading .video_indicator.pending {
	color: #777;
}

#call_list_container td.loading .video_indicator.pending.working {
	animation: video-indicator-working 1s ease-in-out infinite;
	transform-origin: center center;
}

#call_list_container td.loading .video_indicator.detached {
	color: #777;
	font-size: 24px;
	padding-bottom: 3px;
}

#call_list_container td.loading:not(.video-call) .video_indicator {
	display: none;
}

#call_list_container td.loading .video_indicator svg {
	display: block;
	width: 18px;
	height: 18px;
}

#call_list_container td.loading .video_indicator svg.video-play-svg {
	width: 22px;
	height: 22px;
	padding-top: 3px;
}

#call_list_container td.loading .video_indicator.attached svg,
#call_list_container td.loading .video_indicator.pending svg {
	fill: currentColor;
}

#call_list_container td.loading .video_indicator.detached svg {
	fill: currentColor;
	stroke: none;
	padding-top: 3px;
}

#call_list_container td.loading .video_indicator.detaching svg {
	fill: currentColor;
	stroke: none;
	padding-top: 3px;
}

.video_host_obs_menu {
	z-index: 1002;
}

.video_host_obs_menu.threedots_menu.autoscreen_recording_menu {
	width: 190px;
}

.video_host_obs_menu .video_host_obs_menu_heading {
	text-align: center !important;
}

.video_host_obs_menu_item .check {
	display: inline-block;
	width: 20px;
	color: #0046c5;
	font-weight: bold;
}

#call_list_container tr.video-bridge-call.video-bridge-host-self {
	background-color: #cc9999;
}

#call_list_container tr.video-bridge-call.video-bridge-host-superuser {
	background-color: #cc9999;
}

#call_list_container tr.video-bridge-call.video-bridge-initializing td.actions,
#call_list_container tr.video-bridge-call.video-bridge-connected td.actions {
	color: transparent;
}

#call_list_container tr.video-bridge-call td.from {
	font-size: 100%;
}

#call_list_container tr.video-bridge-call .video_bridge_indicator {
	font-size: 16px;
	width: 24px;
	height: 14px;
	padding-bottom: 0;
	line-height: 1;
}

#call_list_container tr.video-bridge-call .video_bridge_indicator svg {
	display: block;
	width: 24px;
	height: 14px;
	fill: currentColor;
}

#call_list_container tr.video-bridge-call td.loading .video_bridge_indicator.detached svg,
#call_list_container tr.video-bridge-call td.loading .video_bridge_indicator.detached svg path {
	fill: currentColor;
	stroke: none;
}

@keyframes video-indicator-working {
	0% {
		opacity: 0.45;
		transform: translate(-50%, -50%) scale(0.95);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.35);
	}
	100% {
		opacity: 0.45;
		transform: translate(-50%, -50%) scale(0.95);
	}
}

#call_list_container td.inactive {
	
	background-image: none;		
}

#call_list_container td.error {
	
	background: url('/hostcenter/img/icon-red-x.png');
	background-repeat: no-repeat;
	background-position:center center;		
}

#call_list_container td.note {
	text-align: center;
}

#call_list_container td.actions,
#call_list_container td.loading {
	padding-left: 0;
	padding-right: 0;
}


#call_list_container td a {
	cursor: default;
}

#call_list_container td.actions:not(.active) a {
	cursor: pointer;
}

#call_list_container td.active a {
	cursor: wait;
}

a.ban_caller_link, a.snooze_caller_link {
	cursor: pointer;		
}

a.force_delete_link {
	cursor: pointer;		
}

#call_list_container td {

}

tr.call td {
	text-align: center;					
}

tr.hostroom {
	background-color: #ccff99;
}

tr.hostroom.video-hostroom-pending {
	background-color: #ffffff;
}

tr.holdqueue {
	background-color: #ffffff;	
	
}

.note a.view_note, .note a.hide_note {
	text-decoration: none;		
		
}

ts.note_text {
	text-align: left;
}

#note_dialog textarea {
    font-size: 14px;
    height: 50px;
    width: 220px;
		
}

.note_text {
	font-size: 16px;
	padding-left:10px;
}

.autoscreen_note_prefix {
	font-size: 70%;
	display: block;
	margin-top: -5px;
	padding: 0 0 3px 3px;
}

.autoscreen_note_prefix_status {
	font-size: 85%;
}

.note_text_line {
	display: inline-block;
}

.note_text_secondary_name {
	color: #868686;
}

.note_text .note_text_line:hover {
	cursor: url('/hostcenter/img/notepad-text-cursor.png?v=20260602-note-text-cursor-4') 5 16, text;
}

.note_text textarea {
	font-size:16px;
	width:550px;
	height:100px;
}

.lookup_text {
	font-size: 12px;
}

tr.self {
    background-color: #cc9999;	
}

tr.superuser {
    background-color: #eee8aa;	
}

tr.active {	
    background-color: #ccff99;	
}


tr.even {
    background-color: #f5f5f5;			
}

tr.odd {
    background-color: #ffffff;				
}

.new_note, .old_note {
		background-image: url('/hostcenter/img/notepad-icon.png');
		background-repeat:no-repeat;
		width:20px;
		height:20px;
		cursor: pointer;
		float:left;
}

.aux_actions_icon {
		background-image: url('/hostcenter/img/bullet_arrow_right.png');		
		width:20px;
		height:20px;
		cursor: pointer;
		float:right;		
}

.dropbtn {
/*    background-color: #4CAF50; 
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
*/    
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 7px;
    left: 27px;
    background-color: #dcdcdc; /*#f1f1f1;*/
    min-width: 120px;
    box-shadow: -10px -6px 10px 0px rgba(0,0,0,0.2);
    border-radius: 0px 10px 10px 10px;
    z-index: 1;
}

.dropdown-content a {
    color: black !important;
    padding: 6px 6px !important;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
	font-weight: bold;
}

.dropdown-show {display:block;}

/* Dropdown Button */
.hoverdropbtn {
	color:white;
}

/* The container <div> - needed to position the dropdown content */
.hoverdropdown {
  position: relative;
  display: inline-block;
}

.hoverdropdown-show {display:block;}

/* Dropdown Content (Hidden by Default) */
.hoverdropdown-content {
  display: none;
  position: absolute;
  background-color: #dcdcdc;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.hoverdropdown-content a {
  color: black;
  padding: 12px 10px 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.hoverdropdown-content a:hover {font-weight:bold;}

/* Show the dropdown menu on hover */
/*.hoverdropdown:hover .hoverdropdown-content {display: block;}
*/

/* Change the background color of the dropdown button when the dropdown content is shown */
.hoverdropdown:hover .hoverdropbtn {}

.hoverdropdown-divider {
	border-top: 2px solid #ccc;
}

.footerbtns {
	position: sticky;
	left:0;
	bottom:0;
	width:100%;
	background-color:#666666;
	text-align:center;
	padding-top:5px;
	height:23px;
	color:#ccc;
}
.footerbtns a {
	color:#ccc;
	padding:10px;
}


#showaudio_holdmusic {
	z-index:150;
	top:90px;
	position:sticky;
	color:white;
	background-color:#bf0101;
	padding:5px 8px;
	width:fit-content;
	float:right;
	border-radius:5px;
	margin-right:5px;
	cursor:default;
}

#subloader {
	min-height:300px;
	padding: 0 15px;
}

#get_audio_permission {
	border-radius: 5px;
	border:solid 1px #006790;	
}

#get_audio_permission:hover {
	color:#000;
	background-color:#4fca4f;
	border-radius: 5px;
	border:solid 1px #006790;
	cursor: pointer;
}

.get_audio_permission_disable:hover {
	background-color:#bf0101 !important;
	color:#fff !important;
}

#callactions {
	padding:2px 4px 4px 3px;
	border-radius:2px;
	background-color:unset;
	margin-right:-2px;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease, background-color: 0;

}

#callactions.suspended_calls {
	background-color:#bf0101;
	border-radius:0 5px 5px 0;
	padding-bottom:7px;
	padding-top:6px;
	padding-right:7px;
	margin-left:-5px;
	margin-right:0px;
}

#callactions.suspended_calls.shownmenu {
	border-bottom:0px;
	border-radius: 5px 5px 0 0;
}

#callactions.shownmenu:not(.suspended_calls) {
	background-color:008000;
	border-radius:0 5px 0 0;
	border-bottom:0px;
	padding-bottom:7px;
	padding-top:6px;
	padding-right:7px;
	margin-left:-5px;
	margin-right:0px;
}

.caret {
	display:inline-block;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
  height: 6px;
	width: 6px;
	margin-right:6px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transition-duration: 0.4s;
  transition-property: transform;
}

.caret_rotate {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin-bottom:2px;
	margin-left:2px;
	margin-right:4px;
}

.notesli li {
	margin-bottom:15px;
	margin-left:-20px;
}

#contentPart {
   width:unset;
   max-width:900px;
}


.list_container table {
	width:100%;
	border: 2px solid #696969;
	border-left-width: 1px;
	border-right-width: 1px;
    margin-bottom: 30px;
	overflow: hidden;
}

#call_list_container {
	min-height:300px;
}

#call_list_container .from, #call_list_container .number {
	font-size: 16px;
}

#call_list_container table tr.call:nth-of-type(n+3) td {
	border-top: 1px solid #696969;
}

.note td {
	border-bottom: 0px;
	padding-bottom: 8px;
}

.actions a {
	border-radius:5px;
  border-color:#000;
  color:#fff;
  text-decoration:none;
  padding: 5px;
  font-size:13px;
  line-height:30px;
  white-space:nowrap;
}

.dropdown-content a {
	padding: 6px;
}

ul.actionbtns {
	margin:0px;
}

ul.actionbtns li {
	display:inline-block;
}

.dropbtn {
	margin-left:0px;
}

.dropbtn, .delete_link, .ban_link, .snooze_link {
	background-color:#bf0000;
	border:solid 1px #bf0000 !important;
}

.dropbtn:hover, .delete_link:hover, .ban_link:hover, .snooze_link:hover {
	color:#000;
	background-color:#ffbdbd;
}


.talk_link, .unmute_link, .callback_link {
	background-color:#006700;
	border:solid 1px #006790 !important;
}

.talk_link:hover, .unmute_link:hover, .callback_link:hover {
	color:#000;
	background-color:#4fca4f;
}

.mute_link {
	background-color:#e49f03;
	border:solid 1px #e49f03 !important;
}

.mute_link:hover {
	color:#000;
	background-color:#ffeaba;
}

.queue_link {
	background-color:#a06800;
	border:solid 1px #a06800 !important;
}

.queue_link:hover {
	color:#000;
	background-color:#efdab7;
}

.screen_link, .screener_hostroom_link, .screener_hostqueue_link, .screener_callqueue_link, .screener_returntoscreener_link {
	background-color:#0046c5;
	border:solid 1px #0046c5 !important;	
}

.screen_link:hover, .screener_hostroom_link:hover, .screener_hostqueue_link:hover, .screener_callqueue_link:hover, .screener_returntoscreener_link:hover {
	color:#000;
	background-color:#d4e3ff;
}

.new_note:hover {
	background-color:#00000040;
	border-radius:3px;
}

.dropdown-content a {
	text-align:center;
	border-radius: 0;
	display: inline;

}

.dropdown-content a:hover {
	font-weight: unset;

}

.dropdown-content {
	top:0px;
	right:-1px;
	left:unset;
	width: 0;
	min-width:unset;
	background-color: unset;
	border-color:#bf0000;
	border-radius: 5px;
	box-shadow: 5px 5px 8px #888888;
}

.dropdown-show {
	width: unset !important;
}

.dropdown-separator {
	border: 1px solid #bf0000;
	background-color: #ffbdbd;
	width:15px;
	display: inline;
	padding: 3px 0 6px 0;
}

.hoverdropdown {
	cursor:pointer;
}

.hoverdropdown-content {
	margin: 5px 0 0 -5px;
	box-shadow: 5px 5px 15px #888888;
	border-radius: 5px;
	overflow: hidden;
	display:none;
	width:230px;
	margin-top:5px;
	border: 3px #8f8f8f solid;
	border-radius: 0 5px 5px 5px;
	z-index:1001;
}

.hoverdropdown-content a:hover {
	background-color: #e8e8e8;
}

.hoverdropdown-divider {
	border-top: 1px solid #888888;
}

.dropdown-content .drop_link, .dropdown-content .snooze_link, .dropdown-content .ban_link, .dropdown-content .dial_starsix_link, .dropdown-content .host_callbackmode_link, .dropdown-content .screener_callbackmode_link, .dropdown-content .listenonly_hangup_link {
	background-color: #bf0000;
	border: solid 1px #bf0000 !important;
	color:#fff !important;
}

.dropdown-content .drop_link:hover, .dropdown-content .snooze_link:hover, .dropdown-content .ban_link:hover, .dropdown-content .dial_starsix_link:hover, .host_callbackmode_link:hover, .screener_callbackmode_link:hover, .dropdown-content .listenonly_hangup_link:hover {
	background-color:#ffbdbd;
	color:#000 !important;
	border: solid 1px #bf0000 !important;

}

.dropdown-content .dial_starsix_link {
	background-color: #006700;
}

.dropdown-content .dial_starsix_link:hover {
	background-color: #4fca4f;
}

.dropdown-content .host_callbackmode_link {
	background-color: #b3a720;
}

.dropdown-content .host_callbackmode_link:hover {
	background-color: #fded38;
}

.dropdown-content a:first-of-type {
	border-radius: 5px 0 0 5px;
}

.dropdown-content a:first-of-type:hover {
	border-left-color: #bf0000 !important;
}

.dropdown-content a:last-of-type {
	border-radius: 0 5px 5px 0;
}

.dropdown-content a:first-of-type:last-of-type {
	border-radius: 5px;
	border-color: #bf0000 !important;
}

#status_wrap {
	height: unset;
	display: flex;
	padding-bottom: 4px;
}
#status_wrap2 {
	max-width: 900px;
	width: 100%;
}

#status_calls {
	padding: 0 5px;
}

#status_calls_footer {
	padding: 3px 5px;
	float:right;
}

#status_balance {
	padding-right:5px;
}

#bottom .bottom_text {
	width:unset;
	max-width:900px;
}

.infoatbottom {
	padding: 0 5px;
}

#no_host, #no_calls {
	padding:0 5px;
}

#footer, #bottom {
	padding:0 5px;
}

#footer .content {
	width:unset;
	max-width:900px;
}

 .footerbtns {
 	height:unset; 
 	line-height:23px;
 	padding-bottom: 3px;
 	z-index: 200;
}

.footerbtns a {
	background-color:#717171;
	border:solid 1px #000 !important;
	font-family: verdana, arial, sans serif;
	font-size:11px;
	color: #dadada;
}

.footerbtns a:hover {
	color:#fff;
	background-color:#bf0101;
}

	#btmbtn_chat.cis-chat-button-active,
	#btmbtn_sms.cis-chat-button-active,
	#btmbtn_return_console.cis-chat-button-active {
		background-color:#006700;
	}

		#btmbtn_outbound_call:hover,
		#btmbtn_sms:hover {
			color:#000;
			background-color:#4fca4f;
	}

	#btmbtn_chat.cis-console-button-new,
	#btmbtn_sms.cis-console-button-new {
		color:#fff;
		background-color:#006700;
		transition: background-color .15s ease, color .15s ease;
	}

	#btmbtn_chat.cis-console-button-new.cis-console-button-fading,
	#btmbtn_sms.cis-console-button-new.cis-console-button-fading {
		color:#dadada;
		background-color:#717171;
		transition: background-color 2s ease, color 2s ease;
	}

.roomlabel {
	background-color: #696969;
	border-radius:0;
	position: sticky;
	top:72px;
	/* padding:4px; */
	text-align:center;
    color: #fff;
    font-weight: bold;
    transition: width 2s, border-radius 4s, box-shadow 0.5s;
    cursor: pointer;
    display:block;
    z-index:195;
}

.roomlabelw {
	width: 100%;
	display: flex;
}

.groupsort_sticky {
	background-color: var(--sortborder);
	border-radius: 0;
	padding: 4px 25px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: default;

}

.hide {
	display: none;
	transition: 5s all ease;
}

.scrollfrom_self {
	padding: 4px;
}

.scrollfrom_up, .scrollfrom_down {
	flex-grow: 1;
}

.video_host_obs_scene_label {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	padding: 4px 12px 4px 8px;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
	cursor: default;
}

.video_host_obs_scene_label.has-scene {
	display: flex;
}

.video_host_obs_scene_label.scene-hotkeys-active {
	background: rgba(255, 255, 255, 0.18);
}

@media screen and (max-width:579px) {
	#cl_hostroom .roomlabel {
		display: flex;
		flex-direction: column;
	}

	#cl_hostroom .roomlabel.scene-label-stacked {
		width: 100%;
	}

	#cl_hostroom .video_host_obs_scene_label.has-scene {
		order: -1;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		padding: 4px 8px;
	}
}

.scrollfrom_up:hover {
	cursor: n-resize;
}

.scrollfrom_down:hover {
	cursor: s-resize;
}

.roomlabel span {
	font-weight: initial;
}

.title {
	display:none;
}

.type, .duration, #callinnumbers {
	display:none;
}

.type_sm, .duration_sm {
	font-size:11pt;
}

.duration_onair {
	font-size:10pt;
	font-weight: bold;
	color:#bf0000;
	white-space:nowrap;
	cursor:pointer;
}

.note_text textarea {
	width:96%;
	box-shadow: 5px 5px 8px #888888;
	border-radius: 5px;
	padding: 15px;
}

.note_text textarea:focus {
	outline: 0;
}

.note_text {
	cursor: url('/hostcenter/img/notepad-icon.png'), auto;
	width: 100%;
}

.editnote_instructions {
	font-size: 9pt;
	margin: 5px 11px 3px 11px;
	max-width: 700px;
}

.autoscreen_prompt_cell {
	text-align: left;
}

.autoscreen_prompt_cell .autoscreen_prompt_editor.note_text {
	float: right;
	width: min(620px, calc(100% - 26px));
	min-width: 0 !important;
	max-width: none;
	margin: 4px 26px -5px auto;
	text-align: left;
	cursor: default;
}

.autoscreen_prompt_cell .autoscreen_prompt_editor.note_text textarea {
	height: 100px;
	width: 100%;
	resize: vertical;
}

.autoscreen_prompt_input_row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
}

.autoscreen_prompt_text {
	flex: 0 0 auto;
	font-size: 9pt;
	min-width: 0;
	padding-left: 8px;
}

.autoscreen_prompt_input_row textarea {
	box-sizing: border-box;
	flex: 0 1 auto;
	min-width: 0;
	width: 100%;
}

.autoscreen_prompt_instructions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	width: 100%;
}

.autoscreen_prompt_footer_row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
}

.autoscreen_prompt_instruction_text {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 3px 0px 8px;
}

	.autoscreen_prompt_actions {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		gap: 6px;
		margin-left: auto;
		padding-top: 4px;
		white-space: nowrap;
	}

.autoscreen_recording_dropdown {
	display: inline-block;
	margin-left: 6px;
	position: relative;
}

	.autoscreen_recording_button {
		background: #eee;
		color: #000;
		border-width: 1px;
		border-radius: 5px;
		cursor: pointer;
		font-size: 11px;
		line-height: 1.2;
		margin: 0;
		min-width: 38px;
		padding: 3px 7px;
	}

.threedots_menu.autoscreen_recording_menu {
	bottom: auto;
	box-sizing: border-box;
	display: none;
	left: 0;
	margin: 0;
	right: auto;
	top: 0;
	transform: none;
	width: 170px;
	z-index: 1002;
}

.autoscreen_recording_menu.dropdown-show {
	display: block;
}

.autoscreen_recording_length_label {
	color: #000 !important;
	cursor: default;
	display: block;
	font-weight: bold !important;
	padding: 8px 6px;
	text-align: left;
}

.autoscreen_recording_option_selected {
	background-color: #e8e8e8;
	font-weight: bold;
}

		.autoscreen_prompt_actions button {
			background-color: #e9e9e9;
			border-width: 1px;
			border-radius: 5px;
			color: #000;
			cursor: pointer;
			font-size: 12px;
			font-weight: normal;
			line-height: 1.2;
			margin: 0;
			min-width: 0;
			padding: 5px 8px;
			position: relative;
		}

		.autoscreen_prompt_actions button::after {
			content: attr(data-label);
			display: block;
			font-weight: bold;
			height: 0;
			overflow: hidden;
			visibility: hidden;
		}

		.autoscreen_prompt_actions button:hover,
		.autoscreen_prompt_actions button:focus-visible {
			font-weight: bold;
		}

		.autoscreen_prompt_actions button:focus-visible {
			box-shadow: 0 0 0 1px #1266d6;
			outline: none;
		}

		.autoscreen_prompt_actions .autoscreen_recording_button {
			font-size: 11px;
			padding: 3px 7px;
		}

.lookup_text {
	font-size: 12px;
	padding-left: 13px;
	color: #636363;
}

.raisehand_link {
	background-image: url('/hostcenter/img/raisehand.png');
	background-size: 30px;
	border-radius: 10px;
	width: 30px;
	height: 30px;
	float: left;
}

.raisehand_link:hover {
	background-color: #00000040;
	cursor:pointer;
}

#webrtc_callbutton {
	background-color: #e49f03;
	color: #000;
	cursor: progress;
}

.dimbackground-curtain {
	cursor: not-allowed;
}

.noselect,
#callactions,
#call_list_container td.actions,
#call_list_container td.actions a,
#call_list_container .threedots {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome and Opera */
}

body.note-selection-active,
body.note-selection-active * {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body.note-selection-active #call_list_container .note_text.note-selection-source,
body.note-selection-active #call_list_container .note_text.note-selection-source * {
  -webkit-touch-callout: default;
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}

.arrowup {
	border: solid #fff;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 3px;
	margin-right:5px;

	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);

}

.arrowdown {
	border: solid #fff;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 3px;
	margin-right: 5px;

	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.roomlabel.is_sticky {
	background-color: #696969; /* #006700;  */
	/*border-radius: 0 0 15px 0px;*/
	box-shadow: 5px 6px 8px -4px #888888;
	transition: height 0s, width 2s;
	z-index: 201;
}

.fadeout_pending {
	display: none;
}

.fadeout {
	display:inline;
	color:#bf0101;
	animation: fadeOut forwards 2s;
}

@keyframes fadeOut {
	0% {opacity:1;}
	100% {opacity:0;}
}

@media screen and (min-width:580px) {

	.roomlabel {
		border-radius: 0 15px 0 0;
	    transition: width 2s, border-radius 0.5s, box-shadow 0.5s;
	   	width:fit-content;
	   	display: flex;
	}

	.video_host_obs_scene_label {
		margin-left: -80px;
		margin-right: 10px;
	}

	#cl_hostroom .roomlabel.scene-label-stacked {
		width: 100%;
		flex-direction: column;
	}

	#cl_hostroom .roomlabel.scene-label-stacked .video_host_obs_scene_label.has-scene {
		order: -1;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		padding: 4px 8px;
	}

	.roomlabelw {
		width: 300px;
	}

	.groupsort_sticky {
		border-radius: 0 0 15px 0;
	}

	.roomlabel.is_sticky {
  		transition: width 2s, border-radius 0.5s, box-shadow 0.5s;
  		border-radius: 0 0 15px 0px;
 	}

	.type, .duration {
		display:table-cell;
	}
	.type_sm, .duration_sm {
		display:none;
	}
	.note_text textarea {
		width:550px;
	}

	.note_text {
		width: unset;
		min-width: 550px !important;
		max-width: fit-content;

	}

	.autoscreen_prompt_cell .autoscreen_prompt_editor.note_text {
		width: min(620px, calc(100% - 26px));
		min-width: 0 !important;
		max-width: none;
	}

	.autoscreen_prompt_cell .autoscreen_prompt_editor.note_text textarea {
		width: 100%;
		flex: 0 1 auto;
		min-width: 0;
	}

	#callinnumbers {
		display:inline-block;
	}

	.list_container table {
		transition: border-radius 1s;
	}
}

/**#listenonlymode {
	display:none;
}**/

@media screen and (min-width: 900px) {

	.list_container table {
		width:100%;
		border: 2px solid #696969;
	    border-radius: 0 15px 15px 15px;
	    transition: border-radius 1s;
	}
 	
  .roomlabel {
  	border-radius:15px 15px 0 0;
  }

  .roomlabel.stuck_tobottom {
		border-radius: 0 0 15px 15px;
	}

	#callactions.suspended_calls {
		border-radius: 5px;
	}

	#callactions.shownmenu:not(.suspended_calls) {
		border-radius: 5px 5px 0 0;
	}

	tr:last-child.sortborder-bottom>td:first-child {
		border-bottom-left-radius: 13px;
		transition: border-radius 1s;
	}

}