#dynamic-mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 1190;
	opacity: 0;
	visibility: hidden;
	transition: .4s;
}

#dynamic-mask.active{
	opacity: 1;
	visibility: visible;
}
.dynamic-sides{
	position: fixed;
	height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1200;
    transition: .4s;
    width: 100%;
}


#dynamicMenu{
	top: 0;
	left: -100%;
}
#dynamicMenu.active{
	left: 0;
}

#dynamicSearch{
	top: 0;
	right: -100%;
	left: auto;
	bottom: auto;
	height: 100%;
}
#dynamicSearch.active{
	right: 0;
}

.dynamic-side-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #ccc;
}

.dynamic-side-body{
	height: calc(100% - 70px - 60px);
	overflow: auto;
	padding: 1rem;
}

.dynamic-side-title{
	width: 90px;
}

.dynamic-side-title img{
	width: 100%;
}

.js-dynamic-close{
	display: flex;
	align-items: center;
	column-gap: .5rem;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.js-dynamic-close img{
	width:  16px;
	height: 16px;
	object-fit: contain;
	transition: .4s;
}

.js-dynamic-close:hover img{
	transform: rotate(180deg);
}


/* Dynamic body */
.box-side{
	/*margin-top: 3rem;*/
}

.box-side-title{
	font-weight: 600;
}

@media (max-width: 920px){
	.dynamic-sides{
		width: 50%;
	}
}
@media (max-width: 579px){
	.dynamic-sides{
		width: 100%;
	}
}