/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.modal.drawer-left .modal-dialog, .modal.drawer-right .modal-dialog {
	position: fixed;
	margin: auto;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
		-ms-transform: translate3d(0%, 0, 0);
			-o-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
}

.modal.drawer-left .modal-content, .modal.drawer-right .modal-content {
	height: 100%;
	overflow-y: auto;
	min-height:100vh;
	border-radius: 0;
}

.modal.drawer-left .modal-body, .modal.drawer-right .modal-body {
	padding: 15px 15px 80px;
}

/*Left*/

.modal.drawer-left.fade .modal-dialog {
	left: -30em;
	width: 30em;
	max-width: 30em;
/* -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		-o-transition: opacity 0.3s linear, left 0.3s ease-out;
		transition: opacity 0.3s linear, left 0.3s ease-out; */
}

.modal.drawer-left.fade.show .modal-dialog {
	left: 0;
}


/*Right*/

.modal.drawer-right.fade .modal-dialog {
	right: -30em;
	width: 30em;
	max-width: 30em;
/* -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		-o-transition: opacity 0.3s linear, right 0.3s ease-out;
		transition: opacity 0.3s linear, right 0.3s ease-out; */
}

.modal.drawer-right.fade.show .modal-dialog {
	right: 0;
}

@media (max-width:480px){
	.modal.drawer-left.fade .modal-dialog {
		left: -100%;
		width: 100%;
		max-width: 100%;
	}
	.modal.drawer-left.fade.show .modal-dialog {
		left: 0;
	}
	.modal.drawer-right.fade .modal-dialog {
		right: -100%;
		width: 100%;
		max-width: 100%;
	}
	.modal.drawer-right.fade.show .modal-dialog {
		right: 0;
	}
}

@media (min-width:576px){
	.modal.drawer-left.drawer-left-lg.fade .modal-dialog,
	.modal.drawer-left.drawer-left-xl.fade .modal-dialog {
		left: -100%;
		width: 100%;
		max-width: 100%;
	}
	.modal.drawer-left.drawer-left-lg.fade.show .modal-dialog,
	.modal.drawer-left.drawer-left-xl.fade.show .modal-dialog {
		left: 0;
	}
	.modal.drawer-right.drawer-right-lg.fade .modal-dialog,
	.modal.drawer-right.drawer-right-xl.fade .modal-dialog {
		right: -100%;
		width: 100%;
		max-width: 100%;
	}
	.modal.drawer-right.drawer-right-lg.fade.show .modal-dialog,
	.modal.drawer-right.drawer-right-xl.fade.show .modal-dialog {
		right: 0;
	}
}


@media (min-width:992px){
	.modal.drawer-left.drawer-left-lg.fade .modal-dialog {
		left: -62em;
		width: 62em;
		max-width: 62em;
	}
	.modal.drawer-left.drawer-left-lg.fade.show .modal-dialog {
		left: 0;
	}
	.modal.drawer-right.drawer-right-lg.fade .modal-dialog {
		right: -62em;
		width: 62em;
		max-width: 62em;
	}
	.modal.drawer-right.drawer-right-lg.fade.show .modal-dialog {
		right: 0;
	}
}

@media (min-width:1200px){
	.modal.drawer-left.drawer-left-xl.fade .modal-dialog {
		left: -85em;
		width: 85em;
		max-width: 85em;
	}
	.modal.drawer-left.drawer-left-xl.fade.show .modal-dialog {
		left: 0;
	}
	.modal.drawer-right.drawer-right-xl.fade .modal-dialog {
		right: -85em;
		width: 85em;
		max-width: 85em;
	}
	.modal.drawer-right.drawer-right-xl.fade.show .modal-dialog {
		right: 0;
	}
}

.modal.drawer-right .modal-header {
	padding: 0.5rem 1.05rem;
}

.modal.drawer-right .modal-header .modal-title {
	font-weight: bold;
}

.form-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;
}
.form-overlay.show {
	width: 100%;
	height: 100vmin;
	z-index: 3;
	background-color: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-overlay h3 {
	background-color: white;
	font-weight: 700;
	font-size: 16px;
	padding: 20px;
}

.view-file{
	cursor: pointer;
	font-weight: 600;
}