/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the
 * later versions of this theme.
 *
 * We advise that you use use this CSS to override
 * SmartAdmin styles.
 *
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */


body {
	font-family: 'Open Sans';
}
#skipped-tags {
	color:  #F30;
}
#header {
	background-color: #101010 !important;
}
.smart-style-1 #logo-group{
	background: #101010 !important
}
span#logo img {
	max-height: 38px;
	width: auto !important;
}
.model-preview-thumb {
	max-width: 50px;
	display: inline-block;
	margin: 2px;
}

.thumbnail-link {
	display: inline-block;
	margin: 2px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}

.word-break {
	word-break: break-all;
}

.table .checkbox .checkbox {
	display: none;
}

.mobile-view-activated thead .checkbox span {
	overflow: hidden;
	width: 27px;
	height: 17px;
}

.table tbody td .btn {
	margin-bottom: 3px;
}

.table tbody td {
	max-width: 500px;
    word-break: break-all;
}

.table tfoot .btn {
	margin-bottom: 5px;
}

.mobile-view-activated .table .responsiveExpander {
	line-height: 35px;
}
.site-dropdown {
	width: 110px !important;
}
.description-textarea {
	width: 100% !important;
	margin: 5px auto;
}

/**
 * Thumbnail selector
 */

.thumbnail-selector {
	margin: 0 -5px;
}

.thumbnail-selector .thumb-select {
	float: left;
	margin: 0 5px 3px;
	width: 150px;
	cursor: pointer;
	border: 5px solid transparent;
}

.thumbnail-selector img {
	width: 100%;
	height: auto;
}

.thumbnail-selector .selected-thumb {
	border: 5px solid #518a29;
}

.on-delete-mode .selected-thumb {
	border-color: #FB3C4A;
}

.on-delete-mode .no-delete {
	opacity: 0.5;
}

.delete-mode-wrap {
	margin-top: 8px;
	text-align: right;
}

.delete-mode-wrap span {
	display: none;
	cursor: pointer;
}

.on-delete-mode button.delete-mode {
	display: none;
}

.on-delete-mode span.delete-mode {
	display: block;
}

.watermark-preview,
#watermarkModal .col-sm-2 > a {
	margin-bottom: 15px;
	width: 250px;
	height: auto;
	text-align: center;
	background-image: linear-gradient(45deg, #ABABAB 25%, transparent 25%, transparent), linear-gradient(-45deg, #ABABAB 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #ABABAB 75%), linear-gradient(-45deg, transparent 75%, #ABABAB 75%);
	background-size: 15px 15px;
}

#watermarkModal .col-sm-2 > a {
	display: block;
	width: 100%;
	margin-bottom: 0;
}

.table .watermark-preview {
	width: 100%;
}

#watermarkModal a > img,
.watermark-preview img {
	display: inline-block;
	margin: 15px;
	width: 70%;
	height: auto;
}

#watermarkModal a > img {
	margin: 15px 0;
	width: 85%;
}

/* Ace Editor */
#editor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 600px;
	width:100%;
}
.editor-container {
	width: 100%;
	height: 600px;
	margin-bottom: 10px;
}
#news_editor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 300px;
	width:100%;
}
.news-editor-container {
	width: 100%;
	height: 300px;
	margin-bottom: 10px;
}
#loop_editor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 300px;
	width:100%;
}
.loop-editor-container {
	width: 100%;
	height: 300px;
	margin-bottom: 10px;
}
#select-page {
	max-width: 200px;
	width: 100%;
}
#page-list {
	max-height: 600px;
	overflow-y: auto;
}
#save-file {
	display: inline-block;
}
.tree.smart-form {
    overflow-y: auto;
    height: 600px;
}
.choose-screenshot {
	cursor: pointer;
}
.selected-screenshot {
	outline: solid red 2px;
    outline-offset: -2px;
}
.jw-time-tip.jw-reset { max-width: 180px; max-height: 125px; background-size: 150px 100px; }
.jw-time-tip > .jw-reset { max-width: 150px; max-height: 100px; background-size: 150px 100px; }

.bootstrap-tagsinput.wtahead {
	position: relative;
	padding : 0 3px;
	height : auto;
	min-height: inherit;
}
.bootstrap-tagsinput.wtahead.focus {
	border: 1px solid #5D98CC;
}
.bootstrap-tagsinput.wtahead .twitter-typeahead {
	padding: 0;
	font-size: 13px;
	line-height: 1.428571429;
	vertical-align: middle;
	background: none;
	border: none;
}
.bootstrap-tagsinput.wtahead .tt-menu {
    min-width: 320px;
	background: #fff;
	border: 1px solid #5D98CC;
	border-top: none;
	border-bottom-width: 3px;
	box-shadow: 0 4px 5px rgba(0,0,0,.15);
}
.bootstrap-tagsinput.wtahead .tt-hint,
.bootstrap-tagsinput.wtahead .tt-input {
	margin-bottom: 0;
	height : auto;
	padding: 4px 6px;
}
.bootstrap-tagsinput.wtahead .tt-suggestion {
	padding: 4px 6px;
}
.bootstrap-tagsinput.wtahead .tt-hint {
	display: none;
}
.bootstrap-tagsinput.wtahead .tt-suggestion:hover,
.bootstrap-tagsinput.wtahead .tt-cursor {
	background: #3276B1;
	color: #fff;
}
.wtahead .loader {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	overflow: hidden;
	margin: 0;
	font-size: 1.5px;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(0, 0, 0, 0.2);
	border-right: 1.1em solid rgba(0, 0, 0, 0.2);
	border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
	border-left: 1.1em solid #333;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
.wtahead.loading .loader {
	display: block;
}
.wtahead .loader,
.wtahead .loader:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.select2-container--open .select2-dropdown--below {
	top: 50px;
}

.thumbnail-set .view-thumb,
.thumbnail-set2 .view-thumb {
	display: block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    width : 10px;
    height : 10px;
    line-height: 10px;
    color: #999;
	text-align: center;
	cursor: pointer;
}
.thumbnail-set .view-thumb .fa,
.thumbnail-set2 .view-thumb .fa {
	width : 10px;
	height : 10px;
	line-height: 10px;
	vertical-align: top;
}

.thumbnail-set .thumb-item,
.thumbnail-set2 .thumb-item {
	position            : relative;
	float               : left;
	margin              : 5px;
	width               : 100px;
	height              : 100px;
	background-size     : cover;
	background-position : 50% 0;
	cursor              : move;
}
.thumbnail-set .thumb-item img,
.thumbnail-set2 .thumb-item img {
	display: none;
}
.thumbnail-set .sortable-placeholder,
.thumbnail-set2 .sortable-placeholder {
	position : relative;
	float    : left;
	margin   : 5px;
	width    : 100px;
	height   : 100px;
	border   : 3px dashed #eee;
}
.thumbnail-set .delete,
.thumbnail-set2 .delete {
	display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width : 20px;
    height : 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #c33741;
    color: #fff;
	text-align: center;
	cursor: pointer;
}
.thumbnail-set .delete .fa,
.thumbnail-set2 .delete .fa {
	width : 20px;
	height : 20px;
	line-height: 20px;
	vertical-align: top;
}
.thumbnail-set .add-thumb,
.thumbnail-set2 .add-thumb {
	position: relative;
	float: left;
	margin: 5px;
	width : 100px;
	height : 100px;
	background: #eee;
	cursor: pointer;
}
.thumbnail-set .add-thumb .fa,
.thumbnail-set2 .add-thumb .fa {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 40px;
	opacity: 0.2;
	-webkit-transform : translate(-50%, -50%);
	-moz-transform    : translate(-50%, -50%);
	-ms-transform     : translate(-50%, -50%);
	-o-transform      : translate(-50%, -50%);
	transform         : translate(-50%, -50%);
}
.modal-thumbsnails .thumb-item {
	margin-bottom      : 30px;
	border             : 5px solid #eee;
	-webkit-transition : border 0.5s;
	-moz-transition    : border 0.5s;
	-ms-transition     : border 0.5s;
	-o-transition      : border 0.5s;
	transition         : border 0.5s;

	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
	text-align: justify;
	white-space: normal !important;
}
.modal-thumbsnails .thumb-item:hover {
	border: 5px solid #9cb4c5;
	cursor: pointer;
}
.modal-thumbsnails .thumb-item img {
	width : 100%;
	height : auto;
}
.modal-thumbsnails .alert-info {
	background: #f9f9f9;
}
.break-word {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
	text-align: justify;
	white-space: normal !important;
}

.bg-thumb-photo {
	display: inline-block;
	position: relative;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	width: 150px;
	height: 150px;
	max-width: 100%;
	padding: 2px;
	border: 2px solid #ccc;
	border-radius: 3px;
	margin: 8px;
}

.bg-thumb-photo.bg-thumb-responsive {
	width: 100%;
}

.bg-thumb-viewable {
	cursor: pointer;
}

.bg-thumb-photo .view-img {
	width: 100%;
	height: 100%;
}

.bg-thumb-photo .btn-remove {
	position: absolute;
	top: 0;
	right: 0;
}

.bg-thumb-photo .btn-remove:active {
	left: auto;
}

.custom-loader {

    border: 15px solid #f3f3f3;
    animation: spin 1s linear infinite;
    border-top: 15px solid #555;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

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

#ui-datepicker-div{
	z-index: 999999 !important;
}


#content-list li{
    font-size: 1.2em;
	padding-top: 0.4em;
    text-transform: capitalize;
}

#content-list li span{
	padding-right: .5em;
}

.grid-sizer,
.grid-item { 
  width: 15%;
  margin-bottom: 10px;
}

.grid-item { 
	border: 2px solid rgb(218, 215, 215);
	padding: 5px;
	background-color: white;
}

.gutter-sizer { width: 2%; }

.asset-buttons {
	padding-top: 4px;
}

@media only screen and (max-width: 767px){
	.grid-sizer,
	.grid-item { 
	  width: 40%;
	  margin-bottom: 10px;
	}
}

@media only screen and (max-width: 500px){
	.grid-sizer,
	.grid-item { 
	  width: 90%;
	  margin-bottom: 10px;
	}
}

.dz-button {
	border:  none;
	background: none;
}

.dropzone .dz-default.dz-message {
	width: auto;
	height: auto;
	margin-left:  auto;
	margin-right:  auto;
}

body.smart-style-6 #logo img {
	display: block;
}
body.smart-style-6 #logo-group>span#logo:before {
	content:  none;
}
.thumbs_advanced {
	display: none;
}

div.modal-body div.row div.col-sm-2 a.thumbnail-link:hover i.fa-crop {
	display: block !important;
	color: rgb(251, 255, 0);
	box-shadow: 0px 0px 10px rgba(5, 5, 5, 0.5);
}

.modal-body .thumbnail-link:hover .fa-crop {
	display: block !important;
	color: rgb(251, 255, 0);
	box-shadow: 0px 0px 10px rgba(5, 5, 5, 0.5);
}

.modal-body-scroll {
	max-height: calc(100vh - 210px);
	overflow-y: auto;
}

.full-page-modal .modal-dialog {
	max-width: 800px;
	max-height: 100%;
	margin: auto;
	position: relative;
}

.full-page-modal .modal-content {
	max-height: 100%;
}

/* Grid card view style */
.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.loading-spinner {
	font-size: 24px;
	color: #333;
}

.grid_view {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
}

#model_grid_item {
	width: 15%;
	border: 1px solid #ccc;
	margin: 5px;
	border-radius: 8px;
	align-items: center;
}

.grid_item {
	width: 24%;
	border: 1px solid #ccc;
	margin: 5px;
	border-radius: 8px;
	align-items: center;
}
/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
	#model_grid_item,
	.grid_item {
        width: 95%; /* Set grid_item width to 95% on mobile devices */
    }
}

@media only screen and (max-width: 500px) {
	#model_grid_item,
	.grid-item {
		width: 90%;
	}
}

.grid_item img {
	width: 100%;
	height: auto;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

#grid_search {
	width: 260px;
}

#grid_clearSearch {
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;
	height: 16px;
	margin: auto;
	font-size: 16px;
	cursor: pointer;
	color: #ccc;
	z-index: 10;
}

#grid_clearSearch:hover {
	cursor: pointer;
	color: #555;
}

#grid_item {
	border: 2px solid #ccc;
	padding: 5px;
	margin-bottom: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Pagination Controls */
.pagination-container {
	display: flex;
	justify-content: space-between;
}

.grid-pagination {
	display: flex;
	list-style: none;
	padding: 0;
}

.grid-pagination .page-link {
	padding: 5px 10px;
	margin: 0 .5px;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #333;
}

.grid-pagination .page-link:hover {
	background-color: #36AECC;
	color: white;
}

.grid-pagination .page-item.active .page-link {
	background-color: #36AECC;
	color: white;
}

.dropdown-menu {
	position: absolute;
	display: none;
	margin: 2px 0 0;
	margin-left: 5px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-item input[type="radio"] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.dropdown-item {
	position: relative;
	padding-right: 50px;
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-left: 5px;
}

.dropdown-item i {
	margin-right: 10px;
	margin-left: 5px;
}

.dropdown-item button {
	color:black;
	font-size: 14px;
	font-weight: bold;
}

.dropdown-item:hover {
	background-color: #f1f1f1;
	cursor: pointer;
	border-radius: 5px;
	text-decoration: none;
}

.title-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
}

/* General styling for icons */
.grid_item .fa-eye,
.grid_item .fa-comments,
.grid_item .fa-clipboard,
.grid_item .fa-pencil {
	font-size: 20px;
	/* Default size for larger screens */
}

/* Overlay styling */
.grid_item .overlay {
	position: absolute;
	top: 5px;
	left: 5px;
	text-align: center;
	color: white;
	padding: 2px;
}

/* For small screen devices, like tablets and below */
@media (max-width: 768px) {

	.grid_item .fa-eye,
	.grid_item .fa-comments,
	.grid_item .fa-clipboard,
	.grid_item .fa-pencil {
		font-size: 16px;
		/* Adjusted size for small screens */
	}

	/* Adjust overlay icon positions for small screens */
	.grid_item .overlay {
		top: 3px;
		left: 3px;
		padding: 1px;
	}

	/* Reduce padding and adjust layout */
	.grid_item .btn-group {
		bottom: 10px;
		right: 5px;
	}

	/* Adjust text size inside .title-ellipsis for smaller screens */
	.grid_item .title-ellipsis {
		font-size: 14px;
		/* Adjusted font size for smaller screens */
	}
}

/* For very small devices, like phones in portrait mode */
@media (max-width: 480px) {

	.grid_item .fa-eye,
	.grid_item .fa-comments,
	.grid_item .fa-clipboard,
	.grid_item .fa-pencil {
		font-size: 14px;
		/* Smaller size for phones */
	}

	.grid_item .overlay {
		top: 2px;
		left: 2px;
		padding: 1px;
	}

	.grid_item .title-ellipsis {
		font-size: 12px;
		/* Further reduce font size */
	}

	/* Reduce the size of buttons and icons */
	.grid_item .btn-group {
		bottom: 5px;
		right: 5px;
	}
}

.dropdown-menu#notifications {
	width: 400px; /* Set a maximum width for the dropdown menu */
	word-wrap: break-word; /* Ensure long words break to the next line */
	overflow-wrap: break-word; /* Ensure long words break to the next line */
	white-space: normal; /* Ensure content wraps to the next line */
}

.dropdown-menu#notifications li a h6 {
    font-size: 14px; /* Adjust the font size for the news title */
    margin: 0; /* Remove any default margin */
    word-wrap: break-word; /* Ensure long words break to the next line */
    overflow-wrap: break-word; /* Ensure long words break to the next line */
    white-space: normal; /* Ensure content wraps to the next line */
}

.dropdown-menu#notifications li a p.news-content {
	font-size: 12px; /* Adjust the font size for the news content */
	margin: 0; /* Remove any default margin */
	word-wrap: break-word; /* Ensure long words break to the next line */
	overflow-wrap: break-word; /* Ensure long words break to the next line */
	white-space: normal; /* Ensure content wraps to the next line */
}

.dropdown-menu#notifications li a small.news-date {
	font-size: 10px; /* Adjust the font size for the news date */
	color: lightgray; /* Set the color for the news date */
}

#news-count {
	display: none; /* Hide badge by default */
}

@media only screen and (max-width: 767px) {
    #logo-group {
        max-width: 60px;
    }
	.dropdown-menu#notifications {
        width: 300px;
    }
}

/* 2257 zoom in and out css */
/* Style for zoom buttons as overlay */
.zoom-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	/* Ensure the icons are above the image */
}

.zoom-btn {
	background-color: rgba(255, 255, 255, 0.7);
	/* Semi-transparent background */
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
}

.zoom-btn:hover {
	background-color: rgba(255, 255, 255, 1);
}

/* Specific styles for zoom-in and zoom-out buttons */
.zoom-in {
	top: 10px;
	right: 50px;
	/* Place the zoom-in button to the right */
}

.zoom-out {
	top: 10px;
	right: 10px;
	/* Place the zoom-out button closer to the right edge */
}

/* Added style for no data message */
.no-data-message {
	text-align: center;
	color: #999;
	padding: 20px 10px;
	font-style: italic;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	margin-top: 10px;
}

/* Chat */
#mrx-chat {
	display: none;
}

.chat_window {
	-webkit-transform: translate3d(0, 0, 200px);
	transform: translate3d(0, 0, 200px);
}

.chat_window {
	position: fixed;
	bottom: 5px;
	right: 5px;
	width: calc(100% - 20px);
	max-width: 300px;
	min-height: 60px;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	background-color: #1e1e1e;
	overflow: hidden;
	z-index: 999;

	.top_menu {
		background-color: #e9001f;
		width: 100%;
		padding: 15px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
		box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);

		.buttons {
			.button {
				display: inline-block;
			}

			.button.close {
				opacity: 1;

				svg {
					fill: #fff;
					width: 21px;
				}
			}

			.button.minimize {
				background-color: #FFBD44;
				cursor: pointer;
			}

			.button.maximize {
				background-color: #00CA4E;
				cursor: pointer;
			}

			#back-button {
				display: none;
			}
		}

		.title {
			text-align: right;
			color: #212529;
			font-size: 18px;
			min-height: 18px;

			a {
				color: #ffffff;
				text-decoration: none !important;
				font-weight: bold;
			}
		}

		.back {
			cursor: pointer;

			svg {
				fill: #fff;
				width: 26px;
				height: 26px;
			}
		}
	}

	#message-threads {
		padding: 0px;
		max-height: 300px;
		overflow-y: auto;

		.thread-wrap {
			border-bottom: 1px solid #111;
			padding: 15px;
			cursor: pointer;

			&:hover {
				background: #111;
			}

			.thread-username {
				font-weight: bold;
				color: #FFF;
			}

			.new {
				color: #0695FF;
			}

			.thread-preview {
				color: #ebebeb;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.date {
				display: inline-block;
				font-size: 10px;
				color: #999;
			}
		}

		.lds-dual-ring {
			display: inline-block;
			width: 80px;
			height: 80px;
			margin-top: 10px;

			&:after {
				content: " ";
				display: block;
				width: 64px;
				height: 64px;
				margin: 8px;
				border-radius: 50%;
				border: 6px solid #fff;
				border-color: #ff81c7 transparent #ff81c7 transparent;
				animation: lds-dual-ring .8s linear infinite;
			}
		}
	}

	#personal-messages {
		display: none;

		.bottom_wrapper {
			#message-form {
				#message {
					border: none;
				}

				.input-group-btn {
					.btn {
						padding: 6px 7px;
						border-color: #fff;
					}

					#send {
						color: #e9001f;
						padding-right: 10px;
						background-color: #fff;
					}
				}

				#emoji-picker {
					display: none;
					z-index: 999;
					position: absolute;
					width: auto;
					height: 300px;
					bottom: 33px;
					left: -163px;
					box-shadow: 1px -1px 7px 0px rgba(31, 26, 26, 0.4);

					emoji-picker {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.messages {
			position: relative;
			list-style: none;
			padding: 20px 10px 0 10px;
			margin: 0;
			height: 300px;
			max-height: 300px;
			overflow-y: auto;
			overflow-x: hidden;

			.message {
				clear: both;
				overflow: hidden;
				margin-bottom: 5px;
				transition: all 0.5s linear;
				opacity: 0;

				.text_wrapper {
					display: inline-block;
					padding: 8px;
					border-radius: 6px;
					width: auto;
					max-width: 200px;
					position: relative;

					&::after {
						top: 18px;
						border: solid transparent;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						border-width: 13px;
						margin-top: 0px;
					}

					&:before {
						top: 18px;
						border: solid transparent;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
					}

					&::before {
						border-width: 15px;
						margin-top: -2px;
					}

					.text {
						font-size: 14px;
						font-weight: 300;

						a {
							color: #e9001f;
							text-decoration: underline;
						}
					}
				}

				.username {
					display: inline-block;
					font-size: 12px;
					color: #e9001f;
					font-weight: bolder;
				}

				.date {
					display: inline-block;
					font-size: 10px;
					color: #bdbdbd;
				}

				.bottom-meta-wrapper {
					text-align: right;
				}
			}

			.message.left {
				.text_wrapper {
					background-color: #424242;
				}

				.text {
					color: #ffffff;
				}
			}

			.message.right {
				.text_wrapper {
					background-color: #d32f2f;
					float: right;
				}

				.text {
					color: #ffffff;
				}

				.username {
					display: none;
				}
			}

			.message.appeared {
				opacity: 1;
			}
		}
	}
}

@keyframes fadeInSlide {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.minimize-chat-window-wrapper {
	.text {
		display: none;
		position: fixed;
		right: 65px;
		bottom: 28px;
		text-align: center;
		color: #e2d1b4;
		background: #e9001f;
		padding: 6px 5px 5px 0px;
		width: 120px;
		border-radius: 20px 0 0 20px;
		font-family: Raleway, Arial, Helvetica, sans-serif;
		font-weight: 100;
		z-index: 998;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.3s ease;

		span {
			display: block;
		}
	}

	.expand-chat-window {
		display: block;
		position: fixed;
		right: 15px;
		bottom: 60px;
		z-index: 999;
		overflow: hidden;
		background: #e9001f;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		padding: 10px;
		cursor: pointer;

		svg {
			width: 100%;
			fill: #fff;
		}

		&:hover ~ .text {
			display: block;
			opacity: 1;
			pointer-events: auto;
			animation: fadeInSlide 0.3s ease forwards;
			bottom: 70px;
			color: #fff;

			span {
				animation: shake 0.7s cubic-bezier(.36, .07, .19, .97) both;
				transform: translate3d(0, 0, 0);
				backface-visibility: hidden;
				perspective: 1000px;
			}
		}

		&:hover svg {
			animation: infinite-spinning 0.4s;
		}
	}
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes infinite-spinning {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

ul#messages {
	background-color: #333;
}