@font-face
{
	font-family: hhamony;
	/*
	src: url('/hangul/hyundai-hamony-B.ttf');
	*/
	src: url('/hangul/EBS-hoonmin-SB.ttf');
	font-weight: bold;
	font-style: normal;
}

html, body
{
	font-family: hhamony;
	font-size: 100%;
	margin: 0;
	padding: 0;
	color: white;
	background-color: black;
	scroll-behavior: smooth;
}
body
{
	-webkit-overflow-scrolling: touch;
}

.modal-content
{
	max-height: 80%;
	box-shadow: 0 0 5px red;
	box-shadow: 2px 2px 6px gray;
	background-color: rgba(50,50,50,0.8);
}
.modal-error-span
{
	text-shadow: 1px 1px 2px red;
}
.modal-error-bounce
{
	animation: bb-ani 0.5s forwards;
}
@keyframes bb-ani
{
	50% { margin-left: 100px; }
}

table
{
	cursor: default;
}
#bg-div
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		/*
		linear-gradient(to right, rgba(255,0,0,0.1), rgba(0,0,255,0.1)),
		*/
		url("../images/mytube-white-notxt.png");
	background-position: center bottom 10%;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.navbar
{
	position: relative;
	box-shadow: 0 0 3px red;
	padding: 0 5px;
	background-image: linear-gradient(to right, rgba(10,250,250,0.1), transparent);
}
.mm-navbar
{
	border-bottom: 0.2px solid orange;
	/*
	background-color: rgba(50,50,50,0.3);
	*/
	background-image: none;
}
.logo-img
{
	max-height: 32px;
	max-height: 28px;
}
#menu-desc-div
{
	position: absolute;
	padding: 5px;
	border: 1px solid darkgray;
	border-radius: 5px;
	background-color: rgba(50,50,50,0.9);
}
#nav-empty-div
{
	position: absolute;
	top: 5px;
	width: 100%;
	overflow: hidden;
	opacity: 0.5;
}
#nav-empty-div div
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 80%;
	white-space: nowrap;
	text-shadow: 0 0 1px blue;
	animation: margsapn-ani 19.0s infinite;
}
#nav-empty-div .marquee-span
{
	font-size: 120%;
	text-shadow: 0 0 1px red;
}
@keyframes margsapn-ani
{
	/*
	0% { left: 100%; transform: translateY(-50%); }
	25% { left: 50%; transform: translate(-50%, -50%) scale(1.2); }
	30% { left: 50%; transform: translate(-50%, -50%) scale(0.8) rotateX(360deg); }
	35% { left: 50%; transform: translate(-50%, -50%) scale(1.2); }
	50% { left: 0; transform: translate(-100%, -50%); }
	65% { left: 50%; transform: translate(-50%, -50%) scale(0.9); }
	75% { left: 50%; transform: translate(-50%, -50%) }
	100% { left: 100%; transform: translateY(-50%); }
	*/
	0% { left: 100%; transform: translateY(-50%); }
	45% { left: 50%; transform: translate(-50%, -50%) scale(1.2); }
	50% { left: 50%; transform: translate(-50%, -50%) scale(0.8) rotateX(360deg); }
	55% { left: 50%; transform: translate(-50%, -50%) scale(1.2); }
	100% { left: 0; transform: translate(-100%, -50%); }
}
.portrait-nav-div
{
	/*
	background-color: rgba(50,50,50,0.7);
	background-image: linear-gradient(to right, rgba(10,250,250,0.2), transparent);
	*/
}
.mm-nav-div
{
	position: relative;
}
.mm-nav-div-tp
{
}
.mm-nav-div-toright
{
	/*
	background-color: black;
	*/
	/*
	background-image: linear-gradient(to right, rgba(10,250,250,0.4), transparent);
	background-image: linear-gradient(to right, blue, green);
	background-image: linear-gradient(to right, rgba(0,0,139,0.4), rgba(0,139,0,0.4), rgba(139,0,0,0.4));
	background-image: linear-gradient(to right, rgba(0,0,139,0.4), rgba(0,139,0,0.4));
	*/
	background-image: linear-gradient(to right, rgba(0,0,139,0.99), black);
}
.mm-nav-div-toleft
{
	/*
	border-bottom: 1px solid orange;
	background-image: linear-gradient(to left, black, transparent);
	*/
	animation: left-bounce-ani 3s infinite;
}
@keyframes left-bounce-ani
{
	50% { color: white; transform: translate(-5%); }
}
#below-logged-email-div
{
	/*
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 100%;
	right: 5px;
	*/
	text-align: right;
	padding-right: 10px;

	font-size: 80%;
	font-style: italic;
	text-align: right;
	text-shadow: 1px 1px 3px black;
	color: gray;
	background-color: black;
}
#mm-three-line-btn
{
	padding-right: 3px;
}
.cross-toggler-icon
{
	/*
	font-size: 150%;
	*/
}
.mm-btn
{
	margin: 2px 1px; 
}
#chat-icons-div
{
	left: 50%;
	transform: translate(-50%);
	color: white;
	background-color: rgba(50,50,50,0.8);
}
#chat-icons-div .dropdown-header
{
	position: relative;
    color: white;
    background-color: rgba(0,139,139,0.5);
}
#chat-icons-div .dropdown-header button
{
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
}
#chat-icons-div .dropdown-item
{
    color: white;
}
#chat-icons-div .dropdown-item:hover
{
    background-color: rgba(139,0,0,0.5);
    background-color: transparent;
}
#chat-icons-div .dropdown-item button:hover
{
	transform: scale(1.2);
}
#chat-icons-div img
{
	max-width: 28px;
}
.smttl-div
{
	font-style: italic;
	text-align: center;
	text-shadow: 1px 1px 2px red;
	padding-top: 5px;
	border-top: 1px solid gray;
}
#bar-logged-email-div
{
	position: absolute;
	top: 50%;
	right: calc(100% - 10px);
	transform: translateY(-50%);
	z-index: -1;
}
.toast
{
	padding: 2px;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	border: 1px solid rgba(50,50,50,0.6);
	border-radius: 5px;
	width: 70%;
	width: auto;
	max-width: none;
	box-shadow: 0 0 9px orange;
	box-shadow: 2px 2px 6px gray;
	/*
	background-color: rgba(50,50,50,0.9);
	*/
}
.toast-header,
.toast-body
{
	width: auto;
}
.toast-header
{
	position: relative;
	vertical-align: middle;
	text-shadow: 1px 1px 2px black;
	/*
	background-color: rgba(0,200,200,0.9);
	*/
	background-color: rgba(50,50,139,0.9);
}
.toast-header button
{
	/*
	text-shadow: 0px 0px 2px blue;
	*/
}
.toast-header-label
{
	/*
	margin-top: 5px;
	*/
	padding-top: 5px;
}
.toast-body
{
	position: relative;
	/*
	width: fit-content;
	*/
	max-height: 70vh;
	overflow: auto;
	/*
	*/
	background-color: rgba(50,50,50,0.7);
	background-color: rgba(0,10,0,0.9);
}
.toast-body table
{
	color: white;
}
.toast-body table thead
{
	text-align: center;
	background-color: rgba(50,250,250,0.2);
}
.toast-body table tbody tr:hover
{
	background-color: rgba(50,50,250,0.2);
}
.toast-body table th,
.toast-body table td
{
	border-color: darkgray;
}
#popup-toast-div
{
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#popup-toast-body
{
	position: relative;
}
#popup-toast-frm
{
	outline: none;
	padding: 0;
	margin: 0;
	border: none;
	aspect-ratio: 16 / 9;
	background-image:
		linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
		linear-gradient(to right, rgba(255,0,0,0.1), rgba(0,0,255,0.1)),
		url("../images/mytube-white-notxt.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#popup-toast-body .audio-oo-btn
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#main-body-div
{
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}
#main-card-div
{
	position: fixed;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 10px;
	text-align: center;
	vertical-align: middle;
	overflow: auto;
}
#main-card-inner-div
{
	position: absolute;
	width: 100%;
	padding-bottom: 10px;
}
.card-div
{
	position: relative;
	display: inline-block;
	box-shadow: 0 0 2px yellow;
	border-radius: 5px;
	/*
	transform: translateY(calc(100vh - 50%)%);
	*/
}
.mm-card-div
{
	/*
	margin: 20px 5vw;
	*/
	margin: 10px 5px 0px 5px;
	/*
	box-shadow: 0 0 5px darkgray;
	*/
	border: 1px solid darkgray;
}
.mm-card-lr-div
{
	animation: mm-init-0 1.5s forwards;
}
@keyframes mm-init-0
{
	30% { margin-left: -15%; }
	70% { margin-left: -20%; }
}
.mm-card-ud-div
{
	animation: mm-init-1 1.5s forwards;
}
@keyframes mm-init-1
{
	50% { transform: translateY(-200%); }
}
.mm-card-cover-div
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mm-card-cover-div:hover
{
	border: 1px solid red;
}
/*
.list-card-div
*/
.card-div
{
	margin: 10px 5px 0px 5px;
}
/*
.list-card-div:hover,
*/
.card-div:hover
{
	box-shadow: 0 0 15px orange;
	background-color: rgba(50,50,50,0.4);
}
.mm-card-div:hover
{
	box-shadow: 0 0 15px orange;
	background-image: linear-gradient(to top, transparent, rgba(0,139,0,0.2));
}
.chat-list-table .delchat-selected-tr
{
	background-color: rgba(139,0,0,0.5);
}
.card-pressed-div
{
	transform: translate(5px, 5px);
	background-image: linear-gradient(to top, transparent, rgba(0,100,0,0.2));
}
.card
{
	/*
	border: 1px solid darkgray;
	*/
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: transparent;
	box-shadow: 0 0 120px rgba(90,90,90,0.4);;
}
.card-body
{
}
.mm-card
{
	aspect-ratio: 9 / 16;
	background-image: linear-gradient(to top, transparent, rgba(0,139,0,0.2));
}
.list-card
{
	background-image: linear-gradient(to top, transparent, rgba(0,0,139,0.1));
}
.recommend-card
{
	background-image: linear-gradient(to top, transparent, rgba(0,139,0,0.1));
}
.other-list-card,
.other-share-card
{
	background-image: linear-gradient(to top, transparent, rgba(139,0,0,0.05));
}
.card img
{
	z-index: -1;
}
/*
.card-body h6
{
	white-space: wrap;
	white-space: pre-line;
}
.card-body h6 input
{
	text-align: center;
}
*/
.card-body input
{
	text-align: center;
}
.mm-card-down-img
{
	opacity: 0.8;
	opacity: 0.6;
	opacity: 0.2;
	/*
	transform: translateY(100%);
	*/
	transform: rotate(30deg) translateY(100%);
	animation: img-act-ani 5s infinite;
}
@keyframes img-act-ani
{
	0% { transform: rotate(30deg) translateY(100%); }
	10% { transform: translateY(-10%); }
	90% { transform: translateY(10%); opacity: 1; }
	100% { transform: rotate(-30deg) translateY(100%); }
}
.pl-card-img
{
	opacity: 0;
}
.pl-card-dim-img
{
	animation: img-dim-ani 5s infinite;
}
@keyframes img-dim-ani
{
	/*
	30% { opacity: 0.9; }
	70% { opacity: 0.8; }
	*/
	50% { opacity: 0.5; }
}
.mm-card-body p
{
	font-size: 80%;
}
.common-list-table thead tr th
{
	position: sticky;
	white-space: nowrap;
}
.list-card-body table
{
	font-size: 80%;
	color: white;
}
.list-card-body table thead tr
{
}
.list-card-body table tr
{
}
.list-card-body table th
{
	/*
	background-color: rgba(10,200,200,0.1);
	background-color: rgba(200,10,10,0.1);
	*/
	background-color: rgba(10,10,139,0.3);
}
.other-list-card table th
{
	background-color: rgba(139,10,10,0.3);
}
.list-card-body table th,
.list-card-body table td
{
	padding: 5px;
	border-top: 1px solid rgba(100,100,100,0.7);
	border-bottom: none;
}
.list-page-div
{
	position: fixed;
	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 10px;
	text-align: center;
	overflow: auto;
	overflow-x: hidden;
}
/*
#list-page-div-0
{
	background-color: red;
}
#list-page-div-1
{
	background-color: blue;
}
#list-page-div-2
{
	background-color: green;
}
#list-page-div-3
{
	background-color: yellow;
}
*/
#mm-toast-div .close,
.page-close-btn
{
	position: fixed;
	right: 9px;
	top: 9px;
}
.topdown-btn
{
	position: absolute;
	position: fixed;
	padding: 2px 4px;
	right: 9px;
	left: auto;
}
.to-bottom-btn
{
	top: 15vh;
}
.to-top-btn
{
	bottom: 5vh;
}

.card-delete-btn
{
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 100%;
}
.card-number-div
{
	position: absolute;
	top: 3px;
	left: 5px;
	font-size: 70%;
	font-style: italic;
}
.card-actbtn-div
{
}
.card-handle-div
{
}
.card-pibtn-div
{
	position: absolute;
	top: 80%;
	width: 100%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.card-actbtn-div button
{
	/*
	padding: 0 2px 0 5px;
	*/
	font-size: 200%;
	font-size: 150%;
	font-size: 130%;
	/*
	padding: 0 5px;
	*/
	border: none;

	/*
	background-image: linear-gradient(to right, red, orange, yellow, green, lightblue, blue, violet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-position: -30px 0;
	animation: actbtn-ani 3s infinite;
	*/
	filter: drop-shadow(0 0 5px black);
}
.card-actbtn-div button:hover
{
	transform: scale(1.4);
	/*
	border: 0.1px solid lightblue;
	background-color: transparent;
	background-image: none;
		-webkit-background-clip: auto;
		-webkit-text-fill-color: lightgreen;
	animation: none;
	*/
}
.card-actbtn-div button:focus,
.card-actbtn-div button:active
{
	outline: none !important;
	box-shadow: none !important;
}
@keyframes actbtn-ani
{
	20% { text-shadow: 0 0 20px orange; }
	50% { text-shadow: 0 0 20px white; background-position: 30px 0; }
	80% { text-shadow: 0 0 20px orange; }
}
fieldset
{
	margin: 5px;
	margin-top: 15px;
	margin: 10px 5px;
	padding: 0 5px;
	padding: 0 5px 10px 5px;
	/*
	border: 1px solid rgba(90,50,50,0.9);
	*/
	box-shadow: -2px -2px 5px rgba(90,50,50,0.9);
	box-shadow: -2px -2px 5px rgba(50,139,139,0.3);
	border-radius: 10px;
	transform: rotateX(90deg);
}
.fieldset-bg-div
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.mytube-wm-div
{
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
}
/*
.searching-fieldset .fieldset-bg-div
*/
.searching-fieldset .mytube-wm-div
{
	/*
	background-size: 400px 400px;
	*/
	background-size: 500px 500px;
	background-image:
		/*
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgba(90,90,90,0.1)' font-size='20'>SEARCHING</text><text transform='translate(20, 120) rotate(-45)' fill='rgba(90,90,90,0.1)' font-size='20'>FIELD</text></svg>"),
		*/
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='140px' width='140px'><text transform='translate(0, 20)' fill='rgba(90,90,90,0.1)' font-size='20'>SEARCHING</text><text transform='translate(30, 50)' fill='rgba(90,90,90,0.1)' font-size='20'>FIELD</text></svg>"),
		repeating-linear-gradient(0deg, transparent, transparent 198px, rgba(50,50,50,0.1) 199px),
		repeating-linear-gradient(90deg, transparent, transparent 198px, rgba(50,50,50,0.1) 199px),
		repeating-linear-gradient(-45deg, transparent, transparent 198px, rgba(150,50,50,0.1) 199px),
		repeating-linear-gradient(225deg, transparent, transparent 198px, rgba(50,150,50,0.2) 199px),
		repeating-linear-gradient(45deg, transparent, transparent 198px, rgba(150,50,50,0.1) 199px),
		repeating-linear-gradient(135deg, transparent, transparent 198px, rgba(50,150,50,0.1) 199px);
	animation: rrr-ani 20s infinite;
}
@keyframes rrr-ani
{
	0% { transform: rotate(-45deg); }
	50% { transform: rotate(45deg); }
	100% { transform: rotate(-45deg); }
}
/*
.searching-fieldset .fieldset-bg-div::before
{
	content: "CONFIDENTIAL";
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	pointer-events: none;
	z-index: -1;
	white-space: nowrap;
	font-size: 100px;
	color: white;
}
*/
.fieldset-body-div
{
	padding-bottom: 10px;
	/*
	max-height: 100vh;
	*/
	max-height: 100%;
	overflow: auto;
}
.active-fieldset
{
	animation: af-ani 1s forwards;
}
@keyframes af-ani
{
	10% {transform: rotateX(70deg); }
	100% { transform: none; }
}
legend
{
	position: relative;
	cursor: default;
	font-size: 100%;
	font-size: 80%;
	width: fit-content;
	width: auto;
	margin-left: 20px;
	padding: 0.2em 1em;
	border-radius: 5px;
	box-shadow: 0 0 4px gray;
}
.legend-btn-div
{
	position: absolute;
	top: 50%;
	left: 100%;
	white-space: nowrap;
	transform: translateY(-50%);
}
.legend-btn-div:hover
{
	/*
	transform: scale(1.2);
	transition: all 0.5s;
	*/
}
.page-legend-0
{
	/*
	background-color: rgba(50,50,50,0.9);
	*/
	background-image: linear-gradient(to bottom, rgba(139,10,10,0.5), transparent, rgba(10,139,10,0.5));
	background-image: linear-gradient(to bottom, transparent, rgb(0,0,139), transparent);
}
.page-legend-1
{
	/*
	background-color: rgba(50,50,50,0.9);
	*/
	background-image: linear-gradient(to bottom, rgba(10,139,10,0.5), transparent, rgba(10,10,139,0.5));
	background-image: linear-gradient(to bottom, transparent, rgba(139,0,0,0.6), transparent);
}
.no-content-legend
{
	transform: translate(-90%);
}

.card-container-div
{
	position: relative;
}
.prepro-page-div
{
	display: inline-block;
	/*
	display: none;
	*/
	padding: 0 50px;
	margin-top: 10px;
	/*
	border-bottom: 1px solid rgba(0,139,0,0.9);
	background-image: linear-gradient(to bottom, transparent, rgba(0,139,0,0.2));
	*/
	border-top: 1px solid rgba(0,139,0,0.9);
	background-image: linear-gradient(to bottom, rgba(0,139,0,0.2), transparent);
}
.fcnt-span
{
	font-size: 70%;
	color: cyan;
}
.list-icon-img
{
	max-height: 28px;
}
.list-page-div fieldset:first-child .card-div
{
	border: 1px solid darkgray;
	box-shadow: 0 0 5px gray;
	background-image: linear-gradient(135deg, blue, darkblue, transparent 5%);
}
.list-page-div fieldset:nth-child(2) .card-div
{
	border: 1px solid darkgray;
	box-shadow: 0 0 5px gray;
	background-image: linear-gradient(135deg, red, darkred, transparent 5%);
}

#action-div
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0,0,139,0.3);
	background-color: rgba(0,0,139,0.7);
}
#action-frm
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none;
	padding: 0;
	margin: 0;
	border: none;
}

#bottom-copyright-div
{
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgba(5,5,5,0.3);
}
#bottom-copyright-div *
{
	font-size: 80%;
}
#copyright-label
{
	overflow: hidden;
	background-image: linear-gradient(to right, red, orange, yellow, green, lightblue, blue, violet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-position: 30px 0;
	animation: sys-ani 5s infinite;
}
@keyframes sys-ani
{
	50% { background-position: 300px 0; }
}
#flag-label
{
	filter: drop-shadow(0 0 5px crimson);
}

.grid-div
{
	font-size: 80%;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
	gap: 0; /* Space between grid items */
	border-top: 1px solid #999;
	text-shadow: 1px 1px 2px gray;
}
.grid-header
{
	font-weight: bold;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #999;
}
.grid-header .card-chat-btn:hover
{
	/*
	transform: scale(1.3) rotate(360deg);
	*/
	transform: scale(1.3);
	transition: all 0.5s;
}
.list-card-body .grid-header
{
	background-color: rgba(10,10,139,0.3);
}
.other-list-card .grid-header
{
	background-color: rgba(139,10,10,0.3);
}
.grid-header:nth-child(1):hover div
{
	transform: scale(1.3) rotate(360deg);
	transition: all 0.5s;
}
.grid-body
{
	padding: 5px;
}
.vib-div
{
	animation: vib-ani 0.5s forwards;
}
@keyframes vib-ani
{
	/*
	50% { transform: translate(20px) }
	*/
	50% { transform: translate(-50vw) }
}
.ctime-div
{
	font-size: 80%;
}
.tree-div
{
	position: relative;
	/*
	cursor: default;
	*/
	text-align: left;
	padding: 10px;
}
.tree-box-div
{
	/*
	background-image:
		linear-gradient(to bottom, rgba(255,255,255,.0.05), transparent),
		linear-gradient(to right, rgba(255,0,0,.0.05), rgba(255,255,0,.0.05), rgba(0,255,0,.0.05), rgba(0,0,255,.0.05));
	*/
}
.tree-header-div
{
	position: relative;
	border: 1px solid rgba(90,90,90,0.5);
	border-radius: 5px;
}
.tree-header-div input
{
	cursor: default;
	/*
	*/
	padding: 0 !important;
	width: auto;
	min-width: 60px;
	color: white;
	background-color: transparent !important;
}
.tree-seq-div
{
	font-size: 70%;
	font-style: italic;
	position: absolute;
	left: 0;
	/*
	top: 50%;
	transform: translateY(-50%);
	*/
	/*
	background-image: linear-gradient(to bottom, red, orange, yellow, green, lightblue, blue, violet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
	color: transparent;
	text-shadow: 1px 1px 2px yellow;
	z-index: -1;
}
.tree-toggler-div
{
	padding: 0;
}
.tree-header-spreaded-div
{
	background-image:
		linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent),
		linear-gradient(to right, rgba(255,0,0,0.1), rgba(255,255,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1));
}
.tree-box-div:hover .tree-header-div
{
	background-image:
		linear-gradient(to bottom, rgba(255,255,255,0.3), transparent),
		linear-gradient(to right, rgba(255,0,0,0.3), rgba(255,255,0,0.3), rgba(0,255,0,0.3), rgba(0,0,255,0.3));
}
.tree-box-div:hover input
{
	color: cyan;;
}

.tree-branch-div
{
	/*
	padding: 0 10px;
	margin-left: 5px;
	border: 1px solid darkgray;
	box-shadow: 1px 1px 2px gray;
	border-left: 1px solid rgba(90,90,90,0.5);
	*/
	background-image: linear-gradient(to right, rgba(0,138,139,0.1), transparent, rgba(139,0,0,0.1));
}
/*
.tree-branch-div table
*/
.common-info-table
{
	border: none;
	margin: 0;
	color: white !important;
}
/*
.tree-branch-div table tbody
*/
.common-info-table tbody
{
	margin: 0;
	padding: 0;
}
/*
.tree-branch-div table tbody tr:hover
*/
.common-info-table tbody tr:hover
{
	/*
	transform: translate(-20px);
	background-color: rgba(0,0,139,0.5);
	border-bottom: 1px solid darkred;
	*/
	border-bottom: 1px solid darkblue;
	background-image:
		/*
		linear-gradient(to right, rgba(255,0,0,0.1), rgba(255,255,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1) 50px, transparent 50px),
		linear-gradient(to right, transparent, rgba(139,0,0,0.5)) !important;
		linear-gradient(to right, rgba(139,0,0,0.5), transparent) !important,
		linear-gradient(to right, rgba(139,0,0,0.5), transparent),
		*/
		linear-gradient(to right, transparent, rgba(139,0,0,0.5)),
		linear-gradient(to right, rgba(0,0,139,0.5), transparent) !important;
}
/*
.tree-branch-div table tbody td
*/
.common-info-table tbody td
{
	padding: 5px;
	border: none !important;
	border-bottom: 0.5px solid blue;
	vertical-align: middle;
}
/*
.tree-branch-div table tbody td input
*/
.common-info-table tbody td input
{
	cursor: default;
	padding: 0;
	margin: 0;
}
.tree-branch-div table tbody td:nth-child(1)
{
	text-align: right;
	white-space: nowrap;
	background-image:
		linear-gradient(to right, transparent 10%, black 10%),
		linear-gradient(to bottom, transparent 30%, white 30%, white 34%, transparent 34%),
		linear-gradient(to right, rgba(200,200,200,0.4) 1px, transparent 1px);
}
.tree-branch-div table tbody tr:last-child td:nth-child(1)
{
	background-image:
		linear-gradient(to right, transparent 10%, black 10%),
		linear-gradient(to bottom, transparent 30%, white 30%, white 34%, transparent 34%),
		linear-gradient(to bottom, transparent 34%, black 34%),
		linear-gradient(to right, rgba(200,200,200,0.4) 1px, transparent 1px);
}
/*
.tree-branch-div table tbody td:nth-child(3)
*/
.common-info-table tbody td:nth-child(3)
{
	width: 99%;
}
.screen-saver-div
{
	width: 70%;
	margin-left: 15%;
	margin-top: 30px;
	padding: 0;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,139,0.7);
	box-shadow: 0 1px 2px rgba(0,0,255,0.9);
}
.screen-saver-div .moving-ele
{
}
#loading-spinner
{
	position: absolute;
	top: 50%;
	left: 50%;
}
#search-ddm
{
	padding: 10px;
	background-color: red;
}
/*
#searched-tbody tr th,
#searched-tbody tr td
{
	padding: auto 3px;
}
*/
#searched-tbody tr td div .badge
{
	font-size: 70%;
	font-style: italic;
	/*
	border: 1px solid red !important;
	*/
}

#qrcode-toast-div
{
	transition: all 0.5s;
}
.ltc-div
{
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s;
}
#qrcode-toast-div .toast-header div
{
	font-size: 80%;
}
#qrcode-body
{
	position: relative;
	/*
	transform: scale(0.7);
	*/
}
#qrcode-img
{
	width: 240px;
}
#qrcode-body .qr-marker-div
{
	position: absolute;
	font-size: 60%;
}
#qrcode-body .qr-marker-div1
{
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	color: gray;
}
#qrcode-body .qr-marker-div2
{
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	color: blue;
}
#qrcode-body .qr-marker-div3
{
	left: 0.8em;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	color: green;
}
#qrcode-body .qr-marker-div4
{
	right: 0.8em;
	top: 50%;
	transform: translate(50%, -50%) rotate(90deg);
	color: green;
}

.info-selected-card .card
{
	border: 1px solid cyan;
	background-image: radial-gradient(rgba(250,0,0,0.2), rgba(250,250,0,0.2), transparent 30%);
	background-image: radial-gradient(rgba(250,0,0,0.2), rgba(250,250,0,0.2), rgba(0,250,0,0.2), rgba(0,0,250,0.2), transparent);
}

.pwa-span
{
	font-style: italic;
	font-weight: bold;
	color: orange;
}

.close-span
{
	font-size: 50%;
	font-style: italic;
}

.modal-content .collapse,
.dropdown-menu
{
	box-shadow: 2px 2px 6px gray;
}

@media (orientation: landscape)
{
	.mm-card
	{
		max-width: 22vw;
		max-width: 18vw;
	}
	.list-card
	{
		max-width: 30vw;
	}
	.list-card img
	{
		/*
		max-width: 20vw;
		*/
	}
	#popup-toast-frm
	{
		min-height: 30vh;
	}
	#listmgmt-modal .modal-dialog
	{
		/*
		max-width: 40%;
		*/
	}
}
@media (orientation: portrait)
{
	.frm-txt-div
	{
		font-size: 80%;
	}
	.card
	{
		aspect-ratio: 4 / 3;
	}
	.mm-card
	{
		max-width: 90vw;
		background-image: linear-gradient(to top, transparent, rgba(0,100,0,0.3));
	}
	.list-card
	{
		max-width: 90vw;
	}
	.other-list-card
	{
	}
	#mm-toast-div,
	#popup-toast-frm,
	#make-toast-div
	{
		min-width: 70vw;
	}
	#main-card-div::-webkit-scrollbar,
	.list-page-div::-webkit-scrollbar
	{
		width: 0;
		height: 0;
	}
}

@media (min-width: 1280px)
{
	h6,
	.card-title-input,
	.container-fluid,
	.tree-header-div input,
	.common-info-table tbody td input,
	#search-list-div select,
	#search-list-div input,
	#search-list-div label,
	.toast
	{
		/*
		font-size: 120% !important;
		*/
		font-size: 110% !important;
	}
	.list-card
	{
		max-width: 20vw;
	}
	.list-icon-img
	{
		max-height: 36px;
	}
	.search-item-ele
	{
		min-width: 180px !important;
	}
}
@media (min-width: 1920px)
{
	h6,
	.card-title-input,
	.tree-header-div input,
	.common-info-table tbody td input,
	.container-fluid
	{
		font-size: 140% !important;
	}
	#search-list-div select,
	#search-list-div input,
	#search-list-div label,
	.toast
	{
		font-size: 180%;
	}
	.list-icon-img
	{
		max-height: 48px;
	}
	.search-item-ele
	{
		min-width: 220px !important;
	}
}

@media (pointer: coarse), (hover: none) {
	[title] {
		position: relative;
		/*
		display: inline-flex;
		*/
		justify-content: center;
	}
	[title]:focus::after {
		font-size: 70%;
		content: attr(title);
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%);
		background-color: black;

		padding: 5px;
		width: fit-content;
		white-space: nowrap;
	}
}