/* Dialog */

#DLG, #DLG_bg {
	position: fixed; 
	top: 0px; 
	left: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	z-index: 20000;
	display: table !important;
}
#SUBFR {
	display:table-cell;
	vertical-align:middle;
}
#SUBFR_div {
	margin:auto;
	padding:0;
	width:auto;
	height:auto;
	max-width: calc(100vW - 20px) !important;
	max-height: calc(100vH - 20px) !important;
	box-sizing:border-box;
	border-radius:1px;
}

#SUBFR_div.shade {
	box-shadow: 0 12px 28px 0 rgba(0,0,0,.5), 0 2px 4px 0 rgba(0,0,0,.5);
}
#SUBFR_div IFRAME {
	width:auto;
	height:auto;
	max-width: calc(100vW - 20px) !important;
	max-height: calc(100vH - 20px) !important;
	padding:0;
	margin:0;
	box-sizing:border-box;
	border-radius:1px;
}
#DLG_bg {
	background:rgba(64,64,64,0.6);
	backdrop-filter: blur(2px);
}

#DLG_bg.hide {
	visibility: hidden;
	opacity:0;
	transition:opacity 0.2s ease-out;
	pointer-events:none;
}

#DLG_bg.show {
	visibility: visible;
	opacity:1;
	transition:opacity 0.2s ease-in;
}

#DLG_bg.hide #SUBFR_div {
	transform:scale(0);
	transition:transform 0.2s ease-out;
}

#DLG_bg.show #SUBFR_div {
	transform:scale(1);
	transition:transform 0.2s ease-in;
}

.dlg-content {
	background-color: #fff;
	overflow:hidden;
	width:100%;
	height:100%;
	position: relative;
	border-radius:0px;
	color: #424242;
}

.dlg-hdr {
	position:relative;
	top:0px;
	left:0px;
	height: 50px;
	padding: 12px 5px 10px 15px;
	padding-right: 50px;
	font-size: 16px;
	font-weight:600;
	width:100%;
	box-shadow: 0px 1px 10px rgb(0 0 0 / 7%);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-transform: uppercase;
}

.u-body .dlg-hdr {
	background-color: #96ca2d;
	color: white;
}

.dlg-close {
	position:absolute;
	top: 10px;
	right:0px;
	width: 40px;
	height:40px;
	font-size: 42px;
	cursor:pointer;
	margin-top:-20px;
	opacity: 0.8;
	font-weight: 300;
}
.dlg-close:hover {opacity:1;}

.dlg-list {
	position: absolute;
	top: 51px;
	left:0px;
	bottom: 60px;
	width: 100%;
	min-width:100%;
	padding: 25px;
	overflow:auto;
	font-size: 16px;
	font-weight: 400;
}

.all-centered {
	min-width: 100%;
	width:100%;
	height:100%;
	display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
}

.all-centered small {
	line-height:1.4;
	margin-top:14px;
}

.dlg-btm {
	position:absolute;
	bottom:0px;
	left:0px;
	height: 60px;
	width:100%;
	padding-top:2px;
	background-color: #f7f7f7;
	text-align: center;
	overflow:hidden;
}

.dlg-btm a {
	margin-left:20px;
	margin-right:20px;
	margin-top:10px !important;
	cursor:pointer;
	min-width:120px;
	width:120px;
	font-weight: 500;
	padding:6px;
}

.dlg-btm a:hover {
	background-color:white !important;
	font-weight: 550;
}

/* WebKit scrollbar */

.scrollbar.white::-webkit-scrollbar {
    background-color: white;
}
.scrollbar.dark::-webkit-scrollbar {
    background-color: #171516;
}

.scrollbar.narrow::-webkit-scrollbar {
    width: 14px;
    height: 11px;
    opacity: 0.6;
}

.scrollbar.white::-webkit-scrollbar-track {
    background-color: white;
}
.scrollbar.dark::-webkit-scrollbar-track {
    background-color: #171516;
}

.scrollbar.white::-webkit-scrollbar-track:hover {
    background-color: white;
}

.scrollbar.white::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 16px;
    border: 2px solid white;
}
.scrollbar.dark::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 16px;
    border: 2px solid #171516;
}

.scrollbar.white::-webkit-scrollbar-thumb:hover {
    background-color: #96ca2d;
    border: 2px solid white;
    cursor: pointer;
}
.scrollbar.dark::-webkit-scrollbar-thumb {
    background-color: #96ca2d;
    border: 2px solid #171516;
    cursor: pointer;
}

.scrollbar::-webkit-scrollbar-button {
    display: none;
}