/* CSS Document */

#LoginForm{ 
	background-image: linear-gradient(to bottom,#021a3b 10%,#204097 90%); 
	background-repeat:no-repeat; 
	background-position:center; 
	background-size:cover; 
	padding:10px;
	height: 600px !important;
}

.darker-grey {
	color: #727272;
}

.form-heading { 
	color:#fff; 
	font-size:30px; 
	text-align: center; 
	padding: 10px 0 10px 0;
}

.login-form .form-control {
	border-radius: 4px;
	height: 50px;
	line-height: 50px;
}

.or {
	color:#777;
}	

.main-div {
	background: #ffffff none repeat scroll 0 0;
	border-radius: 2px;
	margin: 10px auto 30px;
	max-width: 95%;
	padding: 20px 40px 30px 40px;
}

.login-form .btn-pink, #offline-message-button {
	height: 50px;
}

#ChatForm{
	background-image: linear-gradient(to bottom,#021a3b 10%,#204097 90%); 
	height:600px;
	border-bottom: 1px #ddd solid;
	overflow: hidden;
}

.messageBoxContainer {
	position:absolute;
	bottom:0;
	display: block;
	height: 65px;
	background-color: #fff !important;
	width:520px;
	padding: 15px;
}	

.messageBox {
	outline:none !important;
	box-shadow: none !important; 
	border: none !important;
	border-radius: 0 !important;
	overflow-y: hidden;
	resize: none !important;
    overflow-x: hidden;
    line-height: 1.2;
    font-size: 16px;   
    padding: 0 !important;
}

.messageBox:focus, .messageBox:active, .sendMessageButton:focus, .sendMessageButton:active {
	outline:none !important;
	box-shadow: none !important; 
	border: none !important;
}	

.sendMessageButton {
	outline:none !important;
	box-shadow: none !important; 
	border: none !important;
	text-transform: none;
}	

.message-text {
	word-break: break-word;
}

.message-received {
	border-radius: 1.6rem 1.6rem 1.6rem .27rem;
	padding: 12px;
	max-width: 94%;
	font-size: 16px;
}	

#ChatForm .send-message-button:hover {
	text-decoration: none;
}

#start-chat-button, #send-offline-message-button {
	outline: none !important;
}

#offline-message	{
	height: auto !important;
	resize: none;
	font-size: 16px;
	line-height: normal !important;
}

textarea {
	padding: 12px;
	box-sizing: border-box;
}

.center {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

}

.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
  background: #c83d82;
  animation: pulse-animation 2s infinite;
}

.online-circle {
  fill: #28e028;
  stroke: #0e7d0e;
  stroke-width: 0.1875em;
}

.offline-circle {
  fill: #e80505;
  stroke: #420606;
  stroke-width: 0.1875em;
}

.nav-menu {
	width: 150px;
	background-color: #f5f5f5;
	z-index: 9999;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	text-align: left;
	position: absolute;
	right:114px;
	margin-top:-80px;
}
.nav-menu-item {
	width: 100%;
	padding:12px 0 12px 0;
	cursor:pointer;
}

.nav-menu-item:hover {
	background: #c83d82;
	color: #fff !important;
}	

.no-margins {
	margin:0!important;
}

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
    margin-right:20px;
}

#modal-chat-info-table td,  #modal-chat-info-table th {
	padding: 10px;
}

#modal-chat-info-table th, #chats-list-table th {
	background-color: #021a3b;
	color: #fff;
}

#modal-chat-info-table td:last-child, #modal-chat-info-table th:last-child {
	display:none;
}

#messagesModal .modal-header {
    height: 170px;
    background-color: #f5f5f5;
}

#messagesModal .modal-footer {
    height: 140px;
    background-color: #f5f5f5;
}

#messagesModal .modal-body,
#messagesModal .modal-footer {
    position: absolute;
    width: 100%;
}

#messagesModal .modal-body {
    bottom: 150px;
    top: 170px;
    overflow-y: auto;
}

#messagesModal .modal-footer {
    bottom: 0;
}

#messagesModal textarea {
	resize: none;
}

#modal-chat-info-table tr:nth-child(1) {
	font-size: 80% !important;
}

#modal-chat-info-table tr:nth-child(2) {
	font-size: 112%;
	background-color: #fff;
}

.modal-open .modal {
	overflow-y: hidden;
}

#messagesModal #templates-button, #messagesModal #delete-chat-button, #messagesModal #email-current-chat-button, #messagesModal #delete-current-chat-danger, #messagesModal #end-current-chat-button {
	margin-top:10px;
}


@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
	position: relative;
	left: -9999px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #c83d82;
	color: #c83d82;
	box-shadow: 9999px 0 0 -5px #c83d82;
	animation: dotPulse 1.5s infinite linear;
	animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #c83d82;
	color: #c83d82;
}

.dot-pulse::before {
	box-shadow: 9984px 0 0 -5px #c83d82;
	animation: dotPulseBefore 1.5s infinite linear;
	animation-delay: 0s;
}

.dot-pulse::after {
	box-shadow: 10014px 0 0 -5px #c83d82;
	animation: dotPulseAfter 1.5s infinite linear;
	animation-delay: .5s;
}

@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #c83d82;
  }
  30% {
    box-shadow: 9984px 0 0 2px #c83d82;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #c83d82;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #c83d82;
  }
  30% {
    box-shadow: 9999px 0 0 2px #c83d82;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #c83d82;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #c83d82;
  }
  30% {
    box-shadow: 10014px 0 0 2px #c83d82;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #c83d82;
  }
}

.snippet {
    position: relative;
    margin: 0;
    border-radius: .25rem;
}

.stage {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 10px;
	margin: 0 -5%;
	overflow: hidden;
} 

.modal-footer .btn {
	margin-left: 0px !important;
	margin-right: 5px;
}

.margin-bottom-xs {
	margin-bottom: 2px;
}

.margin-left-xs {
	margin-left: 12px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
	bottom: -30px;
	left: 100%;
	margin-left: -10px;
}

#offline-message-sent {
	height: 600px;
}

.label-pink {
	background-color: #c83d82;
}

.label-green {
	background-color: #28e028;
}

/* Extend the global .collapsible-table behaviour (lmm.less ~3057) up to the
   sm breakpoint for the chat list. The global rules only fire below 480px,
   but .hidden-xs (used on Expired At / Browsing) hides below 768px, so in
   the 480-767 range the table renders flat with all 9 visible columns
   crammed in. Mirroring the rules here keeps the stacked-card layout for
   the whole xs range. Scoped to #chats-table only — the chat detail modal
   keeps its original wide-table look.
   Labels stack ABOVE values (rather than the global rule's side-by-side
   layout) because chat column titles are long ("User Disconnected", "Email
   / IP / OS") and would crowd badge/button values in narrow phone widths.
   font-size is left to the inline .smallest class on each td (~11px) so
   the stacked view feels as compact as the original desktop table; the
   accepted-by H1 is overridden because 22px wraps awkwardly in stacked
   mode. !important is needed on a few declarations because the global
   rule sets padding/text-align with !important inside its own xs query. */
@media (max-width: 767px) {
	#chats-table table,
	#chats-table thead,
	#chats-table tbody,
	#chats-table tr,
	#chats-table td {
		display: block !important;
		width: 100% !important;
	}
	#chats-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#chats-table tr {
		border: 1px solid #c83d82;
		margin-bottom: 20px;
	}
	/* Global lmm.less highlights the first td of every collapsible-table row
	   with bg #eee — fine when the layout is dense but in our stacked chat
	   row it visually splits the card and reads as a doubled pink border
	   against the row's pink left/right edges. Reset to transparent. */
	#chats-table tr td:first-child {
		background-color: transparent !important;
	}
	#chats-table td {
		position: static;
		box-sizing: border-box;
		border: none;
		border-bottom: 1px solid #eee;
		padding: 10px 12px !important;	/* horizontal inset on td (not tr) so first-child grey bg fills row edge-to-edge */
		text-align: left !important;
		white-space: normal !important;
		font-size: 12px;	/* compact, matches the original .smallest desktop feel */
	}
	#chats-table td:last-child {
		border-bottom: none;
	}
	/* Operator-name H1 inside .accepted-by is 22px from desktop styles and
	   towers awkwardly in stacked mobile view — pull it back to inherit. */
	#chats-table .accepted-by h1 {
		font-size: inherit;
		line-height: 1.4;
		margin: 0;
	}
	#chats-table td:before {
		content: attr(data-title);
		display: block;
		position: static;	/* override global absolute-positioning */
		top: auto;
		left: auto;
		width: auto;
		padding: 0;
		white-space: normal;
		text-align: left;
		font-weight: bold;
		font-size: 11px;
		text-transform: uppercase;
		color: #999;
		margin-bottom: 4px;
	}
	#chats-table td:last-child:before {
		content: none;	/* actions cell has no data-title label */
	}

	/* Modal mirrors the chat list row template, which has hidden-xs on
	   Expired At + Browsing for the stacked-card layout. The modal uses
	   horizontal scroll instead of stacking, so unhide every column there. */
	#modal-chat-info-table .hidden-xs {
		display: table-cell !important;
	}
}

/* Above the stacked-card breakpoint the chat list goes back to being a flat
   11-column table, and its min-content width (~1100px, driven by the Latest
   Booking / Block User buttons and the Start-End dates) is wider than the
   page container on any viewport between the sm breakpoint and ~1130px - so
   the table pushed the whole document sideways instead of staying inside it.
   Measured before this rule: 280px of document overflow at an 850px viewport,
   138px at 992px, 30px at 1100px, none at 1200px+.
   Scroll it inside its own wrapper instead. Deliberately NOT .table-responsive
   on the wrapper: that class is mutually exclusive with .collapsible-table
   (below 767px it adds a 1px grey frame that duplicates the pink card border),
   so the overflow is scoped here to the widths where the card layout is off.
   Safe to clip: every tooltip in a chat row is data-container="body", and the
   OPEN button's chat detail view is a modal, so nothing is trapped in the box. */
@media (min-width: 768px) {
	#chats-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Bootstrap 3's .btn-block sets padding-left/right: 0 - it assumes a button
   stretched across a container, where the horizontal inset comes from the
   stretch rather than from padding. In the last table column the cell is
   sized by its own content, so the button gets NO inset of its own and the
   icon sits hard against the border: measured 2px at viewport widths 850-1100
   (where the table is at its min-content width), 11px at 1440, 139px in the
   stacked-card view. Restore the standard .btn padding so the inset is 12px
   everywhere and no longer an accident of how wide the column happened to be.
   Specificity (1,1,0) beats .btn-block's (0,1,0); the button stays block-level
   so it still spans the card in the mobile layout. */
#chats-table .view-all-messages {
	padding-left: 12px;
	padding-right: 12px;
}