<div id="panel-compose" class="panel w-100 position-fixed pos-bottom pos-right mb-0 z-index-cloud mr-lg-4 shadow-3 border-bottom-left-radius-0 border-bottom-right-radius-0 expand-full-height-on-mobile expand-full-width-on-mobile shadow" style="max-width:40rem; height:35rem; display: none;">

	<div class="position-relative h-100 w-100 d-flex flex-column">
		<!-- desktop view -->
		<div class="panel-hdr bg-fusion-600 height-4 d-none d-sm-none d-lg-flex">
			<h4 class="flex-1 fs-lg color-white mb-0 pl-3">
				New Message
			</h4>
			<div class="panel-toolbar pr-2">
				<a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl mr-1" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen" data-placement="bottom">
					<i class="fal fa-expand-alt"></i>
				</a>
				<a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl" data-action="toggle" data-class="d-flex" data-target="#panel-compose" data-toggle="tooltip" data-original-title="Save & Close" data-placement="bottom">
					<i class="fal fa-times"></i>
				</a>
			</div>
		</div>
		<!-- end desktop view -->
		<!-- mobile view -->
		<div class="d-flex d-lg-none align-items-center px-3 py-3 bg-faded  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">
			<!-- button for mobile -->
			<!-- end button for mobile -->
			<h3 class="subheader-title">
				New message
			</h3>
			<div class="ml-auto">
				<button type="button" class="btn btn-outline-danger" data-action="toggle" data-class="d-flex" data-target="#panel-compose">Cancel</button>
			</div>
		</div>

		<!-- end mobile view -->
		<div class="panel-container show rounded-0 flex-1 d-flex flex-column">

			{{> include/pages/inbox/_compose_layout}}

		</div>
	</div>

</div>