.navbar-baymessage {
	background-color: rgb(40, 83, 128);
	//background-image: linear-gradient(rgb(210,234,242) 10%, rgb(210,234,255) 100%)
}


.user-change {
	border:1px solid white;
	color:white;
}

body { overflow-x:hidden; }

.thread-container { max-height: calc(100vh - 75px); }

.dropdown-item.active, .dropdown-item:active {
	background:transparent !important;
	color:black !important;
}
.navbar-brand { color:white; }

.dropdown-item { cursor:pointer; }
.vl { border-left:3px solid black; box-sizing: border-box; height:56px;}
.loading-order-information { display:none; margin:0 auto; text-align:center;}
.loading-order-information > .loader { margin:0 auto; }

.order-information-list, .order-information-list-confirmed-order, .order-no-previous-order { list-style:none; padding:0; display:none; }
.order-information-list, .order-information-list > *:is(li) { display:none; }
highlight a { color:red !important; }
.row { margin-right:0 !important; }

.nav-item.active {
	background-color: rgb(40, 83, 128);
	box-shadow:0 2px 0 0 white;
	color:white;
}
.nav-item { 
	padding:8px; 
}
.nav-item > a {
	color:rgb(200,200,200);  transition:color 0.3s ease;
}

.search-control {
	margin:0 auto;
}

.page_selector:hover {
	border-bottom-color: #aeb4aa
}
.page_selector:focus {
	border-bottom: 2px solid rgb(51, 122, 183);
}
.page_selector { -moz-appearance: textfield; border:0; outline:0; background:transparent; border-bottom:2px solid #ced4da; transition: border 0.3s ease; width:40px; text-align:center;}
.page_selector:focus { -moz-appearance:number-input; }

.nav-item.active > a { color:white;} 
.nav-item > a:hover { color:white; cursor:pointer; }

.next-button, .prev-button {
	background:transparent;
	color:#333;
	display:inline-block;
	font-size:14px;
	font-weight:400;
	line-height:1.42;
	text-align:center;
	vertical-align:middle;
	touch-action:manipulation;
	cursor:pointer;
	padding: 13px 25px;
	border-radius:0;
	border:0;
	margin:0 20px; 
}
.next-button:disabled, .prev-button:disabled {
	cursor:not-allowed;
	color:#aaa;
}

.message-list { list-style:none; margin:0; width:100%; padding:0; }

.message:hover { cursor:pointer; background-color:#F6F6F6; }
.message-list li:first-of-type { border-top:1px solid gray; }
.message { padding:5px; border-bottom: 1px solid gray; }

.message-header { color:gray; font-size:0.9em; font-family:Nunito, sans-serif;}
.message-header .name { float:left; }
.message-header .date { float:right; }

.thread-list, .thread-container { overflow-y:auto; }

.message-header-edit { border-bottom:1px solid black; }

.sent-message, .reply-message {
	padding:30px 70px;
	border-radius:0px;
}

.sent-message { 
	align-self:flex-start;
	background-color:#fdffb61a;
	border:1px solid #bba;
	border-bottom-left-radius:5px;
}
.reply-message { 
	align-self:flex-end;
	background-color:#9bf6ff1c;
	border:1px solid #bba;
	border-bottom-right-radius:5px;
}

.message-body-edit { flex:1; overflow:auto; }

.message-reply-edit {

}

.button {
	border-radius:0;
}

.button-settings {
	margin-left:5px; 
	height:50px;
	cursor:pointer;
}
.action-btn:disabled, .button-settings:disabled {
	background-color:rgb(147, 149, 151);
	cursor:not-allowed;
}
.button-default {
	background-color: rgb(40, 83, 128); 
	color:white;
	border: 1px solid rgb(11,11,11);
	transition: background-color 0.3s ease;
}
.button-default:not(:disabled):hover {
	color:white; 
	background-color:  rgb(30, 50, 180);
}
.hide-none { display:none; }
.thumb { width:4em; height:4em; }
.m-list-li { list-style:none; display:inline-block; margin-right:1rem; border:1px solid grey;}
.m-list-ul { padding:0; margin-top:1rem;}

.action-btn { 
	margin-left:5px; 
	border: 1px solid rgb(11,11,11);
	background-color: rgb(40, 83, 128);
	color:white;
}

.action-btn:not(:disabled):hover {
	background-color: rgb(35, 80, 110);
}

.btn-red {
	background-color:rgb(200,83,79) !important;
	border: 1px solid red;
}

.btn-red:disabled {
	cursor:not-allowed;
	background-color:rgb(200,83,79) !important;
}

.btn-red:not(:disabled):hover {
	background-color:rgb(225,70,60) !important;
}

highlight:hover { text-decoration:underline; cursor:pointer;}

.preset-form-controls { display:flex; justify-content:space-between; }


.message-container { display:flex; border-left:1px solid black; max-height:calc(100vh - 75px); }

.message-page-container { display:flex; flex-direction:column; border-right:1px solid black; padding:0px 5px; height:100%; }

.message-reply-edit > textarea {
	width:100%;
	height:100%;
	padding:5px;
}

.m-container { display:flex; word-wrap:anywhere; }
.m-date-reply { align-self: flex-end; }

button.action-btn:not(:disabled) { 
	background-color: rgb(40, 83, 128); 
	color:white;
}

button.action-btn:not(:disabled):hover { color:white; background-color:  rgb(35, 80, 170);}

.is-read-but-no-reply .message-title {
	color:lightgray;
}
.quick-actions { display:flex; justify-content: space-between; }

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.selected-message { background-color:#F6F6F6; }
.selected-message > .message-title { font-weight:bold;  }

#message_form { display:flex; height:100%; }
#message_field { flex: 1; }

.card-header { 
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background: white;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-weight: 600;
	font-size: 14px;
	color: #353434; 
	text-align:left;
}
.card-body {
	flex:1 1 auto;
	padding:1.25rem;
	background:white;
	justify-content:center;
}
.card {
	margin-bottom: 25px;
	box-shadow: 0 5px 15px
	rgba(57, 98, 254, 0.02), 0 3px 6px
	rgba(117, 108, 254, 0.12);
	border: none;
	background-color:#ffffff;
	margin-top:15px;
}
.card-title { text-align:left; font-weight:bold; font-family:'Roboto'; color: #353434;}
.tool-header {}
.tool-title { text-align:left; font-weight:bold; font-family:'Roboto'; color: white; font-size:18px;}
.tool-subtitle { display:block; color:white; font-size:14px; font-family:Verdana; }
.tool-header{ margin-bottom:0; border-bottom:1px solid white; text-align:left;} 
.tool {
	border-radius:2px;
	display:inline-grid;
	width:400px;
	max-width:100%;
	border:1px solid rgb(80,80,80);
	text-align:center;
	background-color:rgb(61,66,78);
	padding:10px; margin:5px;
}
.stat { border-radius:5px; color:white; margin:5px; font-family:'Roboto', sans-serif; flex:1 1 auto; display:flex; flex-direction:column; justify-content: center;}
.stat p { margin:5px 0 ; }
.stat h5 { margin: 5px 0; }
.font-bold { font-weight:bold; }
.stat-title { font-size:2em; }
.stats { display:flex; }
.gradient-orange { background:linear-gradient(45deg, #fc4a1a, #f7b733) !important; }
.gradient-blue { background:linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%) !important; }

.invalid {
	border-color:#FFAAAA;
}

body.MessagePage { overflow-y:hidden; }

.page_info { display:block; text-align:center; }

#snackbar {
	visibility: hidden;
	min-width: 250px;
	transform: translate(-50%, 0);
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 20;
	left:50%;
	z-index:300000;
	width:380px;
	font-size: 17px;
}
.invalid-form {
	border-color:rgba(255,50,50,1);
}
#snackbar.Top {
	top:30px;
}

#snackbar.Bottom {
	bottom:30px;
}

#snackbar.ShowTop {
	visibility: visible;
	-webkit-animation: fadeinTop 0.5s, fadeoutTop 0.5s 2.5s;
	animation: fadeinTop 0.5s, fadeoutTop 0.5s 2.5s;
}

#snackbar.ShowBottom {
	visibility: visible;
	-webkit-animation: fadeinBottom 0.5s, fadeoutBottom 0.5s 2.5s;
	animation: fadeinBottom 0.5s, fadeoutBottom 0.5s 2.5s;
}

@-webkit-keyframes fadeinTop {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadeinTop {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeoutTop {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeoutTop {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@-webkit-keyframes fadeinBottom {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadeinBottom {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeoutBottom {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeoutBottom {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

#snackbar.Toast-Error {
	color:#D8000C;
	background-color:#FFBABA;
}

#snackbar.Toast-Success {
	color:#4F8A10;
	background-color:#DFF2BF;
}
.form-item {
	border: 2px solid #e9e9e9;
	font-size: 16px;
	line-height: 20px;
	padding: 15px 20px;
	position: relative;
	z-index: 1;
	resize: none;
	border-radius: 3px;
	vertical-align: top;
	color: #262626;
	width: 100%;
	outline:0;
	background: #fcfcfc;
	min-width: 100%;
	will-change: border-color;
	transition: border-color 0.3s ease;
}
textarea {
	border:2px solid #222;
	border-radius: 3px;
	font-size: 16px;
	line-height: 20px;
	outline:0;
	background:#fcfcfc;
	transition: border-color 0.3s ease;
	padding:5px;
	
}
.form-item:focus, textarea:focus {
	border-color:rgb(40, 83, 128);
	outline:0;
	color: black !important;
	box-shadow:none;
}

span.add_btn {
	margin:10px;
	font-size:1.35em;
	transition: transform 0.3s ease;
	cursor:pointer;
	float:right;
	border: 1px solid green;
	padding: 10px;
	border-radius: 100%;
	background: green;
	color: white;
}
span.add_btn:hover {
	transform:scale(1.2);
}

.SmartMessage { margin-left:20px; color:blue; }
/* Custom Checkbox */
.cb_container .cb {
	position:absolute;
	top:0;
	left:0;
	height:25px;
	width:25px;
	background-color:#eee;
	transition: background-color 0.3s ease;
	z-index:1;
	display:flex;
	justify-content:center;
	align-items:center;
}

/* Change bg color on hover */
.cb_container:hover input ~ .cb {
	background-color:#ccc;
}

/* The container */
.cb_container {
	position:relative;
	padding-left:25px;
	margin-bottom:12px;
	cursor:pointer;
	user-select:none;
	font-size:22px;
}

/* Hide default input */
.cb_container input {
	position:absolute;
	top:0;
	left:0;
	width:25px;
	opacity:0;
	height:25px;
	margin:0;
	z-index:2;
	cursor:pointer;
}

.glyphicon { width:auto; }


.cb_container input:checked ~ .cb {
	background-color:rgb(40, 83, 128);
}

.cb:after {
	content:"";
	position:absolute;
	display:none;
}

.cb_container input:checked ~ .cb:after { display:block; }

.cb:after { 
	color:white;
	margin: auto auto;
	width:6px;
	height:12px;
	border:solid white;
	border-width:0 3px 3px 0;
	transform:rotate(45deg);
}

.table_row, .template-button { cursor:pointer; }

div.input-group-custom { position:relative; }
textarea#template_desc { resize:vertical; }

#message_form {
	margin-bottom:0px;
}

.mobile-only { display:none; }

.search-container {
	display:flex;
	margin:20px;
}

.btn-send {
	height:50px;
	align-self:flex-end;
	max-height:50px;
}

.ProcessingResponseNode, .has-attachment { display:none; }

.HasAttachment .has-attachment { display:block; }

.ProcessingResponse .ProcessingResponseNode {
	display:block;
	color:rgb(255,100,100);
	margin-right:20px;
}

.message-footer { 
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
}

.order-information { overflow-y:auto; overflow-x:hidden; }
.placeholder { word-break: break-all; }

.icons-order {
	display:flex;
	justify-content: space-between;
}

.flaggedMessage { float:right; color:red; margin-left:5px;}

.sync-icon, .flag-icon, .vat-receipt-icon, .ebay-link-icon {
	cursor:pointer;
	transition:transform 0.3s ease;
}

.sync-icon.disabled, .flag-icon.disabled, .vat-receipt-icon.disabled, .ebay-link-icon.disabled {
	color:grey;
}

.sync-icon:hover:not(.disabled) {
	transform:rotate(30deg);
}

.flag-icon:hover:not(.disabled), 
.vat-receipt-icon:hover:not(.disabled), 
.ebay-link-icon:hover:not(.disabled)
{
	transform:scale(1.1);
}

.flag-icon.flagged { color:red; }

@keyframes spin {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

.spinning {
	animation: spin 1000ms linear infinite;
}

.btn-clr { color:red; font-size:1.2rem; }
.btn-clr:hover { color:red; }
.btn-hidden { display:none; }

@media screen and (max-width:992px) {
	.vl  { display:none; }
	#avatarDropDown { margin:20px; margin-left:0; }
	/* Styling for message screen */
	.message-container {
		height:100%;
		margin:10px;
	}
	.thread-container.slideAway {
		transform:translateX(-100%);
		overflow:hidden;
	}
	.thread-container {
		transform:translateX(0%);
		display:block;
		position:absolute;
		z-index:10;
		background:white;
		transition:transform 0.47s ease;
	}
	.row {
	}
	.icons-order {
		justify-content:space-between;
	}
	.message-page-container.hidden { display:none; }
	.order-information.slideAwayRight {
		transform:translateX(100%);
		display:none;
	}
	.order-information {
		transform:translateX(0%);
		display:block;
		position:absolute;
		transition:transform 0.5s ease-in-out;
		z-index:10;
		overflow:hidden;		
		background:white;
		border:none !important;
	}
	.search-container { margin:0px; }
	.action-btn { margin-left:0px; }
	.iconlist { justify-content:space-between; display:flex; }
	.row { margin-left:0; }
	.message-container, .message-page-container { border: none; }
	.mobile-only { display:flex; }
	.inbox-icon, .close-icon, .info-icon, .search-icon, .web-icons { font-size:1.3rem; width:max-content; padding:3px; }
	.mobile-hidden { display:none; }
	.show-search-icon-active { color:rgb(255,50,50); }
	/*#message_form { flex-direction: column; }*/
}