#midia{
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: 1050;
	content: " ";
	position: fixed;
	background-color: #ffffff;
	display: none;
}

.midia-item{
	margin: 12px 0;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	padding-top: 80%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	background-color: #f8f9ff;
}

.midia-list-item:before{
	content: " ";
	top: 50%;
	left: 50%;
	margin-top: 1rem;
	transform: translate(-50%, -50%);
	width: 92%;
	height: 81%;
	filter: blur(15px);
	position: absolute;
	background-color: #abbdd6;
	opacity: .2;
	border-radius: 3rem;
    transition: all .2s ease;
}

.midia-list-item:hover:before{
	margin-top: 2rem;
	width: 100%;
	height: 100%;
}	

.midia-item.lazyload:after{
	content: " ";
	width: 24px;
	height: 24px;
	top: 50%;
	left: 50%;
	position: absolute;
    background-repeat: no-repeat;
    background-image: url(../img/loading.gif);
    background-size: 24px;
    background-position: center;
    transform: translate(-50%, -50%);
}

.midia-item.active:after{
	top: 12px;
	right: 12px;
	padding: 6px;
	color: #fff;
	width: 28px;
	height: 28px;
	content: "\e92b";
	position: absolute;
	border-radius: 15px;
	background-color: #0ee07f;
	z-index: 1;
	font-family: Feather!important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.midia-item.active{
	box-shadow: 0px 19px 20px -10px #abbdd6de;
}

.midia-filtro.hidden,
.midia-filtro.hidden ~ .dropdown-menu{
	opacity: 0;
}

.btn-midia-edit{
	left: 5px;
	color: #000;
	top: 6px;
	*z-index: 99;
	display: none;
	font-size: 16px;
	padding: 3px 8px;
	position: absolute;
}

.midia-item.active .btn-midia-edit{
	display: block;
}

#midia .tab-content{
	width: 100%;
	display: block;
	position: relative;
	height: calc(100% - 56px);
}

#midia .tab-content .tab-pane{	
	top: 0px;
	bottom: 0px;
	width: 100%;
	display: block;
	position: absolute;
}

#midia .tab-content .tab-pane.active{
	z-index: 10;
}

#midia .tab-content #upload.tab-pane:after{
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	content: " ";
	z-index: -1;
	position: absolute;

    padding: 5rem 1rem;
    cursor: pointer;
    transition: all .2s ease;
    text-align: center;
    color: #95aac9;
    border: 1px dashed #bec8d5;
    border-radius: .375rem;
    background-color: #fff;
    order: -1;
}

#midia .tab-content:hover #upload.tab-pane:after{
	border-color: #95aac9;
}

#midia .midia-input{
	top: 50%;
	left: 50%;
	position: absolute;
	text-align: center;
	transform: translate(-50%, -50%);
}

#midia .midia-input h3{font-size: 30px;margin-bottom: 10px;}
#midia .midia-input h3 small{display: block;font-size: 0.6em;margin: 8px 0 16px;}

#midia .midia-data{
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
}

#midia-lista{
	width: 100%;
	overflow-y: auto;
	position: relative;
    padding: 12px 12px 7rem;
    max-height: calc(100vh - 57px);
}

#midia-lista .loader-primary{
	margin: 2rem auto;
}

.midia-feedback{
    z-index: 10;
    width: 100%;
    padding: 1rem;
    max-width: 500px;
    position: absolute;
}

.midia-feedback b{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.midia-feedback p{
	margin: 0;
	display: inline-block;
}

.midia-feedback .alert{
	margin: 1rem 0 0;
	max-width: 100%;
	border-radius: 4px;
	display: inline-block;
	padding: 0.6rem 3rem 0.6rem 1.5rem;
}

.midia-feedback .alert button.close{
	right: .8rem;
	top: .5rem;
	position: absolute;
}

.midia-feedback .alert button.close:hover{
	color: #fff;
	opacity: 0.2;
}

.midia-descricao{
	left: 0;
	right: 0;
	bottom: 0;
	color: #6e84a3;
	padding: 1rem;
	font-weight: 700;
	font-size: 0.8rem;
	position: absolute;	
	word-wrap: break-word;
}

.midia-descricao .badge-soft-primary {
    color: #223652;
}

.midia-item:before{
	top: 50%;
	right: -2rem;
	width: 150px;
	color: #edf1f9;
	text-align: right;
	font-size: 7.2em;
	position: absolute;
	transform: translate(0, -50%);
	font-family: Feather !important;
}

.midia-list-item.video .midia-item:before{content: "\e9b0";}
.midia-list-item.audio .midia-item:before{content: "\e976";}
.midia-list-item.documento .midia-item:before{content: "\e964";}

.midia-list-item.img .midia-descricao{
	display: none;
}

#loader-upload{
	display: none;
}

#progress{	
    margin: 1rem auto 0;
    width: 1.5rem;
}

.midia-list .midia-delete{
	top: 6px;
	color: #fff;
	width: 28px;
	right: 6px;
	height: 28px;
	z-index: 1;
	text-align: center;
	cursor: pointer;
	position: absolute;
	border-radius: .25rem;
	background: #d9534f;
	line-height: 26px;
}

.midia-list .midia-delete i.fe{
	margin: 0.5px -1px;
	display: inline-block;
}

.midia-list .midia-delete:hover{	
	background: #dc3545;
}

.midia-box .midia-list{
	cursor: all-scroll;
    overflow: hidden;
}

.midia-box.multiple .midia-list{
	display: inline-block;
	position: relative;
	padding-bottom: 20%;
	width: calc(33.33333333% - 4px);
}

.midia-box.multiple .midia-list:before{
	content: '';
	top: 0;
	left: .5rem;
	position: absolute;
	border-radius: 6px;
	object-fit: contain;
	background: #ecf2f9;
	width: calc(100% - 1rem);
	height: calc(100% - 1rem);
}

.midia-box.multiple .midia-list .midia-delete{
	top: 0;
	right: .6rem;
}

/*.midia-box.multiple .midia-list img,
.midia-box.multiple .midia-list audio,
.midia-box.multiple .midia-list video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    border-radius: 3px;
    display: inline-block;
    transform: translate(-50%, -50%);
}*/

.midia-box.multiple .midia-list img{
	top: 0;
	left: .5rem;
	position: absolute;
	border-radius: 6px;
	object-fit: contain;
	width: calc(100% - 1rem);
	height: calc(100% - 1rem);
}

.midia-box.multiple .midia-list .pdf{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.midia-box.single .midia-list .pdf{
	position: relative;
	width: 100%;
	padding-bottom: 50%;
}

.midia-box .midia-list .pdf:before{
	content: "\e964";
	top: 50%;
	right: -2rem;
	width: 150px;
	color: #f8f9ff;
	text-align: right;
	font-size: 7.2em;
	position: absolute;
	transform: translate(0, -50%);
	font-family: Feather !important;
}

.midia-box .midia-list .pdf-desc{
	position: absolute;
	content: " ";
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
	color: #6e84a3;
	font-weight: 700;
	text-align: left;
	font-size: 0.8rem;
	display: inline-block;
	word-wrap: break-word;
}

.midia-box .midia-list .pdf p{
	margin-bottom: 0.5rem;
}

.midia-box.single .midia-list{
	width: 100%;
	cursor: pointer;
	text-align: center;
	background: #edf2f9;
	border-radius: 6px;
	display: inline-block;
	position: relative;
}

.midia-box.single .midia-list img{
    margin: 1rem;
    height: 120px;
    max-width: 250px;
    border-radius: 3px;
    object-fit: contain;
    display: inline-block;
	width: calc(100% - 32px);
}

.midia-box.single.thumb .midia-list{
	margin: .35rem 0.35rem 0;
	width: calc(100% - .35rem);
}

.midia-box.single.thumb .midia-list img{
	margin: 0rem;
    height: 80px;
}

.midia-box.single .midia-list audio,
.midia-box.single .midia-list video{
	width: calc(100% - 32px);
	margin: 1rem;
	display: inline-block;
	max-width: 250px;
	border-radius: 3px;
}

.ui-sortable-placeholder.midia-list{
	margin: 0;
	padding: 0;
	position: relative;
	width: calc(33.33333333%);
	background: #ffffff !important;
	visibility: visible !important;
	padding-bottom: calc(20%);
}

.ui-sortable-placeholder.midia-list:before{
	content: '';
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 6px;
	width: calc(100%);
	height: calc(100%);
	background-color: #fff !important;
	border: 2px dashed #edf2f9 !important;
}

.midia-footer{
	left: 50%;
	bottom: 1.5rem;
	z-index: 10;
	position: fixed;
	transform: translate(-50%, 0);
}

.midia-header{
	z-index: 15;
	position: relative;
	box-shadow: inset 0px -1px 0 #eaecef;
}

.midia-header.disabled:after{
	content: " ";
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 10;
	position: absolute;
	background-color: #ffffffbf;
}

.midia-header .dropdown-toggle:after{
	content: "";
}

@media screen and (max-width: 768px){
	.midia-header .midia-filtro b{
		display: none
	}
}

.midia-close{
	top: 10px;
	right: 0;
	padding: 5px;
	cursor: pointer;
	position: absolute;
}

.midia-close:hover{
	opacity: 0.7;
}

.btn-select{
	border: 0;
	background-color: transparent;
}

.btn-select-area{
	border: 1px solid #d2ddec;
	border-radius: 3px !important;
}

#fileupload{
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 100;
	width: 100vw;
	position: absolute;
	height: calc(100vh - 56px); 
}

#edit-sidebar{
	z-index: -1;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	opacity: 0;
	background: #05172f99;
	transition: all 0.2s ease;
}

#edit-sidebar.open{
	opacity: 1;
	z-index: 99;
}

#edit-sidebar .edit-sidebar{
	top: 0;
	bottom: 0;
	width: calc(100% - 32px);
	right: -300px;
	z-index: 1000;
	max-width: 320px;
	background: #fff;
	overflow-y: scroll;
	position: absolute;
	transition: right 0.5s ease;
	box-shadow: -10px 0px 20px #0000000d;
}

#edit-sidebar.open .edit-sidebar{
	right: 0;
}

#midia-lista::-webkit-scrollbar { width: 2px; }
#midia-lista::-webkit-scrollbar-track { background: #f1f1f1; }
#midia-lista::-webkit-scrollbar-thumb { background: #888; }
#midia-lista::-webkit-scrollbar-thumb:hover { background: #555; }

.midia-edit{
	width: 100%;
	float: left;
	text-align: center;
	height: 24vh;
	position: relative;
	background-color: #edf2f9;
}

.midia-edit.video{background-color: #000000;}
.midia-edit.audio{height: auto;}
.midia-edit.documento{display: none;}

.midia-edit img{
	max-height: calc(100% - 2rem);
	max-width: calc(100% - 2rem);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	border-radius: 4px;
	/*box-shadow: 0px 19px 20px -10px #abbdd6de;*/
}

.midia-edit audio {
    width: calc(100% - 1rem);
    display: block;
    margin: 1rem auto;
}

.midia-edit video{
	width: 100%;
	height: 100%;
	display: block;
}

.midia-desc{
	width: 100%;
	float: left;
	padding: 1.5rem;
}

@media only screen and (max-width: 480px){
	#midia-lista{
		padding: 1px;
	}
	.midia-list-item{
		padding: 0;
	}
	.midia-item{
		margin: 0.5px;
		border-radius: 0;
	}
	.midia-desc .form-group{
		margin-bottom: 1rem;
	}
	.midia-desc .form-group label{
		margin-bottom: .2rem;
	}
}

audio::-webkit-media-controls-panel{
	background-color: #fff;
}