/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(255, 255, 255, .8) 
                url('/images/loading.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.loading-animation-container {
	width: 100%;
	height: 100px;
	position: absolute;
}

.loading-animation {
	width: 20px;
	margin-left: 10px;
}

.modal-backdrop.show {
	z-index: 99;
}

.logo {
	width: 200px;
}

#notifications-container, #messages-container {
	height: 300px;
	overflow-y: scroll;
	margin-top: 5px;
	border-top: 1px solid #d8d8d8;
}

#notifications-container a, #messages-container a {
    margin-top: 1px;
    border-bottom: 1px solid #d8d8d8;
    min-width: 325px;
    white-space: pre-line;
    cursor: pointer;
}

.mark-all-as-read {
	margin-left: 22px;
}

.mark-as-read {
	margin-left: 10px;
}

.new-notification, .new-message {
	background-color: #dfdfdf;
}

.hidden {
	display: none;
}

.title {
	font-weight: 600;
}

.file-button, .files-list, .account-panel {
	margin-bottom: 20px;
}

.product-name {
	max-width: 15rem;
}

.product-column {
	border: 1px solid #dfdfdf;
	border-radius: 3px;
	padding: 15px;
	margin: 10px;`
}

.order-preview-row {
	background-color: #e2dfdf;
	padding: 10px 2px !important;
	border-radius: 2px;
}

.order-updated {
	background-color: rgb(0 0 0 / 15%) !important;
}

.vat-value-column {
	width: 90px;
}

.download-order-invoice-btn, .create-user-btn, .align-right {
	text-align: right;
}

.invoice-data {
	font-weight: 900;
}

.product-created-date, .order-created-date {
	min-width: 115px;
}

.product-orders-container {
	max-height: 300px;
	overflow-y: scroll;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
}

.product-stock-status-column, .found-in-feed-column {
	min-width: 105px;
}

.found-in-feed-column {
	min-width: 140px;
}

.product-preview, .order-preview {
	padding: 10px 0px !important;
}

.product-quantity {
	margin: 0px 5px;
}

.no-items-table-message {
	text-align: center;
}

select.order-status {
	min-width: 135px;
}

.product-row-buttons {
	min-width: 180px;
}

.order-row-buttons, .product-row-buttons, .invoice-row-buttons {
	min-width: 170px;
}

.invoice-row-buttons {
	min-width: 180px;
}

.awb-download-btn {
	min-width: 70px;
}

.awb-upload-date {
	padding-top: 10px;
	text-align: center;
	display: block;
	border: none;
}

.product-option {
	margin-bottom: 10px;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	padding: 5px;
}

.products-options {
	margin-bottom: 10px;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	padding: 10px;
}

input {
	outline: none;
}

.select2-container--default .select2-selection--single {
	border: 1px solid #ced4da !important;
}

.button-right {
	margin:10px;
	text-align: right;
}

.order-status {
	margin-bottom: 15px;
}

.order-notes {
	margin: 20px 0px;
    padding: 0px 20px;
    height: 300px;
    overflow-y: scroll;
    border-radius: 5px;
}

.no-messages {
	position: absolute;
    bottom: 100px;
    left: 20px;
}

.order-note {
	margin-bottom: 10px;
	padding: 10px;
}

.note-username {
	font-weight: 900;
}

.note-left {
	text-align: left;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
}

.note-right {
	text-align: right;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	background-color: #3490dc;
	color: #FFFFFF;
}

input {
	color: -internal-light-dark(white, white);
}

footer {
	width: 100%;
	height: 100px;
	text-align: center;
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px solid #d8d8d8;
}

footer p {
	display: block;
}

.email-container {
	margin: 10px;
}