.panelOverlaySharedContentsUi{
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 50%;
	height: 100%;
	background-color: #fff;
	border-left: solid 1px #ddd;
	transition: all 0.5s ease-out;
	z-index: 9999;
}

.panelOverlaySharedContentsUiContents
{
	width: 100%;
	height: 100%;
	overflow: auto;
	overscroll-behavior-y: contain;
}


.panelOverlaySharedContentsUiSearchArea
{
	display: flex;
}
.panelOverlaySharedContentsUiSearchForm
{
	flex-basis:80%;
}
.panelOverlaySharedContentsUiSearchInput
{
	padding: 0.8em 1em !important;
	margin: 0 !important;
}
.panelOverlaySharedContentsUiTextInputArea
{
	font-size:16px !important;
}

#panelOverlaySharedContentsUi,
#panelOverlaySharedContentsUiFromCategory,
#panelOverlaySharedContentsUiFromBookmark,
#panelOverlaySharedContentsUiFromHistory{
	left: -100%;
}

#panelOverlaySharedContentsUiSelectedContents{
	right: -100%;
}

#panelOverlaySharedContentsUi.panelOverlaySharedContentsUi-open,
#panelOverlaySharedContentsUiFromCategory.panelOverlaySharedContentsUi-open,
#panelOverlaySharedContentsUiFromBookmark.panelOverlaySharedContentsUi-open,
#panelOverlaySharedContentsUiFromHistory.panelOverlaySharedContentsUi-open{
	left: 0 !important;
}

#panelOverlaySharedContentsUiSelectedContents.panelOverlaySharedContentsUi-open{
	right: 0 !important;
}

.panelOverlaySharedContentsUiTitle{
	width: 100%;
	justify-content: center;
	align-items: center;
	background: var(--main-color-1);
	text-align: center;
}

.panelOverlaySharedContentsUiButtons{
	width: 20%;
	float: right;
}

.panelOverlaySharedContentsUiChangeModalButtonContainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* gap: 8px; */
    width: 100%;
    box-sizing: border-box;
}

.panelOverlaySharedContentsUiChangeModalButtonContainer .panelOverlaySharedContentsUiChangeModalButton {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .panelOverlaySharedContentsUiChangeModalButtonContainer {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 520px) {
    .panelOverlaySharedContentsUiChangeModalButtonContainer {
        grid-template-columns: repeat(2, 1fr);
    }
}


#panelOverlaySharedContentsUiFromCategoryDropDownMenuArea,
#panelOverlaySharedContentsUiFromBookmarkDropDownMenuArea,
#panelOverlaySharedContentsUiFromHistoryDropDownMenuArea
{
	display: flex;
	align-items: center;
	justify-content: center;
}

#panelOverlaySharedContentsUiFromCategorySelectId,
#panelOverlaySharedContentsUiFromBookmarkSelectId
{
	margin: 0;
}