body {
	--widget-bg-color: #FFF;
	--widget-sec-bg-color: #F9F9F9;
	--widget-list-border: #EEE;
	--widget-overlay-bg-color: rgba(206,214,222, 0.6);
	--byte-ui-modal-full-overlay-bg: white;

}
body.theme_dark {
	--byte-ui-modal-full-overlay-bg: darkslategray;
	--widget-bg-color: #000;
	--widget-sec-bg-color: #212121;
	--widget-list-border: #333;
	--widget-label-color: #2F2F2F;
	--widget-overlay-bg-color: rgba(0,0,0, 0.6);

}
/*-------------------------------------------------------------------
Things for byteUIModal() to work
--------------------------------------------------------------------*/
#byte-ui-modal-exclusivity{
	/* z-index:4998; */
	z-index:90001;
	position: fixed;
	top: 0px;
	left: 0%;
	width: 100vw;
	height: 100vh;
	background-color: var(--byte-ui-modal-full-overlay-bg);
	opacity: .5;
	pointer-events: unset;
	/* TODO: maybe we should just set this on the main-cms-content-container? */
	/* perspective: 1000px; */
}
#byte-ui-modal {
	z-index:4999;
	z-index:90001;
	position: fixed;
	top: 3px;
	left: 50%;
	width: 50%;
	/* height: 100px; */
	margin-left:-25%;
	perspective: 1000px;
}
#byte-ui-modal .notification_area.new-class {
	transform: rotateX(0deg);
}
#byte-ui-modal .notification_area {
	display: flex;
	position: relative;
	padding: 5px 13px;
	gap: 10px;
	align-items: center;
	text-shadow: white 0 1px 0;
	text-shadow: var(--widget-bg-color) 0 1px 0;
	text-decoration: none;
	width: 100%;
	overflow: hidden;
	margin: 0 auto 4px auto;
	border-radius: 50px;
	/* padding: 5px 5px; */
	/* background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); Chrome10+,Safari5.1+ */
	/* background: linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); W3C */
	
	background: linear-gradient(top, var(--widget-bg-color) 0%, var(--widget-sec-bg-color) 100%); /* W3C */
	background: -webkit-linear-gradient(top, var(--widget-bg-color) 0%, var(--widget-sec-bg-color) 100%); /* Chrome10+,Safari5.1+ */
	/* box-shadow: 0 -1px 0 #FFF inset, 0px 10px 20px rgba(0,0,0,0.2); */
	box-shadow: 0 -1px 0 var(--widget-bg-color) inset, 0px 10px 20px rgba(0,0,0,0.2);
	transform-origin: 0 -10px;
	transform: rotateX(-90deg);
	transition: transform 70ms linear;
	text-align: center;
}

#byte-ui-modal .notification_area .choices_area {
	padding-top: 2px;
	text-align: center;
	/* margin-right: 10px; */
	padding-bottom: 8px;
}
#byte-ui-modal .notification_area .choices_area button {
	margin-right: 5px;
}
#byte-ui-modal .notification_area .input_area {
	display: flex;
	align-items: center;
	justify-content: center;
}
#byte-ui-modal .notification_area .input_area input {
	max-height: 24px;
	margin: 0;
	padding: 0 0.5rem;
	/* font-size: 0.875rem; */
	font-size: 0.8rem;
	font-weight: normal;
}
#byte-ui-modal .notification_area .input_area label {
	width: 30%;
	width: 25%;
	margin-right: 15px;
	text-align: end;
}
#byte-ui-modal .notification_area .text_area {
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	min-height: 50px;
	font-size: 12px;
}
#byte-ui-modal .notification_area .text_area strong {
	font-size: 14px;
	/* height: 14px; */
}
#byte-ui-modal .notification_area .content_area{
	flex: 1 1 100%;
	text-align: center;
}
#byte-ui-modal .notification_area .icon_area {
	display: none;
	height: 100%;
	/* left: 15px; */
    align-items: center;
	position: relative;
	font-size: 20px;
	color: #38597A;
}
#byte-ui-modal .notification_area .icon_area.notice {
	display: flex;
}
#byte-ui-modal .notification_area .icon_area.success {
	display: flex;
	color: #00cc00;
}
#byte-ui-modal .notification_area .icon_area.warning {
	display: flex;
	color: #d8c306;
}
#byte-ui-modal .notification_area .icon_area.error {
	display: flex;
	color: #a00;
	color: var(--button-warning-color);
}
/*-------------------------------------------------------------------
End things for byteUIModal() to work
--------------------------------------------------------------------*/