/* Main container */
.btb-chats-container {
  display: flex;
  height: 100vh;
  font-family: Arial, sans-serif;
}

/* Contacts list */
.btb-contacts-list {
  width: 25%;
  height: 100%;
  overflow-y: auto;
  background: #f9f9f9;
  padding: 15px;
  border-right: 1px solid #eee;
}

.btb-contacts-title {
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--Zone-Background);
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.btb-new-chat-button {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btb-new-chat-button:hover {
  background: rgba(var(--Zone-Background-RGB), 0.8);
  color: var(--Zone-Color);
  transform: scale(1.02);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.btb-chat-search {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.btb-chat-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.btb-chat-item.btb-active-chat {
  background: rgba(var(--Zone-Background-RGB), 0.2);
}

.btb-chat-item.btb-unread-chat {
  background: #ffebee;
}

.btb-chat-avatar-container {
  position: relative;
  pointer-events: none;
}

.btb-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #ddd;
}

.btb-unread-chat .btb-chat-avatar {
  border-color: #d32f2f;
}

.btb-status-indicator {
  position: absolute;
  bottom: 0;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.btb-chat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.btb-chat-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.btb-unread-count {
  color: var(--Zone-Color);
  background: #d32f2f;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 8px;
}

.btb-latest-message {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Chat area */
.btb-chat-area {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.btb-chat-header {
  padding: 15px;
  background: rgba(var(--Zone-Background-RGB), 0.2);
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btb-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #fafafa;
}

.btb-chat-footer {
  padding: 15px;
  border-top: 1px solid #eee;
  background: #ffff;
  /* background: var(--Zone-Color); */
  display: flex;
  flex-direction: column;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

.btb-image-preview-container {
  position: relative;
  display: none;
  margin-bottom: 10px;
  width: fit-content;
}

.btb-image-preview {
  max-width: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.btb-remove-image-button {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--Zone-Background);
  border: none;
  color: var(--Zone-Color);
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.btb-input-container {
  display: flex;
  align-items: center;
}

.btb-image-input {
  display: none;
}

.btb-attach-image-button {
  padding: 10px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

.btb-attach-image-button:hover {
  background: rgba(var(--Zone-Background-RGB), 0.2);
  color: var(--Zone-Color);
  transform: scale(1.02);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.btb-attach-image-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btb-chat-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  min-height: 60px;
  max-height: 400px;
  resize: none;
  font-size: 14px;
  outline: none;
  margin: 0 10px;
  overflow-y: auto;
}

.btb-chat-input:disabled {
  border-color: #ddd;
}

.btb-chat-input:enabled {
  border-color: var(--Zone-Background);
}

.btb-send-button {
  padding: 12px 24px;
  border: none;
  background: #ccc;
  color: white;
  border-radius: 8px;
  cursor: not-allowed;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  opacity: 0.6;
}

.btb-send-button:enabled {
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  cursor: pointer;
  opacity: 1;
}

/* Message styles */
.btb-message-container {
  margin-bottom: 20px;
  display: flex;
}

.btb-message-operator {
  justify-content: flex-start;
}

.btb-message-agent {
  justify-content: flex-end;
}

.btb-message-content {
  max-width: 60%;
}

.btb-message-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

.btb-message-operator .btb-message-header {
  justify-content: flex-start;
}

.btb-message-agent .btb-message-header {
  justify-content: flex-end;
}

.btb-sender-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.btb-message-date {
  font-size: 12px;
  color: #888;
}

.btb-message-body {
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}

.btb-message-operator .btb-message-body {
  background: #f0f0f0;
  color: #333;
}

.btb-message-agent .btb-message-body {
  background: var(--Zone-Background);
  color: var(--Zone-Color);
}

.btb-message-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.btb-message-image {
  width: 200px;
  height: auto;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btb-pending-image-container {
  position: relative;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.btb-pending-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 0.7;
}

.btb-spinner {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--Zone-Color);
  border-top-color: var(--Zone-Background);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
}

.btb-failed-attachment {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  max-height: 100px;
  overflow-y: auto;
  word-break: break-all;
}

.btb-message-status {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.btb-read-status {
  font-size: 14px;
}

.btb-read {
  color: #e6ffe6;
}

.btb-unread {
  color: rgba(255,255,255,0.5);
}

.btb-failed-message {
  color: #d32f2f;
  font-size: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btb-failed-icon {
  margin-right: 5px;
}

/* Modals */
.btb-image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.btb-modal-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btb-close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--Zone-Color);
  border: none;
  padding: 8px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btb-new-chat-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.btb-new-chat-modal-content {
  /* background: var(--Zone-Color); */
  background: #ffff;
  width: 50%;
  max-width: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.btb-new-chat-modal-header {
  padding: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btb-close-new-chat-modal {
  background: none;
  border: none;
  color: var(--Zone-Color);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.btb-new-chat-modal-body {
  padding: 15px;
}

.btb-search-operators {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.btb-operators-list {
  max-height: 300px;
  overflow-y: auto;
}

.btb-operator-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}

.btb-operator-item:hover {
  background: rgba(var(--Zone-Background-RGB), 0.2);
}

.btb-operator-avatar-container {
  position: relative;
  margin-right: 12px;
}

.btb-operator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ddd;
  object-fit: cover;
}

.btb-operator-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.btb-operator-info {
  flex: 1;
}

.btb-operator-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.btb-operator-email {
  font-size: 13px;
  color: #666;
}

.btb-crop-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.btb-crop-modal-content {
  /* background: var(--Zone-Color); */
  background: #ffff;
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.btb-crop-modal-header {
  padding: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btb-close-crop-modal {
  background: none;
  border: none;
  color: var(--Zone-Color);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.btb-crop-modal-body {
  padding: 15px;
  text-align: center;
}

.btb-crop-image {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

.btb-crop-modal-footer {
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btb-cancel-crop {
  padding: 10px 20px;
  background: #ccc;
  color: #333;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.btb-confirm-crop {
  padding: 10px 20px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

/* SecureCash */

body.SCC
{
	/*
		background:url('branded/background.jpg');
		background-size:cover;
	*/
	
	--Zone-Color:#ffffff;
	--Zone-Background:#c7a356;
	--Zone-Heading:#ba9547;
}

body.SCC #data td.actions i:hover
{
	color:#ffffff;
	background-color:#caa25f;
}


/* AWSS */

body.AWS
{
	--Zone-Color:#ffffff;
	--Zone-Background:#db3c39;
	--Zone-Heading:#db3c39;
}

body.AWS #side .logo-container
{
	background-size:auto 40px;
}

body.AWS #side:hover .logo-container
{
	background-size:auto 50px;
}

body.AWS #data td.actions i:hover
{
	color:#ffffff;
	background-color:#db3c39;
}


/* Demo, WestSure */

body.DMO, body.WSS, body.NQP
{
	--Zone-Color:#222222;
	--Zone-Background:#eeeeee;
	--Zone-Heading:#dddddd;
}
 /* Adding for the CON */
 body.USG
 {
	 --Zone-Color:#ffffff;
	 --Zone-Background:#f0cc01;
	 --Zone-Heading:#dddddd;
 }

 /* PLG */

body.PLG
{
	--Zone-Color:#FFB800;
	--Zone-Background:#3D3D3D; 
	--Zone-Heading:#dddddd;
}
body.NCL
{
	--Zone-Color:#79ca03;
	--Zone-Background:#000000; 
	--Zone-Heading:#dddddd;
}
body.NIS
{
	--Zone-Color:#5e9c59;
	--Zone-Background:#212059;  
	--Zone-Heading:#dddddd;
}
body.PCS
{
	--Zone-Color:#0d1d42;
	--Zone-Background:#00a3e1; 
	--Zone-Heading:#dddddd;
}

body.DMO #side .logo-container,
body.WSS #side,
body.NQP #side
{
	background-size:auto 46px;
}

body.DMO #side:hover .logo-container,
body.WSS #side:hover,
body.NQP #side:hover
{
	background-size:auto 42px;
}

body.DMO #data td.actions i:hover,
body.WSS #data td.actions i:hover,
body.NQP #data td.actions i:hover
{
	color:#222222;
	background-color:#eeeeee;
}


/* Leader & Blackhawk */

body.LDR, body.BHL
{
	--Zone-Color:#ffffff;
	--Zone-Background:#222222;
	--Zone-Heading:#000000;
}

body.LDR #side
{
	background-size:auto 30px;
	background-position:4px 28px;
}

body.LDR #side:hover
{
	background-size:auto 40px;
	background-position:8px 24px;
}

body.BHL #side
{
	background-size:auto 56px;
}

body.BHL #side:hover
{
	background-size:auto 46px;
	background-position:16px 15px;
}

body.LDR #data td.actions i:hover,
body.BHL #data td.actions i:hover
{
	color:#ffffff;
	background-color:#222222;
}

/* USG */

body.USG .ActiveMenu
{
	background-color:#8a1e04 !important;
	color: #ffffff !important;
}

body.USG .ActiveMenu i{
	color:#ffffff !important;
}

/* PLG */

body.PLG .ActiveMenu
{
	background-color:#FFB800 !important;
	color: #3D3D3D !important;
}

body.PLG .ActiveMenu i{
	color:#ffffff !important;
}
/* NCL */
body.NCL .ActiveMenu
{
	background-color:#79ca03 !important;
	color: #000000 !important;
}

body.NCL .ActiveMenu i{
	color:#ffffff !important;
}
/* NIS */
body.NIS .ActiveMenu
{
	background-color:#5e9c59 !important;
	color: #212059 !important;
}

body.NIS .ActiveMenu i{
	color:#ffffff !important;
}
body.PCS .ActiveMenu
{
	background-color:#0d1d42 !important;
	color: #00a3e1 !important;
}
body.PCS .ActiveMenu i{
	color:#ffffff !important;
}
/* SSA & SSG */

body.SSA
{
	--Zone-Color:#eda44c;
	--Zone-Background:#304659;
	--Zone-Heading:#304659;
}

body.SSG
{
	--Zone-Color:#efb444;
	--Zone-Background:#122736;
	--Zone-Heading:#122736;
}

body.SSA .logo-container,
body.SSG .logo-container
{
	background-size:auto 44px !important;
	background-position:6px 8px !important;
}

body.SSA #side:hover .logo-container ,
body.SSG #side:hover .logo-container 
{
	background-size:auto 150px !important;
	background-position:12px 12px !important;
	height: 165px !important;
}
body.SSG #side:hover .nav {
  height: calc(100vh - 165px) !important; /* full height minus logo height */
}


body.SSA #side .nav,
body.SSG #side .nav
{
	/* top:70px;
	transition:top 0.5s; */
}

body.SSA #side:hover .nav,
body.SSG #side:hover .nav
{
	/* top:180px; */
}

body.SSA #data td.actions i:hover
{
	color:#eda44c;
	background-color:#304659;
}

body.SSG #data td.actions i:hover
{
	color:#efb444;
	background-color:#122736;
}


/* Qualitas */

body.QAL
{
	--Zone-Color:#ffffff;
	--Zone-Background:#002855;
	--Zone-Heading:#002855;
}

body.QAL #side
{
	background-size:auto 38px;
	background-position:6px 28px;
}

body.QAL #side:hover
{
	background-size:auto 172px;
	background-position:20px 10px;
}

body.QAL #side:hover .nav
{
	top:200px;
	transition:top 0.5s;
}

body.QAL #data td.actions i:hover
{
	color:#ffffff;
	background-color:#002855;
}

/* Celtic Security Services */

body.CSS
{
	--Zone-Color:#ffffff;
	--Zone-Background:#0097e4;
	--Zone-Heading:#0097e4;
}

body.CSS #side
{
	background-size:auto 38px;
	background-position:6px 28px;
}

body.CSS #side:hover
{
	background-size:auto 172px;
	background-position:20px 10px;
}

body.CSS #side:hover .nav
{
	top:200px;
	transition:top 0.5s;
}

body.CSS #data td.actions i:hover
{
	color:#ffffff;
	background-color:#0097e4;
}
body.PLG #side{
	background-position: 11px 15px;
}

body.PLG #side .nav a:hover i{
	background-color: transparent !important;
}
body.NCL #side .nav a:hover i{
	background-color: transparent !important;
}

body.NCL #side .logo-container{
	background-position: 13px 15px;
}
body.NIS #side .nav a:hover i{
	background-color: transparent !important;
}
body.PCS #side .nav a:hover i{
	background-color: transparent !important;
}
body.PCS #side .logo-container{
	background-position: 13px 15px;
}







/*
.card.medium nav
{margin:20px 12px 12px 12px;}
.card.medium nav h2
{padding:0 12px 0 8px;}

.card.medium nav h2,
.card.medium nav a
{
	display:inline-block;float:none;
	position:static;
}

.card
{
	background:#ffffff;
	border:1px solid #e2e3ec;
	float:left;
}

.card.small
{
	width:25%;
}

.card.medium
{
	width:75%;
}

.card.medium select {display:inline-block;width:auto;margin:0;}

.card.small.margin
{
	width:calc(25% - 10px);
	margin:0 10px 0 0;
}

.card header
{
	border-width:0 0 1px 0;
}

.card .content
{
	padding:16px 20px;
}

.card h2
{
	display:block;
	font-size:20px;
	font-weight:400;
	line-height:36px;
	padding:12px 20px;
}

.card h3
{
	font-size:18px;
	font-weight:400;
	line-height:140%;
	margin:0 0 1rem 0;
}

.card img
{
	width:100%;
}

.card strong
{
	font-weight:600;
}

.card p.small
{
	font-size:14px;
}

.card ul
{
	margin:0 0 1rem 1rem;
}

.card ul.schedule
{
	list-style:none;
}

.card ul.schedule li:before
{
	content:"✔";
	display:inline;
	color:green;
	margin:0 4px 0 0;
}

.card #data table 
{
	border:0;
}*/



*[placeholder]:empty:before {
    content: attr(placeholder);
    color: #aaa; 
}

a.enabled
{
	font-weight:600;
	color:red;
	
}

#data td.actions
{
	padding:0 6px 0 0;
	font-size:17px;vertical-align:top;
}

#data td i
{
	position:relative;
	display:block;
	font-size:18px;
	float:right;
}

#data td i.lni-pin
{font-size:15px;color:#777;
	top:5px;position:absolute;
	right:2px;bottom:auto;margin-left:10px;
}

#data td.actions i
{
cursor:pointer;padding:0 16px;line-height:49px;display:inline-block;
}

#data td.actions a i {color:#495057;}


#data td.actions i:hover
{background-color:#e2e3ec;
}

#data td.actions i.fe-bell-off
{
	color:#dddddd;
}

#data td.actions i.fe-bell-off:hover {color:inherit;background:transparent;}

#data td.actions i.fe-trash-2:hover,
#data td.actions i.fe-archive:hover,
#data td.actions i.fe-alert-triangle:hover
{
background:#c70021;backgrxound:#c58300;
}


#data-parts th:nth-child(1) {width:calc(49% - 96px);}
#data-parts th:nth-child(2) {width:17%;}
#data-parts th:nth-child(3) {width:17%;}
#data-parts th:nth-child(4) {width:17%;}
#data-parts th:nth-child(5) {width:100px;}

#data-uploads
{
background:#fff;
}

#data-uploads div.item,
#data-uploads div.folder
{
	width: calc(((100vw - 40px) / 5) * 0.89);
	height:calc(((100vw - 40px) / 5) * 0.89);
	margin:calc(((100vw - 40px) / 5) * 0.04);
	border:1px solid gray;
	float:left;
	position:relative;
}

#data-uploads div.item span,
#data-uploads div.folder span
{
	position:absolute;
	bottom:0px;padding:4px 0;
	text-align:center;
	width:100%;font-sixze:16px;background-color:rgba(0,0,0,0.1);color:#111;
}

#data-uploads div.item img
{
position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
	max-width:90%;
	
	max-height:90%;
}

#data-uploads div.folder
{
	background:url('folder.png');
	background-size:60%;
	background-position:center;
	background-repeat:no-repeat;
}



#data th
{
	position:relative;
	font-weight:600;
	text-align:left;
	white-space:nowrap;
}



#data td
{
	white-space:normal;
	vertical-align:middle;
	word-wrap:break-word;
}

#data td.no-break {white-space: nowrap;}

#data th:hover
{
	text-decoration:underline;
	cursor:context-menu;
}

#data th i.fe-sliders
{cursor:context-menu;
position:absolute;margin:3px 0 0 5px;display:inline-block;
}

#data th i.fe-sliders:hover
{font-weight:bold}



#data td.schedule
{
	color:green;
	width:251px !important;
	min-width:251px !important;
	padding:0 !important;
}

.modal td.schedule
{
	color:green;
	width:100%;
	padding:0;
}

#data td.schedule span
{
	cursor:pointer;
	display:block;
	width:35px;
	height:49px;
	font-size:110%;
	line-height:49px;
	text-align:center;
	float:left;
}

#data td a 
{
	color:#467fcf;
	text-decoration:none;
}

#data thead th { positixon: sticky; toxp: 63px;background:#fff;z-index:2;}


#data table tbody
{
width:calc(100vw - 17px - 24px - 240px);width:100%:
max-height:calc(100vh - 86px - 63px);marxgin-top:63px;
}

#data .hidden {display:none;}
	
#data tbody tr:first-child td {border:0;}
#data tbody tr.hidden {display:none;}

#data-location.contacts th:nth-child(1) {width:auto;}
#data-location.contacts th:nth-child(2) {width:auto;}
#data-location.contacts th:nth-child(3) {width:100px;}
#data-location.contacts th:nth-child(4) {width:auto;}
#data-location.contacts th:nth-child(5) {width:auto;}
#data-location.contacts th:nth-child(6) {width:37px;}

#data-location.transactions th:nth-child(1) {width:70px;}
#data-location.transactions th:nth-child(2) {width:110px;text-align:center;}
#data-location.transactions th:nth-child(3) {width:110px;text-align:center;}
#data-location.transactions th:nth-child(4) {width:80px;}
#data-location.transactions th:nth-child(5) {width:130px;}
#data-location.transactions th:nth-child(6) {width:150px;}
#data-location.transactions th:nth-child(7) {width:150px;}
#data-location.transactions th:nth-child(8) {width:calc(100% - 800px);min-width:140px;}
#data-location.transactions tr td:nth-child(2),
#data-location.transactions tr td:nth-child(3) {text-align:center;}
#data-location.transactions th:nth-child(5),
#data-location.transactions tr td:nth-child(5) {text-align:right;padding-right:30px;}



/* Responsive */

#search {width:160px;}

/* UNSORTED BELOW!!! */



header #row-count
{
	display:inline-block;
	padding:0 8px 0 0;
}

#data td span:not(.ql-toolbar.ql-snow span,.ql-editor span,#data td.schedule span,#data td.html-format span)
{
	display:block;
	white-space:nowrap;
	text-overflow:ellipsis;overflow: hidden;width:100%;
}



#data td select ,
#data td select option
{margin:0;
padding:0;
border:0;
display:inline;
outline:0;

-webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;width:50px;
}

#data tbody tr:hover,
#data tbody tr:hover select
{
	background-color:#f5f5f5;
}

#data td select option
{background:#fff;padding:8px;}

#data td a:hover {text-decoration:underline;}




#data-location-particulars tr td:nth-child(1) {width:10%; background:#f5f5f5;}
#data-location-particulars tr td:nth-child(2) {width:23.33%;}
#data-location-particulars tr td:nth-child(3) {width:10%; background:#f5f5f5;}
#data-location-particulars tr td:nth-child(4) {width:23.33%;}
#data-location-particulars tr td:nth-child(5) {width:10%; background:#f5f5f5;}
#data-location-particulars tr td:nth-child(6) {width:23.33%;}

#data-location-particulars {margin:4px 10px;width:calc(100% - 20px) !important;}

#data-location-particulars tbody tr:first-child td,
#data-location-particulars tr td {border:1px solid white; border-width:7px 0 7px 0 !important;}

#data-location-particulars tr:hover {background:transparent !important;}



#data-location-dockets tr td:nth-child(3),
#data-location-dockets tr td:nth-child(4) {text-align:center;}
#data-location-dockets tr td:nth-child(5) {text-align:right;padding-right:30px;}


td.notifications{text-align:center !important;padding:0 0 0 11px;}




td.notifications i
{display:block;float:left;
font-sixze:16px;cursor:pointer;color:#ddd;margin:0 1px;padding:0 0 3px 0;
/*57*/
}

td.notifications abbr.on i {color:#555;}

td.notifications i:hover{border-bottom:1px solid #555;padding:0 0 2px 0;}

#data th.center, #data td.center {text-align:center;float:none;}
#data th.right, #data td.right {text-align:right;float:none;}

#data table tr th:last-child,
#data table tr td:last-child,
#data table tr td.no-padding
{
	padding:0 !important;
}

/* Table Row Background Colors */

tr.bg-red
{
	background-color:#fff3f3;
}

/* Jobs Data Table Has No Background Hover Color */

#data-jobs tr:hover {background-color:transparent !important;}

/* Jobs Table Columns */

#screen .card.data-table table#data-jobs td:not(.list)
{
	padding-top:16px;
}

/* Jobs Add Button */

#screen .card.data-table table#data-jobs td a i.lni-plus
{
	cursor:pointer;
	margin:6px 0 6px -6px;
	float:left;
}

#screen .card.data-table table#data-jobs td a:hover i.lni-plus
{
	color:green;
	font-weight:700;
}

/* Jobs Collapse */

#screen .card.data-table table#data-jobs td[data-edit="Name:Inline"]
{
	white-space:nowrap;
}

#screen .card.data-table table#data-jobs td .lni-chevron-up,
#screen .card.data-table table#data-jobs td .lni-chevron-down
{
	cursor:pointer;
	font-size:12px;
	margin:2px 6px 0 0;
	float:left;
}

#screen .card.data-table table#data-jobs td .lni-chevron-up:hover,
#screen .card.data-table table#data-jobs td .lni-chevron-down:hover
{
	font-weight:700;
}

/* Table Inline Inputs & Search */

#data td .list-item
{
	width:calc(100% + 24px);
	background-color:#ffffff;
	padding:8px;
	margin:0 0 2px -12px;
	border:1px solid rgb(226, 227, 236);
}

#data td .list-item i.lni-close:hover
{
	cursor:pointer;
	color:red;
	font-weight:700;
}

#data td .list-item i.lni-plus
{
	margin:0 8px 0 0;
	float:left;
}

#data td .list-item:hover
{
	background-color:#f5f5f5;
}

#data td .list-item input[type="date"]
{
	padding:0 16px 0 34px;
	margin:0;
	border:0;
}

#data td .list-item.calendar
{
	max-width:300px;
}

#data td .list-item.calendar:hover
{
	background-color:transparent;
}

#data td .list-item.calendar *
{
	font-size:15px !important;
}

#data td .search input
{
	width:calc(100% + 24px);
	margin:0 0 2px -12px;
	outline:none;
}

#data td .search .list-item:hover
{
	cursor:pointer;
}

#data td .search span.note
{
	display:block;
	font-size:14px;
	font-style:italic;
	background:transparent;
	padding:4px 0 8px 0;
	border:0;
}
/* Xero Table */
#xero-table th,
#xero-table td{
	width: 20%;
}
#xero-table select{
margin-bottom: 0px;
padding: 5px;
}
/* MYOB Table*/
#myob-table th,
#myob-table td{
	width: 20%;
}
#myob-table select{
	margin-bottom: 0px;
	padding: 5px;	
}

/* pdf table */
#courierData {
	border-collapse: collapse;
	margin: auto;
	width: 100%;
}
#courierData tr {
	page-break-inside: avoid;
}
#courierData th,#courierData td {
	padding: 5px;
	text-align: center;
	color: #111;
	border: 1px solid gray;
}

/*  Cypress video loader  */
#loading-video {
	height: 100vh
}

#video-player {
	aspect-ratio: 16/9;
	height: 90vh;
	width: 100%;
}

.video-js {
   object-fit: cover;
}

.video-js .vjs-tech {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: auto !important;
}

#cypress-video-loader,
#cypress-video-loader:after
{
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
}

#cypress-video-loader{
	position:relative;
	font-size:12px;
	text-indent:-9999em;
	margin:calc((100vh - 420px ) * 0.5) auto;
	border-top:14px solid rgba(0,0,0, 0.1);
	border-right:14px solid rgba(0,0,0, 0.1);
	border-bottom:14px solid rgba(0,0,0, 0.1);
	border-left:14px solid #69a2ff;
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-animation:spin 1.1s infinite linear;
	animation:spin 1.1s infinite linear;
}
#cypress-loader-text {
	position:absolute;
	height:500px;
	width:100vw;
	top: calc(50vh + 30px);
	left: calc(0vh + 30px);
	color:#111111;
	font-size:20px;
	font-weight:400;
	text-align:center;
}
@-webkit-keyframes spin {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  
  @keyframes spin {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }

/* Mobile Responsive Data Table Header */

@media only screen and (max-width: 767px)
{
	#screen .card header h1
	{
		display:block;
		width:100%;
		margin:0 0 0 4px !important;
		float:none;
	}

	.data-table header a.actions
	{
		padding:10px 0 16px 0;
		margin:0 0 0 4px;
		float:left;
	}
	
	.data-table header form
	{
		display:inline;
		float:none;
	}
	
	.data-table header form span.warning
	{
		margin:0 0 0 10px;
		float:left;
	}
	
	.data-table header form span.warning a
	{
		padding:10px 0 16px 0;
		margin:0;
	}
	
	.data-table header #row-count
	{
		padding:6px 0 0 0;
		margin:0 0 0 10px;
		float:left;
	}
	
	.data-table header #search
	{
		width:100%;
	}
}

.alarm-action-column {
  max-width: 80px !important;
  text-align: center !important;
  width: 80px !important;
}

.refresh-alarms {
  cursor: pointer;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.refresh-alarms i {
  font-size: 1.2em;
  color: #666;
}

.refresh-alarms:hover i {
  color: var(--Zone-Background);
}

.refresh-alarms i.rotating {
  animation: rotate 1s linear infinite;
}

.view-all-link {
  margin: 0px !important;
  color: #dc2626 !important;
}

#data-distress-alarms tr.active-alarm {
  background-color: #fee2e2;
}

#data-distress-alarms .status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
}

#data-distress-alarms .status-active {
  background-color: #fee2e2;
  color: #b91c1c;
  text-align: center;
}

#data-distress-alarms .status-inactive {
  background-color: #e5e7eb;
  color: #374151;
  text-align: center;
}

#data-distress-alarms td {
  padding: 12px;
  vertical-align: middle;
}

#data-distress-alarms th {
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
}

#data-distress-alarms .hidden {
  display: none;
}

#data-distress-alarms .turn-off-link {
  color: #dc2626;
  text-decoration: underline;
  cursor: pointer;
}

.user-box {
  border: 1px solid grey;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.modal.distress-recordings .recordings-container {
  display: flex;
  height: 60vh;
  margin: 20px 0;
  gap: 20px;
}

.modal.distress-recordings .recordings-list {
  width: 35%;
  overflow-y: auto;
  border-radius: 8px;
  padding: 10px;
}

.modal.distress-recordings .video-item {
  background: #efeeee;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal.distress-recordings .video-item.active {
  border: 2px solid var(--Zone-Background);
  background: rgba(var(--Zone-Background-RGB), 0.2);
}

.modal.distress-recordings .video-item:hover {
  background: #f0f0f0;
}

.modal.distress-recordings .video-item-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.modal.distress-recordings .video-item .disabled {
  opacity: 0.5;
  pointer-events: none;
}

.modal.distress-recordings .video-icon {
  width: 40px;
  height: 40px;
  background: var(--Zone-Background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.modal.distress-recordings .video-icon i {
  color: white;
  font-size: 20px;
}

.modal.distress-recordings .video-details {
  flex-grow: 1;
}

.modal.distress-recordings .video-date {
  font-size: 0.9em;
  font-weight: 500;
}

.modal.distress-recordings .video-created {
  font-size: 0.8em;
  color: #666;
}

.modal.distress-recordings .no-recordings {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 6px;
  color: #666;
}

.modal.distress-recordings .video-player-wrapper {
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black; /* Background like YouTube */
  border-radius: 8px;
  padding: 20px 0; /* Optional vertical spacing */
}

.video-player-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: black;
  aspect-ratio: 16/9;

  transition: all 0.2s ease; /* smooth resizing */
  box-sizing: border-box;
  overflow: hidden;
}

.video-js {
  max-width: 100%;
  max-height: 100%;
}

.main-video-player.vjs-default-skin {
  object-fit: contain;
  width: 100% !important;
  height: 100% !important;
  background-color: black;
}

.modal.distress-recordings .main-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

video.main-video-element,
.video-js .vjs-tech,
.video-js video {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  background-color: black !important;
}

.video-js .vjs-control-bar {
  position: absolute !important;
  bottom: 0 !important;
  z-index: 2;
  display: flex !important;
  background-color: rgba(0, 0, 0, 0.5);
}

.video-js.vjs-fullscreen,
.video-js:-webkit-full-screen,
.video-js:-moz-full-screen,
.video-js:-ms-fullscreen,
.video-js:fullscreen {
  background-color: black !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.modal-warning {
  /* color: var(--Zone-Color); */
  color: #111111;
  background: rgba(var(--Zone-Background-RGB), 0.2);
  padding: 10px 14px;
  margin: 0 0 16px 0;
  border: 4px solid var(--Zone-Background);
  border-width: 0 0 0 4px;
}

.modal.distress-confirmation .modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.modal.distress-confirmation .confirm-btn,
.modal.distress-confirmation .cancel-btn {
  padding: 4px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}

.modal.distress-confirmation .confirm-btn {
  background: #dc2626;
  color: white;
}

.modal.distress-confirmation .confirm-btn:hover {
  background: #b91c1c;
}

.modal.distress-confirmation .cancel-btn {
  background: #e5e7eb;
  color: #374151;
}

.modal.distress-confirmation .cancel-btn:hover {
  background: #d1d5db;
}

#data-distress-alarms a {
  color: #3182ce;
  text-decoration: none;
}

#data-distress-alarms a:hover {
  text-decoration: underline;
}

.modal.distress-recordings .refresh-recordings {
  cursor: pointer;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
}

.modal.distress-recordings .refresh-recordings i {
  font-size: 1.2em;
  color: #666;
}

.modal.distress-recordings .refresh-recordings:hover i {
  color: var(--Zone-Background);
}

.modal.distress-recordings .refresh-recordings i.rotating {
  animation: rotate 1s linear infinite;
}

.hidden {
  display: none !important;
}

.uploading-row {
  background-color: #fff7e6;
}

.recording-link-wrapper {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.da-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--Zone-Color);
  border-top-color: var(--Zone-Background);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


#screen.ContentEditor
{
	padding:0;
}

#ContentEditor
{
	width:calc(100vw - 56px);
	height:100vh;
	background:#ffffff;
	border:1px solid #e2e3ec;
	outline:0;
}

#ContentEditor.mobile
{
	width:720px;
	margin:0 0 0 calc(50vw - 388px);
}

.nav .ContentEditorSave
{
	display:block !important;
}

.nav .ContentEditorSave.hidden
{
	display:none !important;
}

.nav .ContentEditorSave, .nav a.ContentEditorSave i
{
	color:#ffffff !important;
	background-color:#e00047;
}

.prevent-scrolling
{
	height:100% !important;
	overflow:hidden !important;
}

.wysiwyg
{
	padding:20px;
}

.wysiwyg input[name="title"]
{
	font-size:18px;
	margin:0.5rem 0 6px 0;
	border-radius:0;
}

.wysiwyg .editor
{
	width:100%;
	background:#ffffff;
	float:left;
}

.wysiwyg .editor .content
{
	border:1px solid #e2e3ec;
}

.wysiwyg #editor
{
	width:100%;
	height:calc(100vh - 188px);
	background:#ffffff;
}

.wysiwyg .settings
{
	display:none;
	width:calc(100% - 730px);
	background:#ffffff;
	margin:0 0 0 10px;
	float:right;
}

.wysiwyg .settings .content
{
	padding:12px 16px 0 16px;
	border:1px solid #e2e3ec;
}

/* Data Table Notes */

.tox.tox-tinymce 
{
	min-width:450px;
	border:0px !important;
}

.tox-toolbar__primary,
.tox-toolbar__primary *
{
	cursor:default !important;
}

.modal td.html-format
{
	display:block;
	height:480px !important;
	overflow-x:none;
	overflow-y:scroll;
}

.modal td.html-format::-webkit-scrollbar-track
{
	padding:0;
	margin:0;
}

td.html-format
{
	padding:16px 20px 6px 20px !important;
}

td.html-format.no-padding
{
	padding:0px !important;
}

td.html-format h1
{
	font-size:24px;
	font-weight:600;
	padding:0;
	margin:0 0 10px 0;
	border:0;
}

td.html-format h2
{
	font-size:20px;
	font-weight:600;
	margin:0 0 10px 0;
}

td.html-format h3
{
	font-size:18px;
	font-weight:600;
	margin:0 0 10px 0;
}

td.html-format span
{
	display:inline;
}

td.html-format ul,
td.html-format ol
{
	margin:0 0 16px 24px;
}

td.html-format table 
{
	margin:0 0 10px 0 !important;
}

td.html-format table tr td,
#data table tr td.html-format table tr td:last-child
{
	background:transparent !important;
	padding:4px 8px !important;
	border:1px solid rgb(226, 227, 236) !important;
}

/* Quill Editor */
.ql-snow {
	background-color: #ffffff !important;
}
.ql-editor p {
	margin: 0 0 1rem 0 !important;
}
.ql-editor {
	white-space: normal!important;
}
.ql-editor ol, .ql-editor ul {
	margin: 0 0 16px 24px !important;
	padding-left: 0px !important;
}
.ql-editor h1,
.ql-editor h2 {
	font-weight: 600 !important;
	margin-bottom: 1rem !important;
}
.ql-font-monospace {
	font-family: monospace !important;
}
.ql-font-serif {
	font-family: serif !important;
}
.ql-tooltip,
.ql-tooltip.ql-editing {
	top: 62.4531px !important;
	left: 0px !important;
}

label
{
	display:block;
	width:100%;
	font-weight:600;
	margin:0 0 4px 0;
}

input, select, textarea
{
	display:block;
	width:100%;
	line-height:100%;
	background:#ffffff;
	padding:8px 10px;
	margin:0 0 1rem 0;
	border:1px solid #e2e3ec;
}

input, textarea {cursor:text;}
input[type="checkbox"] {cursor:pointer;}
select {padding:7px 10px;}
select {padding:9px 10px 10px 10px;}
input[type="date"], input[type="time"] {padding:6px 10px;}
header select {padding:5px 10px;}
select, option {cursor:pointer;}

button,
input.button,
input[type="submit"]
{
	cursor:pointer;
	display:block;
	color:#ffffff;
	font-size:15px;
	font-weight:600;
	background:#349aff;
	padding:12px 16px;
	margin:0;
	border:0;
	outline:0;
	transition:background 500ms linear;
}

button:hover,
input.button:hover,
input[type="submit"]:hover
{
	background:#689c65;
}

input.button:disabled,
input[type="submit"]:disabled
{
	color:#666666;
	background:#dddddd;
}

textarea {line-height:140%;}

input[type="checkbox"]
{
	display:block;
	width:auto;
	padding:0;
	float:left;
}

form .associated {margin:0 0 1rem 0;}
form .associated strong {}

form#Login
{
	position:absolute;
	width:400px;
	top:37.5%;
	left:50%;
	background:#ffffff;
	padding:30px 40px 30px 40px;
	border:1px solid #e2e3ec;
	transform:translate(-50%,-37.5%);
}

#Login label {font-weight:400;}

#Login input[type="submit"]
{
	margin:0 0 0.75rem 0;
}

#Login input[type="checkbox"]
{
	margin:5px 6px 0 2px;
}

#Login img
{
	max-width:90%;
	margin:0 auto 40px auto;
}

#Login span.error,
#ForgetPasswordForm span.error
{
	display:block;
	color:red;
	font-weight:600;
	margin:20px 0 10px 0;
	clear:both;
}

#Login p
{
	position:absolute;
	width:100%;
	bottom:-60px;
	left:0px;
	color:#9399a4; color:#555555;
	text-align:center;
}

/* Editable Data Fields */

.Multiline
{
	white-space:pre-line !important;
	height:41px;
}
/* #data-SharedBilling  th,
#data-SharedBilling  td {
  width: 100px;
} */
#data-sharedbilling  th,
#data-sharedbilling  td {
  width: 25%;
}
.email-separator{
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	word-break: break-all; 
  }
  /* Contractor Signup */
  
.signupsteps fieldset {
	border: none;
  
  }
  /*Hide all except first fieldset*/
  .signupsteps fieldset:not(:first-of-type) {
	display: none;
  }
  /*inputs*/
  
  
  
  
  /*buttons*/
  .signupsteps .signup-action-button, .signup-action-button {
	width: 100px !important;
	background: #349aff;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px auto;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	display: block;
  }
  
  .signupsteps .next, .signupsteps .signupsubmit{
	  float: right;
  }
  
  .signupsteps .previous{
	float:left;
  }
  
  
  .fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #837E7E;
	margin-bottom: 20px;
  }
  /*progressbar*/
  #progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the signupsteps*/
	counter-reset: step;
	width:100%;
	text-align: center;
  }
  #progressbar li {
	list-style-type: none;
	color: rgb(51, 51, 51);
	text-transform: uppercase;
	font-size: 10px;
	width: 22%;
	float: left;
	position: relative;
  }
  #progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: white;
	background:#5e9c5a;
	border-radius: 3px;
	margin: 0 auto 5px auto;
  }
  /*progressbar connectors*/
  #progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: #ccc;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
  }
  #progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
  }
  /*marking active/completed signupsteps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar li.active:before,  #progressbar li.active:after{
	background: #212059;
	color: white;
  }
  
  
  /* RESPONSIVE */
  
  /* moves error logs in tablet/smaller screens */
  
  @media (max-width:1000px){
  
  /*brings inputs down in size */
  .signupsteps input, .signupsteps textarea {
	outline: none;
	display: block;
	width: 100% !important;
	}
  
	/*brings errors in */
	.error1 {
	left: 345px;
	margin-top: -58px;
  }
  
  
  
  
  }
  
  
  @media (max-width:675px){
  /*mobile phone: uncollapse all fields: remove progress bar*/
  
  .signupsteps {
	width: 100%;
	margin: 50px auto;
	position: relative;
  }
  
  #progressbar{
	display:none;
  }
  
  
  
  /*show hidden fieldsets */
  .signupsteps fieldset:not(:first-of-type) {
	display: block;
  }
  
  .signupsteps fieldset{
	position:relative;
	width: 100%;
	margin:0 auto;
	margin-top: 45px;
  }
  
  .signupsteps .next, .signupsteps .previous{
	display:none;
  }
  
  .signupsteps .explanation{
	display:none;
  }
  
  .signupsteps .signupsubmit {
	float: right;
	margin: 28px auto 10px;
	width: 100% !important;
  }
  
  }
  .center-image {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  margin-bottom: 15px;
  }
  .input-group-left {
	  float: left;
	  width: 45%;
	}
	
	.input-group-right {
	  float: right;
	  width: 45%;
	}
	
	.clearfix:after {
	   content: " ";
	   visibility: hidden;
	   display: block;
	   height: 0;
	   clear: both;
	}
	#signup-notifications-selector input[type="checkbox"]
	  {
		display: inline !important;;
		float: none;
	}
	#signup-notifications-selector label{
	  margin: 10px;
	  display: inline !important;
	}
	#singup-attatchments span{
	  width: 40%;
	  display: inline-block !important;
	}
	#singup-attatchments input{
	  display: inline-block !important;
	  margin-right: 10px; /* Adjust the margin as needed for spacing */
	  float: none;
  }
  #g-recaptcha {
	margin: 15px auto;
	width: 300px; /* Set a specific width or adjust as needed */
  }
  
  
  .signuperror{
	-moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow: 0 0 0 transparent;
   -webkit-box-shadow: 0 0 0 transparent;
   box-shadow: 0 0 0 transparent;
   padding: 0 10px;
   display: block;
   color: #ffffff;
   background: #e62163;
   border: 0;
   line-height: 33px;
   white-space: nowrap;
  
  }
  #login-back-link{
	margin: 0 auto;
	width: 200px;
  }
  
  #signup-success-message-container {
	position: absolute;
	width: 657px;
	top: 37.5%;
	left: 50%;
	background: #ffffff;
	padding: 30px 40px 30px 40px;
	border: 1px solid #e2e3ec;
	transform: translate(-50%,-37.5%);
	display: none;
  }
  
  .signup-title {
	font-size: 18px;
	font-weight: bold;
	color: #4CAF50; /* Green color for the title */
  }
  .signup-icon::before {
	content: "\2713"; /* Unicode character for checkmark */
	font-size: 20px;
	color: #4CAF50; /* Green color for the checkmark */
	margin-right: 8px;
  }
  
  .signup-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: cover;
  }
  
  .signup-text {
	font-size: 14px;
	color: #333;
	margin-top: 10px;
  }
  
  #ForgetPasswordForm{
	position: absolute;
	width: 400px;
	top: 37.5%;
	left: 50%;
	background: #ffffff;
	padding: 30px 40px 30px 40px;
	border: 1px solid #e2e3ec;
	transform: translate(-50%,-37.5%);
	display: none;
  }
  .same-level-success-message
  {
	padding: 15px;
	background-color: #dff0d8; /* Light green background color for success */
	border: 1px solid #4cae4c; /* Dark green border color */
	color: #4cae4c; /* Dark green text color */
	border-radius: 5px; /* Rounded corners */
	margin-bottom: 15px; /* Add some spacing at the bottom */
	display: none;
  }
  .signup-loader{
	position: absolute;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 8px solid #3498db; /* Blue border for animation */
	width: 60px;
	height: 60px;
	top: 50%;
	left: 45%;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	/* display: none; */
  }
  .signup-overlay {
	background: #e9e9e9; 
		  
	position: absolute;  
	top: 0;                
	right: 0;               
	bottom: 0;
	left: 0;
	opacity: 0.5;
	display: none;
  }
  form#contracsignup
{
	position:absolute;
	width:657px;
	top:37.5%;
	left:50%;
	background:#ffffff;
	padding:30px 40px 30px 40px;
	border:1px solid #e2e3ec;
	transform:translate(-50%,-37.5%);
  display: none;

}
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	  }
  
#global, #idleGlobal {
	position: fixed;
	display: none;
	width: 100%;
	height: 83px;
	left: 0px;
	text-align: center;
	padding: 18px 0 0 0;
	z-index: 5;
  }
  
  #global .message,
  #idleGlobal .message {
	display: block;
	margin: 10px 0 0 0;
  }
  
  #global span,
  #idleGlobal span {
	display: inline-block;
	font-weight: 400;
	padding: 12px;
	margin: 0 auto;
	box-shadow: 2px 2px 4px #cccccc;
  }
  
  #global .neutral,
  #idleGlobal .neutral {
	color: #111111;
	background: #eeeeee;
  }
  
  #global .warning,
  #idleGlobal .warning {
	color: #ffffff;
	background: #dc3545;
  }
  
  #global .success,
  #idleGlobal .success {
	color: #ffffff;
	background: #28a745;
  }

/* Sidebar */

#side {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 56px;
  height: 100vh;
  border: 1px solid #e2e3ec;
  border-width: 0 1px 0 0;
  z-index: 3;
  background: #ffffff;
  border-width: 0 1px 0 0;
  transition: width 0.5s;
  overflow: hidden;
  

}

.logo-container {
  /* This container becomes the logo itself */
  flex-shrink: 0;
  height: 81px;
  width: 100%;
  background-image: url("branded/Logo-Full.png");
  background-repeat: no-repeat;
  background-size: auto 50px; 
  background-position: 8px 15px; 
  transition: background-position 0.5s, background-size 0.5s, height 0.5s;
}


#side:hover {
  width: 240px; /* Expands the sidebar */
}

#side:hover .logo-container {
  background-position: 24px 15px; /* Changes the logo's background position on hover */
}
#side .nav {
  /* This container is now the scrollable part */
  position: relative;
  height: calc(100vh - 81px); /* Calculate the remaining height */
  overflow-y: auto; /* This is the key change */
  scrollbar-width: none;
}
#side .nav a {
  display: block;
  color: #495057;
  font-size: 16px;
  line-height: 50px;
  text-decoration: none;
}

#side .nav a i {
  position: relative;
  color: #5e6770;
  font-size: 16px;
  margin: 0 12px 0 18px;
}

#side .nav a,
#side .nav a i,
#side .nav a span {
  cursor: pointer;
}

#side a span {
  display: none;
}

/* #side .nav a.active,
#side .nav a.active i
{
	color:var(--Zone-Color) !important;
	background-color:var(--Zone-Heading) !important;
} */

#side .nav div {
  border: 1px solid var(--Zone-Background);
  border-width: 0 0 0 6px;
}

#side .nav a:hover,
#side .nav a:hover i {
  color: var(--Zone-Color);
  background-color: var(--Zone-Background);
}

#side:hover {
  width: 240px;
  background-position: 24px 15px;
}

#side:hover a {
  width: 240px;
}

#side:hover a span {
  display: inline-block;
}

#side .nav a.danger {
  background-color: #fee2e2;
  color: black;
  position: relative;
}

#side .nav a.danger i {
  color: #dc2626;
}

#side .nav a.danger:hover {
  background-color: #fecaca;
}

#side .nav a.danger:hover i {
  background-color: transparent;
}

#side .nav a.danger .alarm-badge {
  position: absolute;
  top: 15px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#side .nav a {
  transition: background-color 0.2s ease, color 0.2s ease;
}

#side .nav a i {
  transition: color 0.2s ease;
}

#screen {
  width: calc(100vw - 56px);
  height: 100vh;
  padding: 20px;
  margin: 0 0 0 56px;
  overflow-x: hidden;
  overflow-y: hidden;
}

/*****************************/
/* ORGANISE EVERYTHING BELOW */
/*****************************/

#screen .card {
  background: white;
  padding: 20px 20px 4px 20px;
  margin: 0 0 10px 0;
  border: 1px solid #e2e3ec;
}

#screen .card table {
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0 0 16px 0;
}

#screen .card th,
#screen .card td {
  text-align: left;
  border: 1px solid #e2e3ec;
  padding: 8px;
}

#screen .card th {
  font-weight: 600;
  background: #f5f5f5;
}

#screen .card th.left,
#screen .card td.left {
  text-align: left;
}

#screen .card th.right,
#screen .card td.right {
  text-align: right;
}

#screen .card th.center,
#screen .card td.center {
  text-align: center;
}

#screen .card h1 {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 120%;
}

#screen .card h2 {
  font-size: 20px;
  margin-bottom: 16px;
  font-weight: 400;
}

#screen .card ol:not(td.html-format ol) {
  margin: 0 0 16px 16px;
}

#screen .card.data-table {
  padding: 0;
  max-height: calc(100vh - 40px);
}

#screen .card.data-table table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0px;
  background: #ffffff;
  margin: 0;
}

#screen .card.data-table th,
#screen .card.data-table td {
  padding: 7px 20px 6px 20px;
  line-height: 120%;
  height: 50px;
  border: 1px solid #e2e3ec;
  border-width: 0 0 1px 1px;
  vertical-align: center;
}

#screen .card.data-table tr th:first-child,
#screen .card.data-table tr td:first-child {
  border-left: 0;
}

#screen .card.data-table th {
  border-width: 0px 0 1px 1px;
}

#screen .card.data-table tr td:last-child {
  max-width: 50px;
  width: 50px;
}

#data {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
  background-color: #f5f5f5;
  border: 1px solid #e2e3ec;
  border-width: 1px 0;
}
#data th {
  position: sticky !important;
  top: 0px !important;
}

tbody {
  overflow-y: scroll;
  overflow-x: scroll;
}

header a {
  color: #455cec;
  margin-left: 16px;
  text-decoration: none;
}

header {
  background: white;
  padding: 12px;
  z-index: 2;
  width: calc(100vw - 60px - 42px);
}

header form,
header form * {
  display: inline-block;
  width: auto;
  margin: 0;
}

#screen .card header h1 {
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
  display: inline-block;
  margin: 0 12px 0 8px !important;
}

header a {
  position: relative;
  display: inline-block;
  color: #495057;
  font-size: 15px;
  line-height: 100%;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  margin: 0 0 0 12px;
}

header a i {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0 3px 0 0;
  float: left;
}

header a:hover {
  color: #467fcf;
  text-decoration: none;
}

header span {
  margin-left: 16px;
}

header span.green {
  color: green;
}
header span.red {
  font-weight: 600;
  color: red;
  cursor: pointer;
}

header span.red:hover {
  text-decoration: underline;
}

header input[type="checkbox"] {
  float: none;
  display: inline-block;
}
header input[type="button"] {
  width: auto;
  display: inline-block;
  padding: 9px 12px 9px 12px;
  margin-right: 10px;
}
header input[type="checkbox"] {
  display: inline-block;
  float: left;
  margin: 0 4px -10px 10px !important;
}

header span.warning a {
  cursor: pointer;
  color: red;
  font-weight: 600;
  text-decoration: none;
}

header span.warning a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

.scrollable {
  overflow: auto;
}

.terms .scrollable {
  height: calc(100vh - 154px);
  text-align: justify;
  padding: 10px 30px 20px 10px;
}

.terms {
}

.terms h2 {
  padding: 0;
}

/* Scrollbars */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  padding: 49px 0 0 0;
  margin: 49px 0 0 0;
  border: 1px solid #e2e3ec;
  border-width: 1px 1px 0 0;
  border-radius: 0px;
}

.scrollable::-webkit-scrollbar-track {
  padding: 0;
  margin: 10px 0 20px 0;
}

.modal .scrollable::-webkit-scrollbar-track {
  padding: 0;
  margin: 0;
}

#select::-webkit-scrollbar-track {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 0px;
}


.loader,
.loader:after
{
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
}

.loader
{
	position:relative;
	font-size:12px;
	text-indent:-9999em;
	margin:calc((100vh - 300px ) * 0.5) auto;
	border-top:14px solid rgba(0,0,0, 0.1);
	border-right:14px solid rgba(0,0,0, 0.1);
	border-bottom:14px solid rgba(0,0,0, 0.1);
	border-left:14px solid #69a2ff;
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-animation:loader 1.1s infinite linear;
	animation:loader 1.1s infinite linear;
}

.loader-text
{
	position:absolute;
	height:500px;
	width:100vw;
	top:calc(50vh + 30px);
	color:#111111;
	font-size:20px;
	font-weight:400;
	text-align:center;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#ShowAnimations {
    display: none;
    margin-top: 1.5%;
    width: 100%;
    max-width: 100%;
	  font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.loading-table {
    width: 100%;
    border-collapse: collapse;
}

.loading-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.loading-cell {
    background: linear-gradient(100deg, #f0f0f0 30%, #e0e0e0 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: loading-animation 1s infinite; /* Use the unique keyframes name */
    border-radius: 4px;
    margin: 5px;
    flex: 1;
    height: 20px;
}

@keyframes loading-animation { /* Unique keyframes name */
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.modal
{
	position:fixed;
	display:none;
	max-height:calc(100vh - 140px);
	top:70px;
	color:#495057;
	font-family:"Source Sans Pro", Arial, sans-serif;
	font-size:15px;
	line-height:160%;
	background:#ffffff;
	padding:16px 16px 0 16px;
	border:1px solid #e2e3ec;
	box-shadow:1px 1px 3px #bbbbbb;
	overflow-x:hidden;
	overflow-y:auto;
	z-index:3;
}

.modal, .modal * 
{
	box-sizing:border-box;
}

.modal.visible 
{
	display:block;
}

.modal a i
{
	cursor:pointer;
}

/* Sizes */

.modal.small
{
	width:359px;
	left:calc(50vw - 179.5px);
}

.modal.medium
{
	width:684px;
	left:calc(50vw - 342px);
}

.modal.medium.scrollable /* Add space to accommodate the scrollbar. */
{
	width:690px;
}

.modal.large
{
	width:1009px;
	left:calc(50vw - 504.5px);
}

.modal.large.scrollable
{
	width:1021px;
	left:calc(50vw - 510.5px);
}

/* Action Menu and Filters */

.modal.action
{
	width:150px;
	padding:0;
	border:1px solid #dadbe4;
	box-shadow:1px 1px #dddddd;
}

.modal.action .section
{
	border:1px solid #e2e3ec;
	border-width:0 0 1px 0;
}

.modal.action .section .header
{
	font-weight:600;
	background:#e2e3ec;
	padding:12px;
}

.modal.action a,
.modal.action span
{
	position:relative;
	display:block;
	color:#495057;
	line-height:18px;
	text-decoration:none;
	padding:12px 12px 12px 36px;
}

.modal.action a:hover,
.modal.action span:not(.header):hover 
{
	cursor:pointer;
	background:#f2f2f2;
}

.modal.action a i,
.modal.action span i
{
	position:absolute;
	font-size:18px;
	margin:0 0 0 -26px;
}

.modal.action i.lni-checkmark-circle {color:green;}
.modal.action i.lni-circle-minus {color:#cccccc;}

.modal.filter
{
	width:200px;
	border:1px solid #dadbe4;
	box-shadow:1px 1px #dddddd;
}

.modal.filter form.schedule label
{
	display:block;
	height:20px;
	font-weight:400;
	line-height:20px;
	margin:0 0 6px 0;
}

.modal.filter form.schedule label input[type="checkbox"]
{
	margin:3px 6px 0 0;
}

.modal.filter form.schedule
{
	margin:0 0 16px 0;
}

.modal.pin
{
	padding:16px 20px 12px 20px;
	border:2px solid #dadbe4;
	box-shadow:none !important;
}

.modal.pin h2
{
	margin:0 0 16px 0;
}

.modal.pin span
{
	position:relative;
	display:block;
	padding:0 0 0 28px;
	margin:6px 0;
}

.modal.pin span i
{
	position:absolute;
	font-size:17px;
	margin:4px 6px 0 -24px;
}

/* Scrollable in column table */

.modal .scrollable
{
	max-height:410px;
	overflow-x:hidden;
	overflow-y:auto;
	padding:0 0 1px 0;
	margin:0 0 16px 0;
}

.modal .scrollable::-webkit-scrollbar-track
{
	padding:0;
	margin:0;
}

.modal .scrollable table 
{
	margin:0;
}

.modal .scrollable tr td:first-child 
{
	position:relative;
	width:30px;
	padding:0;
}

.modal .scrollable td input[type="checkbox"] 
{
	position:absolute;
	top:13px;
	left:9px;
}

/* Inline Elements */

.modal h1
{
	color:#495057;
	font-size:20px;
	font-weight:400;
	padding:0 0 16px 0;
	margin:0 0 16px 0;
	border:1px solid #e2e3eb;
	border-width:0 0 1px 0;
}

.modal h1 a,
.modal h1 span:not(.modal table tr td h1 span)
{
	color:#495057;
	font-size:15px;
	margin:0 0 0 12px;
}

.modal h1 a:hover
{
	color:#467fcf;
}

.modal h1 a.bold
{
	font-weight:600;
}

.modal h1 a i
{
	cursor:pointer;
	margin:0 4px 0 0;
}

.modal h1 a:first-child 
{
	margin:0 0 0 24px;
}

.modal h1 i
{
	margin:0 5px 0 0;
}

.modal h1 i.right
{
	cursor:pointer;
	padding:2px;
	margin:2px 0 0 0;
}

.modal h1 i.right:hover
{
	color:#ff0000;
	font-weight:700;
}

.modal h1 form
{
	display:inline-block;
}

.modal h1 input
{
	width:160px;
	padding:2px 10px;
	margin:0 0 0 12px;
}

.modal h2
{
	color:#495057;
	font-size:18px;
	font-weight:400;
	clear:both;
}

.modal h3
{
	font-size:15px;
	font-weight:600;
	margin:0 0 16px 0;
}

.modal h2 i,
.modal h3 i
{
	margin:0 5px 0 0;
}

.modal h2.section
{
	background:#f3f3f3;
	padding:5px 12px;
	border:1px solid #e2e3eb;
	border-width:0 0 1px 0;
}

/* Columns */

.modal .column
{
	width:324px;
	float:left;
}

.modal .column.half
{
	width:50%;
}

.modal .column.large
{
	width:650px;
}

.modal .column.xlarge
{
	width:975px;
}

.modal .column.padding-left
{
	padding:0 0 0 10px;
}

.modal .column.half.padding-left
{
	padding:0 0 0 5px;
}

.modal .column.padding-right
{
	padding:0 10px 0 0;
}

.modal .column.half.padding-right
{
	padding:0 5px 0 0;
}

.modal .column.padding-both
{
	padding:0 10px;
}

.modal .column img
{
	display:block;
	margin:0 0 4px 0;
}

.modal .column img.padding-right
{
	width:calc(100% - 16px);
}

.modal .column.map
{
	height:500px;
	padding:0 16px 0 0;
	margin:0 0 16px 0;
}

/* Checkboxes */

.modal .checkbox-list
{
	padding:0 0 0 10px;
	margin:0 0 16px 0;
}

.modal .checkbox-list.no-padding
{
	padding:0;
}

.modal .checkbox-list h2:not(:first-child)
{
	margin:16px 0;
}

.modal .checkbox-list label
{
	font-weight:400;
	line-height:24px;
	padding:0 0 0 2px;
	margin:0;
}

.modal .checkbox-list label input[type="checkbox"]
{
	display:inline-block;
	line-height:28px;
	float:left;
}

/* Tables */

.modal table
{
	width:100%;
	margin:0 0 16px 0;
	border-collapse:collapse;
}

.modal th
{
	width:130px;
	font-weight:600;
	text-align:left;
	white-space:nowrap;
	background:#f5f5f5;
	padding:8px 10px;
	border:1px solid #e2e3ec;
}

.modal td
{
	text-align:left;
	padding:8px 10px;
	border:1px solid #e2e3ec;
}

.modal td.right
{
text-align:right;
	float:none;
	
}

.modal td.no-break 
{
white-space: nowrap;
}

/* Location Schedule Column */

.modal td.schedule span
{
	height:81px !important;
	cursor:pointer;
	display:block;
	width:14.2%;
	font-size:110%;
	line-height:50px;
	text-align:center;
	border:1px solid rgb(226, 227, 236);
	border-width:0 1px 0 0;
	float:left;
}

.modal td.schedule span:last-child
{
	border:0;
}

.modal td.schedule span em
{
	display:block;
	color:#222222;
	font-size:14px;
	font-weight:600;
	line-height:30px;
	background:#eeeeee;
	border:1px solid rgb(226, 227, 236);
	border-width:0 0 1px 0;
}

/* Forms */

.modal label em
{
	color:#747f8a;
	font-weight:400;
}

.modal label[for]
{
	position:relative;
	font-weight:400;
	padding:0 0 0 20px;
}

.modal label[for] input[type="checkbox"]
{
	position:absolute;
	top:6px;
	left:2px;
}

.modal input
{
	margin:0 0 16px 0;
}

.modal input[type="submit"]:disabled
{
	cursor:no-drop;
	font-weight:600;
	background:#f5f5f5;
}

.modal .input-search
{
	display:none;
	max-height:186px;
	margin:-17px 0 0 0;
	border:1px solid #e2e3ec;
	overflow:auto;
}

.modal .input-search span
{
	display:block;
	padding:6px 8px;
	border:1px solid #e2e3ec;
	border-width:0 0 1px 0;
}

.modal .input-search span:last-child
{
	border:0;
}

.modal .input-search span:hover
{
	background:#ffffd4;
}

#searchAccount {
  display: none;
  position: absolute;
  width: 110px;
  max-height: 186px;
  background-color: white;
  margin-left: 374px;
  border: 1px solid #e2e3ec;
  overflow: auto;
  z-index: 100;
}

#searchAccount span {
  margin-left: 0px !important;
  display: block;
  padding: 6px 8px;
  border: 1px solid #e2e3ec;
  border-width: 0 0 1px 0;
  z-index: 100;
}

#searchAccount span:last-child {
  border: 0;
}

#searchAccount span:hover {
  background: #ffffd4;
}

.modal textarea::-webkit-scrollbar-track
{
	padding:0;
	margin:0;
}

/* datepicker input */
#datepicker{
  margin-bottom: 0px;
  border: none;
  font-size: 15px;
  color: rgb(73, 80, 87);
  font-family: "Source Sans Pro", sans-serif; 
}

/* Form Buttons */

.modal button
{
	display:inline-block;
	color:#495057;
	line-height:37px;
	text-align:left;
	background:#ffffff;
	padding:0 10px;
	margin:8px 0 16px 0;
	border:1px solid #e2e3ec;
	transition:none;
}

.modal button i
{
	margin:3px 8px 0 0;
}

.modal button:hover
{
	color:#ffffff;
	background:#349aff;
}

.modal button:hover i
{
	color:#ffffff;
}

.modal .button-group
{
	display:inline-block;
	margin:8px 0 16px 0;
}

.modal .button-group button
{
	display:none;
	margin:0;
	border-width:1px 1px 1px 0;
	float:left;
}

.modal .button-group button:first-child
{
	display:block;
	border-width:1px;
}

.modal .button-group:hover button
{
	display:block;
}

/* Grouped Form Items */

.modal .item-group 
{
	margin:0 0 8px 0;
}

.modal .item-group.clear
{
	margin:0 0 16px 0;
	clear:both;
}

.modal .item-group input,
.modal .item-group select
{
	width:calc(25% - 17px);
	margin:0 0 0 12px;
	float:left;
}

.modal .item-group input.half,
.modal .item-group select.half
{
	width:calc(50% - 22px);
}

.modal .item-group input:first-child,
.modal .item-group select:first-child
{
	margin:0;
}

.modal .item-group input.bold
{
	font-weight:600;
	background:#f5f5f5;
}

.modal .item-group input:disabled,
.modal .item-group select:disabled
{
	cursor:no-drop;
}

.modal .item-group select:disabled {color:#000000;}

.modal .item-group i
{
	font-size:20px;
	padding:2px;
	margin:6.5px 2px 6.5px 6px;
}

.modal .item-group i:hover
{
	cursor:pointer;
	color:#ff0000;
	font-weight:700;
}

/* Warnings & Errors */

.modal .warning
{
	color:#111111;
	background:#fff4d3;
	padding:10px 14px;
	margin:0 0 16px 0;
	border:4px solid #ffc107;
	border-width:0 0 0 4px;
}

.modal .error
{
	color:#111111;
	background:#ffcdd2;
	padding:10px 14px;
	margin:0 0 16px 0;
	border:4px solid #e53935;
	border-width:0 0 0 4px;
}

.modal .warning strong,
.modal .error strong
{
	color:#111111;
}

.modal .red,
.modal a.red 
{
	color:#ff0000;
}

/* Attachments */

.attachments *
{
	font-size:15px;
	line-height:140%;
}

.attachment-thumbnail
{
	cursor:pointer;
	display:block;
	max-width:128px;
	margin:0 auto  !important;
}

/* Mobile Responsive Modals */

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

	.modal.medium,
	.modal.large,
	.modal.large.scrollable
	{
		width:90vw;
		left:5vw;
	}
	
	.modal .padding-left,
	.modal .padding-right,
	.modal .padding-both
	{
		padding:0 !important;
	}
}

@media only screen and (max-width: 767px)
{
	.modal h1
	{
		position:relative;
		padding:0 0 4px 0;
	}
	
	.modal h1 a,
	.modal h1 a:first-child
	{
		display:block;
		padding:5px 0;
		margin:0;
	}
	
	.modal h1 a:first-child
	{
		margin:4px 0 0 0;
	}
	
	.modal h1 i.right
	{
		position:absolute;
		top:0px;
		right:0px;
	}

	.modal .attachments table td
	{
		display:block;
		width:100%;
		text-align:center;
		border-width:1px 1px 0px 1px;
	}
	
	.modal .attachments table tr td:last-child
	{
		border-width:1px;
	}
	
	.modal .attachments table td .attachment-thumbnail
	{
		display:inline;
		max-width:65%;
	}
	
	.modal .attachments table td a
	{
		margin:0 5px;
	}
	
	.modal .attachments table td br
	{
		display:none;
	}
	
	.modal .attachments table tr
	{
		display:block;
		margin:0 0 16px 0;
	}
}
.service-button-group button {
  display: none;
}

.service-button-group button:first-child {
  display: block;
}

.service-button-group:hover button,
.service-button-group.service-force-show button {
  display: block;
}
/* Main container */
.ot-tracking-container {
    display: flex;
    height: 100vh;
    font-family: Arial, sans-serif;
  }
  
  /* Map */
  .ot-map {
    width: 70%;
    height: 100%;
    border-right: 1px solid #eee;
  }
  
  /* Operators list */
  .ot-operators-list {
    width: 30%;
    padding: 15px;
    overflow-y: auto;
    background: #f9f9f9;
  }
  
  .ot-operators-title {
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ba9547;
    color: #333;
    font-size: 18px;
    font-weight: 600;
  }
  
  .ot-operator-search {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
  }
  
  .ot-operators-list-container {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .ot-no-operators {
    color: #666;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .ot-operator-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    padding: 10px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
  }
  
  .ot-operator-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  .ot-operator-clickable {
    cursor: pointer;
  }
  
  .ot-operator-info {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }
  
  .ot-operator-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .ot-operator-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ba9547;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
  }
  
  .ot-operator-details {
    font-size: 16px;
    font-weight: 500;
  }
  
  .ot-operator-zone {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
  }
  
  .ot-operator-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
  }
  
  .ot-status-online {
    background: #e6ffe6;
    color: #2e7d32;
  }
  
  .ot-status-offline {
    background: #f0f0f0;
    color: #666;
  }
  
  /* Map marker styles */
  .ot-marker {
    position: absolute;
    width: 60px;
    height: 80px;
    cursor: pointer;
  }
  
  .ot-marker-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .ot-marker-content {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ba9547;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  
  .ot-marker-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .ot-marker-initial {
    font-size: 24px;
    color: #ba9547;
    font-weight: bold;
  }
  
  .ot-marker-pin {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid #ba9547;
    position: relative;
    top: -4px;
  }

/* TBR - we are not using any of the old popup code anymore??!! */

#popup
{
	z-index:3;border:1px solid #6b9b55;background-color:#fff;
	position:absolute;box-shadow:2px 2px #eee;height:auto;
}

#popup .column
{
	display:inline-block;max-width:330px;min-height:174px;
	width:auto;border-left:1px solid #dadbe4;float:left;
}

#popup h2
{
	font-size:1rem;
	font-weight:600;padding:8px 12px 10px 12px;
	background:#eee;line-height:100%;white-space:nowrap;
	text-overflow:ellipsis;overflow: hidden;margin-bottom:0;
}

#popup .inner {padding:4px;}

#popup .column:first-child h2
{
	background-color:#6b9b55;
	color:white;
}
#popup .column:first-child{border:0;}

#popup span
{
	display:block;padding:6px 8px 6px 6px;line-height:140%;white-space:nowrap;
	text-overflow:ellipsis;overflow: hidden;
}

#popup span i
{display:inline-block;float:left;
	margin:4px 6px 0 0;
}

#select
{
border:1px solid #dadbe4;overflow:auto;max-height:240px;
position:absolute;background:#fff;z-index:4;
border:1px solid #96bce4;
}

#select span
{
	cursor:pointer;min-width:80px;
	display:block;padding:6px 10px;
}

#select span:hover
{
background-color:#eee;
}

#filter
{
border:1px solid #dadbe4;width:240px;
padding:12px 16px;position:absolute;display:none;background:#fff;z-index:3;
}

#filter span
{
	display:block;
}

#filter span label
{
	font-weight:400;
}

#modal
{

position:fixed;display:none;background:#fff;z-index:3;width:302px;
	top:calc(100vh * 0.1);
  left: 50%;
  transform: translate(-50%, 0%);box-shadow:2px 2px #ddd;
}

#modal form, #modal .content
{
padding:16px 20px 20px 20px;border:1px solid #dadbe4;
}

#modal .content
{
padding:20px;border:1px solid #dadbe4;
}

#modal.medium {width:642px;}
#modal.medium .column {width:48.5%;}

#modal.medium .column:nth-child(2) {margin-right:3%;}

#modal.large {width:942px;}
#modal.large .column {width:300px;}
#modal.large .column.small {width:150px;}
#modal.large .column.large {width:600px;}

#modal div.column
{
	float:left;
}

#modal div.column.padding
{
padding-right:30px;
}

.column h2
{
	margin:0 0 1rem 0;
	font-size:15px;
	font-weight:600;line-height:160%;
}

.change-order {padding:0 17.5px;}

.change-order span
{
	width:145px;display:block;float:left;margin:0 0 12px 0;
}

.change-order span:nth-child(12) {margin-left:145px;margin-bottom:1.25rem;}

.change-order p {margin:0;clear:both;padding:4px 11px;}
.change-order p:last-child{background:#eee;font-weight:700;padding:4px 11px;}

.change-order p em {float:right;font-style:normal;}

.change-order span:hover strong{background-color:#eee;border-radius:2px 0 0 2px;}

.change-order strong {display:block;float:left;text-align:right;width:50px;margin-left:5px;padding-right:10px;padding-left:10px;line-height:42px;}

.change-order input {text-align:right;float:right;display:block;width:90px;margin:0;}

.change-order-warning
{
	display:none;
	color:red;
	font-size:14px;
	line-height:140%;
	text-align:center;
	margin:0 0 12px 0;
}

.change-order-warning input
{
	top:0px;
}

.change-order-warning strong
{
	color:red;
	font-size:14px;
}

#datepicker .day
{padding:0.66rem 1rem 0.66rem 1rem;}
#datepicker .day:not(.is-disabled){cursor:pointer;}

/*
form .column textarea {height:280px;margin:0;}
form .column textarea.small {height:226px;}*/

#modal header
{font-size:18px;
border:1px solid #dadbe4;
border-width:1px 1px 0 1px;

}


#filter input {margin:0;}

#filter label {text-decoration:none;}

#modal .quickinfo tr td:first-child
{vertical-align:top;
	font-weight:700;background:#eee;margin-right:10px;
}

#modal .quickinfo tr td
{
	padding:4px 8px;
}

#modal .quickinfo tr
{
margin-bottom:24px;
}

#webEditor
{
	position:absolute;
	display:none;z-index:3;
	width:100vw;
	height:100vh;
	overflow:hidden;
	background:#000000;top:0px;
	left:0px;text-align:center;
}

#webEditor nav
{
position:fixed;display:block;
top:10px;left:auto;bottom:auto;height:56px;width:56px;
right:27px;z-index:4;padding:0;margin:0;overflow:hidden;
}

#webEditor nav:hover
{
	height:auto;
}

#webEditor nav a
{
	content:"";
	display:block;
width:56px;
height:56px;
background-color:#e1e1e1;
background-size:32px;
	background-position:center;padding:0;margin:0;
	background-repeat:no-repeat;z-index:4;
}

#webEditor nav a:hover
{
	background-color:#69a0e2;
}

#webEditor nav a.mobile {background-image:url('../images/mobile.png');}
#webEditor nav a.mobile:hover {background-image:url('../images/mobile-hover.png');}
#webEditor nav a.save {background-image:url('../images/save.png');}
#webEditor nav a.save:hover {background-image:url('../images/save-hover.png');}
#webEditor nav a.close {background-image:url('../images/back.png');}
#webEditor nav a.close:hover {background-image:url('../images/back-hover.png');}

#webEditorFrame
{
border:0;
width:100%;
height:100%;
margin:0 auto;
display:block;
background:white;
}

/* oldish modal code */
/*
.modal
{
	position:absolute;
	display:none;
	background:#ffffff;
	border:1px solid #dadbe4;
	box-shadow:1px 1px #dddddd;
	z-index:3;
}

.modal div.exports
{
	padding:20px 20px 10px 10px;
}

.modal div.exports a
{
	display:block;
	float:left;
	border:1px solid #ccc;font-size:18px;
	width:calc(50% - 10px);margin-left:10px;
	text-align:center;
	height:60px;margin-bottom:10px;
	line-height:60px;
}

.modal div.exports a:hover {background:#f5f5f5;}

.modal div.exports p {padding-left:10px;}

.modal.form
{
}

.modal.action a
{
	text-decoration:none;
	color:#495057;display:block;
}

.modal.action span
{
	cursor:pointer;
	position:relative;
	display:block;
	min-width:80px;
	color:#495057;
	font-size:15px;
	text-align:right;
	line-height:100%;
	text-decoration:none;
	padding:12px 32px 12px 12px;
}

.modal.action span:hover
{
	background:#eeeeee;
}

.modal.action span *
{
	cursor:pointer;
}

.modal.action span i
{
	position:absolute;
	font-size:17px;
	margin:-1px 0 0 8px;
}

.modal.action span.no-icon
{
	padding:12px;
}

.modal.action span.bold 
{font-weight:700;background-color:#f0f0f0;}

.modal.action div.group {border:1px solid #ddd;border-width:1px 0 1px 0;}

.modal.action span i.fe-check-circle {}
.modal.action span i.fe-circle,
.modal.action span i.fe-bell-off
 {color:#bbbbbb;}

.modal.form
{
position:fixed;display:none;background:#fff;z-index:3;width:302px;
	top:calc(100vh * 0.1);
  left: 50%;
  transform: translate(-50%, 0%);
  
}

.modal form
{padding:16px 20px 20px 20px;
}


.modal table
{
width:100%;margin-bottom:10px;border-collapse:collapse;
}

.modal table thead th
{
border-bottom:1px solid #e2e3ec;text-align:left;
}


.modal table th,
.modal table td
{padding:3px;}

.modal header
{font-size:18px;font-weight:600;
border:1px solid #dadbe4;
border-width:0 0 1px 0;background:#f5f5f5;

}

.modal.small
{
	width:240px;
}
.modal .column
{
	float:left;
}
.modal.medium {width:642px;}
.modal.medium .column {width:48.5%;}
form .column.margin {margin:0 3% 0 0;}
.modal .column.padding
{
padding-right:30px;
}
.modal .hidden
{
	display:none;
}*/

/* Animations */

@-webkit-keyframes scale-up-tr {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes scale-up-tr {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}

th.starred
{
	width:50px;
}

th.starred i.lni-star-half
{
	cursor:pointer;
}

#data td.starred
{
	text-align:center;
	padding:0 15px !important;
}

#data td.starred i
{
	cursor:pointer;
	font-size:15px;
	float:none;
}

#data td.starred i.lni-star-filled
{
	color:#f7c770;
}

* {
	cursor: default;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body,
form *,
select,
select *,
select option {
	color: #495057;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 15px;
	line-height: 160%;
}

body {
	background: #eeeeee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 140%;
}

p {
	margin: 0 0 1rem 0;
}

ul,
ol {
	margin: 0 0 1.5rem 2.5rem;
}

a {
	cursor: pointer;
	color: #467fcf;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	display: block;
	max-width: 100%;
}

abbr {
	cursor: help;
	text-decoration: underline;
	border: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear::after {
	content: "";
	clear: both;
	display: table;
}

.fullscreen {
	position: absolute;
	display: none;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background: #eeeeee;
	z-index: 4;
}

.map_view_cursor {
	cursor: pointer;
}

input[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 100%;
	height: 55px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
}

#create-Depot {
	width: 450px;
	float: left;
}

#depot_form_1 {
	width: 46%;
	float: left;
}

#depot_form_2 {
	width: 46%;
	float: right;
}

small {
	font-size: 10px;
}
.padding-right-assignee {
	padding: 0 10px 0 0;
}
.padding-right-assignee {
	padding: 0 10px 0 0;
}
.checkbox-list-inline {
	display: inline-flex;
}

.checkbox-list-inline label:nth-child(2) {
	margin: 0px 0px 0px 25px !important;
}
 /* Adding for the CON */
body.DMO #side,
body.WSS #side,
body.NQP #side,
body.CON #side
{
	background-size:auto 46px;
	background-position: 8px 15px !important;

}

.inline-item{
	display: inline !important;
}
.copy-code{
    padding: 11px;
    margin: 0px 0px 16px 20px;
}


.canceled_booking{
	background: #7c78782b;
    color: #927171;
}
.Booking_Missed{
	background-color: #ff5d5d;
}
.Booking_Missed:hover{
	background-color: #ff5d5d !important;
}
.Booking_Completed{
	background-color: #5dff61;
}
.Booking_Completed:hover{
	background-color: #5dff61 !important;
}
.Booking_Incorrect_Booking{
	background-color: #ff9e5d;
}
.Booking_Incorrect_Booking:hover{
	background-color: #ff9e5d !important;
}
#CurrentLocationRunHolderContainer{
	width: 31%;
	float: left;

}

#CurrentLocationRunHolder{
	margin: 0px;
	list-style-type: none;

}
#CurrentLocationRunHolder li {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0px;
}
#CurrentLocationRunHolder span{
	cursor: pointer;
	float: right;
	margin-top:-8px;
}
#LocationAllRunsHolder {
	width: 68%;
	float: right;
}
#LocationAllRunsHolder .column.large {
	max-width: 100%;
}
#blockedSchedule{
	cursor: default;
    color: gainsboro;
}
.no-wrap {
    white-space: nowrap;
}
.padding-bottom{
	padding-bottom: 5px;
}
.padding-denominations {
	padding: 5px 10px;
}
.width-40{
	width: 40% !important;
}
.width-60{
	width: 60% !important;
}
#driverForm input[type="date"] {
    line-height: 26px; /* Adjust the line-height value as needed */
}
#confirmation-buttons{
	text-align: center;
}
#confirmation-buttons button{
	margin:20px;
}
.width-100{
	width: 100% !important;
}
.width-50{
	width: 50% !important;
}
.width-65{
	width: 65% !important;
}
.run-cancelled-text{
	color: red !important;
}
.change-order-modify-right{
	float: right;
	width: 312px;
}

.BiographyDataTable {
    width: 100%;
    border-collapse: collapse;
}

.BiographyDataTable th, 
.BiographyDataTable td {
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
}

.BiographyDataTable th {
    background-color: #f2f2f2;
}

.BiographyDataTable th:nth-child(1),
.BiographyDataTable td:nth-child(1) {
    width: 70%; /* Description column */
}

.BiographyDataTable th:nth-child(2),
.BiographyDataTable td:nth-child(2) {
    width: 15%; /* Date column */
}

.BiographyDataTable th:nth-child(3),
.BiographyDataTable td:nth-child(3) {
    width: 15%; /* Action column */
}

.BiographyDataTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

.BiographyDataTable tr:hover {
    background-color: #ddd;
}

.BiographyDataTable td a {
    color: #007bff;
    text-decoration: none;
}

.BiographyDataTable td a:hover {
    text-decoration: underline;
}
.biography-images {
    display: flex;           
    flex-wrap: wrap;        
    gap: 10px;               
}

.image-container {
    flex: 0 0 auto;          
    width: 100px;            
    height: 100px;           
	margin: 12px 0px 0px 0px;
}

.image-container img {
    width: 100%;             
    height: 100%;            
    object-fit: cover;       
    border-radius: 5px;      
}
.image-container a {
	margin: 0 11px 0px 20px;
}
.profile-overview-left-container{
	float: left;
	width: 35%;
}

.client-profile-photo-container {
	text-align: center;
  }
  
  .client-profile-photo {
	width: 300px;
	height: 150px;
	object-fit: contain;
	/* border-radius: 50%; */
	border: 2px solid #ddd;
	margin: 0 auto;
  }
  .client-profile-right-container{
	float: right;
	width: 64%;
	height: 381px;
	padding: 10px;
	overflow: auto;
  }
  .profile-company-notes{
	float: left;
	height: 300px;
	width: 49%;
	border: 1px solid #ccc;
	padding: 10px;
  }
  .profile-location-notes{
	float: right;
	height: 300px;
	width: 49%;
	overflow: auto;
	border: 1px solid #ccc;
	padding: 10px;
  }
  .profile-location-notes h3{
	display: inline;
	float: left;
  }
  .profile-location-notes select {
	float: right;
	width: 160px;
	font-weight: 600;
  }
  .profile-address-tr {
	height: 66px; /* Set your desired fixed height */
  }
  
  .profile-address-tr th,
  .profile-address-tr td {
    max-width: 300px;
    line-height: 1.5em;
    max-height: 3em; /* Approx height for 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.profile-html-format{
	display: block;
    height: 250px !important;
    overflow: auto;
	border :none !important;
}
.client-profile-right-container h2{
	display: inline;
	float: left;
}
.client-profile-right-container button{
	float : right;
	margin: 0px 0px 7px 0px;
	background-color: #f5f5f5;
}
.profile-attachments{
	width: 970px;
    margin-top: 4px;
}
/* .ProfilePhotoModal .cropper-crop-box,
.ProfilePhotoModal .cropper-view-box {
  border-radius: 50%;
} */
.profile-camera-icon {
	display: inline-block;
	margin-top: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 24px;
	color: #555;
  }
  .profile-camera-icon:hover {
	color: #000;
  }
  .client-profile-photo-container h1{
	border: none !important;
	margin: 0px !important;
  }
.profile-company-notes h3,
.profile-location-notes h3,
.client-profile-right-container h2,
.add-attachment-button li {
  padding: 7px;
}
.profile-company-notes h3{
	float: left;
}
.cropperProfileZoomButtons {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 10px;
  }
  
  .profile-zoom-controls {
	display: inline-flex;
	gap: 20px;
  }
  
  .profile-zoom-controls button {
	font-size: 24px;
	color: #555;
	background: none;
	border: none;
	cursor: pointer;
  }
  
  .profile-zoom-controls button:hover {
	color: #000;
  }
  
  .profile-upload-button {
	position: absolute;
	right: 0;
	padding: 6px 12px;
	font-size: 14px;
	background-color: #349aff;
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
  }
  
  .profile-upload-button:hover {
	background-color: #287ac7;
  }
.client-profile-photo-container h1{
	font-weight: 800;
	font-size: x-large;
}
.profile-camera-upload-icon{
	margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.profile-attachments-section{
	margin: 10px 5px 0px 0px !important;
}
.add-profile-association-button{
	margin: 0px 25px !important;
    height: 40px;
	padding:0px 6px !important;
	font-size: revert !important;
}
.add-profile-association-button:hover{
	background-color: #fff !important;
	color: #000000 !important;
}
.profile-top-heading{
	background-color: #f5f5f5;
    height: 40px
}
.profile-top-heading h3{
	margin-top: 3px;
}
.zone-logo-table img {
    margin: 0 auto !important;
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
}
.zone-logo-table a {
	display: block;
	text-align: center;
}
.zone-details-table {
	table-layout: fixed;
}
.zone-details-table th,
.zone-details-table td {
  overflow: hidden; 
  word-break: break-word; 

}
.center {
	text-align: center !important;
}
.subscription-controls {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap; /* allows wrapping on small screens */
  }
  
  .subscription-controls .left {
	flex: 1;
  }
  
  .subscription-controls .right button {
	white-space: nowrap;
  }
  .hide {
	display: none !important;
  }
 .table-text-center th,
.table-text-center td {
  text-align: center !important;
  vertical-align: middle;
}
.disable {
	pointer-events: none;
	opacity: 0.6;
}
.credit_balance{
	float: right;
	margin-right: 10px;
	font-weight: 600;
	color: green;
	font-size: 16px;
}
.checkbox-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px; /* space between rows and columns */
  padding: 0;
}

.checkbox-container label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.red-error-message {
  color: #b00020; /* deep red */
  background-color: #fdecea; /* light red background */
  border: 1px solid #f5c2c7; /* soft red border */
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  margin: 10px 0;
}
.red-error-message::before {
  content: "⚠️";
  margin-right: 8px;
}
/**
Notifiction Alert css start
*/
.notification-permission-modal {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 16px;
  z-index: 9999;
  font-family: sans-serif;
  text-align: center;
}

.notification-permission-modal .logo {
  width: 60px;
  margin-bottom: 8px;
}

.notification-permission-modal .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.notification-permission-modal button {
  flex: 1;
  margin: 0 4px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#notificationAllow {
  background-color: var(--Zone-Background);
  color:  var(--Zone-Color);
}

#notificationLater {
  background-color: #f0f0f0;
  color: #727272;
}

/**
Notifiction Alert css end
*/

/* Main container */
.sc-chats-container {
  display: flex;
  height: 100vh;
  font-family: Arial, sans-serif;
}

/* Contacts list */
.sc-contacts-list {
  width: 25%;
  height: 100%;
  overflow-y: auto;
  background: #f9f9f9;
  padding: 15px;
  border-right: 1px solid #eee;
}

.sc-contacts-title {
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--Zone-Background);
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.sc-new-chat-button {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sc-new-chat-button:hover {
  background: rgba(var(--Zone-Background-RGB), 0.8);
  color: var(--Zone-Color);
  transform: scale(1.02);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.sc-chat-search {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.sc-chat-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.sc-chat-item.sc-active-chat {
  background: rgba(var(--Zone-Background-RGB), 0.2);
}

.sc-chat-item.sc-unread-chat {
  background: #ffebee;
}

.sc-chat-avatar-container {
  position: relative;
  pointer-events: none;
}

.sc-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #ddd;
}

.sc-unread-chat .sc-chat-avatar {
  border-color: #d32f2f;
}

.sc-status-indicator {
  position: absolute;
  bottom: 0;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.sc-chat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.sc-chat-name-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sc-chat-name-text {
  font-weight: 600;
  font-size: 15px;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.sc-chat-org {
  font-size: 14px;
  font-weight: 600;
}

.sc-unread-count {
  color: var(--Zone-Color);
  background: #d32f2f;
  padding: 0px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: auto;
}


.sc-latest-message {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Chat area */
.sc-chat-area {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sc-chat-header {
  padding: 15px;
  background: rgba(var(--Zone-Background-RGB), 0.2);
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #fafafa;
}

.sc-chat-footer {
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

.sc-image-preview-container {
  position: relative;
  display: none;
  margin-bottom: 10px;
  width: fit-content;
}

.sc-image-preview {
  max-width: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.sc-remove-image-button {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--Zone-Background);
  border: none;
  color: var(--Zone-Color);
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.sc-input-container {
  display: flex;
  align-items: center;
}

.sc-image-input {
  display: none;
}

.sc-attach-image-button {
  padding: 10px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

.sc-attach-image-button:hover {
  background: rgba(var(--Zone-Background-RGB), 0.2);
  color: var(--Zone-Color);
  transform: scale(1.02);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.sc-attach-image-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.sc-chat-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  min-height: 60px;
  max-height: 400px;
  resize: none;
  font-size: 14px;
  outline: none;
  margin: 0 10px;
  overflow-y: auto;
}

.sc-chat-input:disabled {
  border-color: #ddd;
}

.sc-chat-input:enabled {
  border-color: var(--Zone-Background);
}

.sc-send-button {
  padding: 12px 24px;
  border: none;
  background: #ccc;
  color: white;
  border-radius: 8px;
  cursor: not-allowed;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  opacity: 0.6;
}

.sc-send-button:enabled {
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  cursor: pointer;
  opacity: 1;
}

/* Message styles */
.sc-message-container {
  margin-bottom: 20px;
  display: flex;
}

.sc-message-operator {
  justify-content: flex-start;
}

.sc-message-agent {
  justify-content: flex-end;
}

.sc-message-content {
  max-width: 60%;
}

.sc-message-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

.sc-message-operator .sc-message-header {
  justify-content: flex-start;
}

.sc-message-agent .sc-message-header {
  justify-content: flex-end;
}

.sc-sender-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.sc-message-date {
  font-size: 12px;
  color: #888;
}

.sc-message-body {
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}

.sc-message-operator .sc-message-body {
  background: #f0f0f0;
  color: #333;
}

.sc-message-agent .sc-message-body {
  background: var(--Zone-Background);
  color: var(--Zone-Color);
}

.sc-message-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.sc-message-image {
  width: 200px;
  height: auto;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sc-pending-image-container {
  position: relative;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.sc-pending-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 0.7;
}

.sc-spinner {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--Zone-Color);
  border-top-color: var(--Zone-Background);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
}

.sc-failed-attachment {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  max-height: 100px;
  overflow-y: auto;
  word-break: break-all;
}

.sc-message-status {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.sc-read-status {
  font-size: 14px;
}

.sc-read {
  color: #e6ffe6;
}

.sc-unread {
  color: rgba(255,255,255,0.5);
}

.sc-failed-message {
  color: #d32f2f;
  font-size: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sc-failed-icon {
  margin-right: 5px;
}

/* Modals */
.sc-image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.sc-modal-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.sc-close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--Zone-Color);
  border: none;
  padding: 8px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sc-new-chat-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.sc-new-chat-modal-content {
  background: #fff;
  width: 50%;
  max-width: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.sc-new-chat-modal-header {
  padding: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sc-close-new-chat-modal {
  background: none;
  border: none;
  color: var(--Zone-Color);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.sc-new-chat-modal-body {
  padding: 15px;
}

.sc-search-operators {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.sc-operators-list {
  max-height: 300px;
  overflow-y: auto;
}

.sc-operator-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}

.sc-operator-item:hover {
  background: rgba(var(--Zone-Background-RGB), 0.2);
}

.sc-operator-avatar-container {
  position: relative;
  margin-right: 12px;
}

.sc-operator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ddd;
  object-fit: cover;
}

.sc-operator-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.sc-operator-info {
  flex:  1;
}

.sc-operator-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.sc-operator-email {
  font-size: 13px;
  color: #666;
}

.sc-crop-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.sc-crop-modal-content {
  background: #fff;
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.sc-crop-modal-header {
  padding: 15px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sc-close-crop-modal {
  background: none;
  border: none;
  color: var(--Zone-Color);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.sc-crop-modal-body {
  padding: 15px;
  text-align: center;
}

.sc-crop-image {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

.sc-crop-modal-footer {
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sc-cancel-crop {
  padding: 10px 20px;
  background: #ccc;
  color: #333;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.sc-confirm-crop {
  padding: 10px 20px;
  background: var(--Zone-Background);
  color: var(--Zone-Color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.toast-notification {
  position: fixed;
  text-decoration: none;
  z-index: 999999;
  max-width: 300px;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  display: flex;
  padding: 10px;
  transform: translate(0, -150%);
}
.toast-notification .toast-notification-wrapper {
  flex: 1;
  padding-right: 10px;
  overflow: hidden;
}
.toast-notification .toast-notification-wrapper .toast-notification-header {
  padding: 0 0 5px 0;
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  word-break: break-all;
  color: #4f525a;
}
.toast-notification .toast-notification-wrapper .toast-notification-content {
  font-size: 14px;
  margin: 0;
  padding: 0;
  word-break: break-all;
  color: #4f525a;
}
.toast-notification .toast-notification-close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  line-height: 24px;
  padding-bottom: 4px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
}
.toast-notification .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4);
}
.toast-notification.toast-notification-top-center {
  transform: translate(calc(50vw - 50%), -150%);
}
.toast-notification.toast-notification-bottom-left,
.toast-notification.toast-notification-bottom-right {
  transform: translate(0, 150%);
}
.toast-notification.toast-notification-bottom-center {
  transform: translate(calc(50vw - 50%), 150%);
}
.toast-notification.toast-notification-dark {
  background-color: #2d2e31;
}
.toast-notification.toast-notification-dark
  .toast-notification-wrapper
  .toast-notification-header {
  color: #edeff3;
}
.toast-notification.toast-notification-dark
  .toast-notification-wrapper
  .toast-notification-content {
  color: #edeff3;
}
.toast-notification.toast-notification-dark .toast-notification-close {
  color: rgba(255, 255, 255, 0.2);
}
.toast-notification.toast-notification-dark .toast-notification-close:hover {
  color: rgba(255, 255, 255, 0.4);
}
.toast-notification.toast-notification-success {
  background-color: #c3f3d7;
  border-left: 4px solid #51a775;
}
.toast-notification.toast-notification-success
  .toast-notification-wrapper
  .toast-notification-header {
  color: #51a775;
}
.toast-notification.toast-notification-success
  .toast-notification-wrapper
  .toast-notification-content {
  color: #51a775;
}
.toast-notification.toast-notification-success .toast-notification-close {
  color: rgba(0, 0, 0, 0.2);
}
.toast-notification.toast-notification-success .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4);
}
.toast-notification.toast-notification-error {
  background-color: #f3c3c3;
  border-left: 4px solid #a75151;
}
.toast-notification.toast-notification-error
  .toast-notification-wrapper
  .toast-notification-header {
  color: #a75151;
}
.toast-notification.toast-notification-error
  .toast-notification-wrapper
  .toast-notification-content {
  color: #a75151;
}
.toast-notification.toast-notification-error .toast-notification-close {
  color: rgba(0, 0, 0, 0.2);
}
.toast-notification.toast-notification-error .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4);
}
.toast-notification.toast-notification-verified {
  background-color: #d0eaff;
  border-left: 4px solid #6097b8;
}
.toast-notification.toast-notification-verified
  .toast-notification-wrapper
  .toast-notification-header {
  color: #6097b8;
}
.toast-notification.toast-notification-verified
  .toast-notification-wrapper
  .toast-notification-content {
  color: #6097b8;
}
.toast-notification.toast-notification-verified .toast-notification-close {
  color: rgba(0, 0, 0, 0.2);
}
.toast-notification.toast-notification-verified
  .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4);
}
.toast-notification.toast-notification-dimmed {
  opacity: 0.3;
}
.toast-notification.toast-notification-dimmed:hover,
.toast-notification.toast-notification-dimmed:active {
  opacity: 1;
}





.hidden
{
display:none;
}

.nopadding{padding:0 !important;}









input[type="radio"] {opacity:0;position:absolute;width:1px;height:1px;}

input[type="radio"] + label.radio
{
	font-weight:400;margin-bottom:4px;cursor:pointer;text-decoration:none !important;
}

input[type="radio"] + label.radio:before
{position:relative;margin:0 6px -3px 0;
	display:inline-block;cursor:pointer;width:14px;height:14px;content:"";background-color:#fff;border-radius:50%;border:1px solid rgba(0, 40, 100, 0.12);
}

input[type="radio"]:checked + label.radio:before
{
position:relative;margin:0 6px -3px 0;
	display:inline-block;cursor:pointer;width:6px;height:6px;content:"";background-color:#fff;border-radius:50%;border:5px solid #467fcf;
}
.radio-group {margin-bottom:0.75rem;}
 text-decoration:none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.status {
    content: '';
    width: 10px !important;
    height: 10px !important;
    display: inline-block;
    border-radius: 50%;
    margin-top:4px;
    margin-right: 8px;
    vertical-align: middle;
float:left;
}
.status.red {
    background-color: #cd201f !important;
}

.status.orange {
    background-color: #f1c40f !important;
}

.status.green {
    background-color: #5eba00 !important;
}

.inline {display:inline !important;}

td[data-edit]:hover
{
	background:url('../images/edit.png');
	background-size:12px 12px;
	background-position:bottom 5px right 5px;
	background-repeat:no-repeat;
}


header input[type="date"] {
    display:inline-block;position:relative;
    line-height:100%;-webkit-appearance: none;
    color: #495057;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    padding:4px 10px;margin:0 0 0 10px;
    width:140px;    border: 1px solid #e2e3ec;
    border-radius: 0px;font-weight:400;color: #495057;
}
header input[type="date"], header select {width:120px !important;}
@media only screen and (max-width: 1366px)
{
header input[type="date"], header select {width:120px !important;}
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{ -webkit-appearance: none; 
  margin: 0; }

header input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;-webkit-appearance: none;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

p.warning
{
	color:white;
	background:#fa4c4c;line-height:140%;
	font-weight:700;padding:6px 10px;
}
.prevent-scrolling
{
	height:100% !important;
	overflow:hidden !important;
}

.wysiwyg
{
	padding:20px;
}

.wysiwyg input[name="title"]
{
	font-size:18px;
	margin:0.5rem 0 6px 0;
	border-radius:0;
}

.wysiwyg .editor
{
	width:100%;
	background:#ffffff;
	float:left;
}

.wysiwyg .editor .content
{
border:1px solid #e2e3ec;
}

.wysiwyg #editor
{
	width:100%;
	height:calc(100vh - 188px);
	background:#ffffff;
}

.wysiwyg .settings
{
	display:none;
	width:calc(100% - 730px);
	background:#ffffff;
	margin:0 0 0 10px;
	float:right;
}

.wysiwyg .settings .content
{
	padding:12px 16px 0 16px;
	border:1px solid #e2e3ec;
}

.tox.tox-tinymce,
.tox.tox-tinymce *
{
	border-color:#e2e3ec !important;
}
/*!
 * Cropper.js v1.5.5
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-08-04T02:26:27.232Z
 */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
.hello-week .week {
  color: #42a298;
  font-size: 1.2em; }

.hello-week .day.is-weekend {
  color: #ff3860; }

.hello-week .day.is-highlight {
  background-color: #8fbc8f;
  color: #fff; }

.hello-week .day.is-today {
  background-color: #ff3860;
  color: #fff; }

.hello-week .day.is-selected {
  background-color: #7fcbc3 !important;
  color: #fff !important; }

.hello-week .day.is-begin-range, .hello-week .day.is-end-range {
  background-color: #42a298 !important;
  color: #fff !important; }

.hello-week .day.is-disabled {
  cursor: not-allowed;
  opacity: .33; }

.hello-week {
  width: 100%;
  margin: 0 auto;
  user-select: none;
  font-size: 1em; }
  .hello-week .navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0; }
  .hello-week .prev,
  .hello-week .next {
    padding: 1em;
    cursor: pointer; }
  .hello-week .period {
    width: 100%;
    font-size: 1.6em;
    font-weight: 400;
    text-align: center; }
  .hello-week .week {
    display: flex; }
    .hello-week .week.rtl {
      flex-direction: row-reverse; }
  .hello-week .month {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer; }
    .hello-week .month.rtl {
      flex-direction: row-reverse; }
  .hello-week .day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.28571%;
    padding: 1em;
    transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.49, 0.9); }