/*
 *  Custom styles for M88 Help Site
 */

/* Standard */

/* Khmer OS,Khmer OS System */

@font-face {
	font-family: "Khmer OS";
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	src: url('fonts/KHMEROS0.eot');
}
@font-face {
	font-family: "Khmer OS System";
	src: url('fonts/KhmerOSsys.ttf');
}

#frame {
	width: 100%;
	height: 86px;
}

#frame2 {
	width: 100%;
	height: 95px;
}

p {
	font-size: 13px;
}

small {
	font-size: 13px;
}

a:hover {
	text-decoration: underline;
	color: #efd067 !important;
}

img.divider {
	width: 100%;
}

:lang(en) {
	font-family: Tahoma, Helvetica, Sans-Serif !important;
}

:lang(id) {
	font-family: Tahoma, Helvetica, Sans-Serif !important;
}

:lang(cs) {
	font-family: Tahoma, Helvetica, Sans-Serif !important;
}

:lang(th) {
	font-family: Tahoma, Helvetica, Sans-Serif !important;
}

:lang(kh) .main-content {
	font-family: "Khmer OS","Khmer OS System" !important;
}

:lang(vn) .main-content {
	font-family: Tahoma,Sans-Serif,Helvetica !important;
}

h1, h2, h3, h4, h5, h6, p {
	color: #fff;
}

.dropdown-menu {
	background-color: #3d5172; 
}

.btn-outline-secondary {
	color: #fff;
	background-color: #6789bb;
	background-image: none;
	border-color: #6789bb;
	border-radius: 0px;
}

.btn-outline-secondary:hover {
	background: #ffcf01;
	border-color: #ffcf01;
	color: #222;
}

button.std {
	background: #6789bb;
	border: 1px solid #6789bb;
	color: #fff;
	font-size: 14px;
	padding: 10px 35px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

button.secondary {
	background: #6789bb;
	border: 1px solid #6789bb;
	color: #fff;
	padding: 2.5px 60px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

button.question {
	border-radius: 100%;
	padding: 0px;
	background: #6789bb;
	color: #fff;
	width: 25px;
	height: 25px;
	border: none;
}

button.std:hover, button.secondary:hover {
	background: #ffcf01;
	border: 1px solid #ffcf01;
	color: #222;
	cursor: pointer;
}

button.tutorial {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.nopadding {
	padding: 0px;
}

.nomargin {
	margin: 0px;
}

/* Header */

nav.navbar {
	background: #3d5172;
}

.navbar-nav li a img {
	border-radius: 100%;
	height: 30px;
	width: 30px;
}

.navbar-nav li a {
	font-size: 13px;
}

.navbar-dark .navbar-nav .nav-link {
	color: #fff;
}

/* Content */

.contact-bottom li {
	padding-left: 60px;
}

.contact-sec-bottom li {
	padding-left: 60px;
}

.contact li a {
	color: #ffe384 !important;
	font-size: 13px;
}

.get-email li {
	color: #fff;
	font-size: 13px;
}

ul.get-email {
	margin-bottom: 0px;
}

.link {
	text-decoration: underline;
	color: #ffe384;
}

.main-content {
	background: url('../img/home-bg.jpg') no-repeat rgb(126, 152, 204);
	background-size: cover;
    position: relative;
}

.link-wrapper {
	background: rgba(0, 0, 0, 0.5);
	padding: 10px;
	box-sizing: border-box;
	word-wrap: break-word;
}

.link-wrapper ul li {
	list-style: none;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
}

.link-wrapper ul li a {
	display: block;
	word-wrap: break-word;
	font-weight: normal;
}

.link-content {
	text-align: center;
}

p.link-backup {
	font-size: 14px;
}

.tutorial-first .tutorial:before {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
  top: 0;
	background: url(../img/360-safe.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.tutorial-second .tutorial:before {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
  top: 0;
	background: url(../img/qq-safe.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.tutorial-third .tutorial:before {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
  top: 0;
	background: url(../img/baidu-dns.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.title {
	font-weight: bold;
	text-transform: uppercase;
}

.url-backup {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin-right: 20px;
}

/* Footer */

.footer {
	width: 100%;
	background-color: #3d5172;
	color: white;
	text-align: center;
}

.footer .nav li {
	position: relative;
	display: inline;
	margin: 5px 10px;
	font-size: 13px;
}

.footer .nav li::after {
	content: "|";
	top: 0px;
	left: -15px;
	transform: translate(-50%);
	position: absolute;
	color: #637a9f;
}

.footer .nav li:first-child::after {
	content: "";
	display: none;
}

.footer .nav li a:hover {
	text-decoration: underline;
}

.footer .nav li a {
	font-size: 13px;
	color: #fff;
	display: inline;
	padding: .5rem;
}

/* Responsive */

@media (min-width: 1024px) { 
.main-content {
	padding: 125px 0px;
	min-height: 100vh;
}
.fixed-b {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
}
}

@media (max-width: 1024px) { 
.main-content {
	padding: 125px 0px;
}
.footer .nav li::after {
	content: "";
}
}

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) {
.main-content {
	height: 100%;
}
}

@media (max-width: 1024px) { 
.navbar-brand {
	margin-right: 0px;
}
}

/* live chat fixed */
.chatbox {
    text-decoration: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin-right: 16px;
    margin-bottom: 35px;
}
.live-engage-button-floating {
 	height: 100px;
    width: 180px;
    background-repeat: no-repeat;
    background-image: url(../img/live-help-desktop.svg);
    background-size: 180px;
    cursor: pointer;
}
:lang(vn) .live-engage-button-floating {
    width: 235px;
    background-image: url(../img/live-help-desktop-long-vn.svg);
    background-size: 235px;
}
:lang(kr) .live-engage-button-floating {
    width: 200px;
    background-image: url(../img/live-help-desktop-long.svg);
    background-size: 200px;
}
.live-engage-button-floating span {
	top: 22%;
    left: 39%;
    position: relative;
    font-weight: bold;
    color: black;
    font-size: 18px;
 }
:lang(cs) .live-engage-button-floating span {
    top: 20%;
    left: 44%;
}
:lang(th) .live-engage-button-floating span {
    top: 22%;
    left: 35%;
}
:lang(vn)  .live-engage-button-floating span {
    top: 20%;
    left: 23%;
    font-size: 16px;
}
:lang(kh) .live-engage-button-floating span {
    top: 19%;
    left: 45%;
}
:lang(kr) .live-engage-button-floating span {
    top: 24%;
    left: 33%;
    font-size: 16px;
}
.frame {
	width: 100%;
	height: 65px;
}
.Pemail {
	border: 0px solid #AAA;
	box-sizing: fixed;
	float: left;
	overflow: auto;
	padding: 5px 5px 5px;
	text-align: left;
	width: 475px;
}

.Pweb {
	border: 0px solid #AAA;
	display:inline-block;
	/*box-sizing: fixed;*/
	float: left;
	overflow: auto;
	padding: 5px 5px 5px;
	text-align: left;
	width: 100%;
}

.Tmail {
	backface-visibility: hidden;
	font-size: 15px;
	margin: 0;
	/*height: 20px;*/
	/*width: 333px;*/
}

.Tweb {
	backface-visibility: hidden;
	font-size: 15px;
	margin: 0;
	height: 20px;
	/*width: 333px;*/
}


.btnGo, #btnSubmit {
	color: white;
	font: normal 13px/13px "Arial";
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	width: 114px;
	padding: 0;
	border: 0;
	min-height:26px;
	margin: 0;
	text-align: center;
	background: #718DBA;
}

	.btnGo:hover, #btnSubmit:hover {
		color: #000;
		font: normal 13px/13px "Arial";
		font-size: 13px;
		text-decoration: none;
		cursor: pointer;
		width: 114px;
		padding: 0;
		border: 0;
		min-height: 26px;
		margin: 0;
		text-align: center;
		background: #ffcf01;
	}


/* Main CSS */
body {
	background-color: transparent;
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

.list-group-item-c {
	/*border: 1px solid #AAA;*/
	box-sizing: border-box;
	float: left;
	overflow: auto;
	/*padding: 0 15px 0;*/
}

span#LInfo, span#LwebInfo {
	color: #fff;
	display: block;
	font-family: Arial;
	font-size: 12px;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1 em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 2px;
}

ul {
	color: #fff;
	display: block;
	font-family: Arial;
	font-size: 12px;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1 em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 10px;
}
.icon_svg_wa {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='39' viewBox='0 0 39 39'%3E%3Cpath fill='%2300E676' d='M10.7 32.8l.6.3c2.5 1.5 5.3 2.2 8.1 2.2 8.8 0 16-7.2 16-16 0-4.2-1.7-8.3-4.7-11.3s-7-4.7-11.3-4.7c-8.8 0-16 7.2-15.9 16.1 0 3 .9 5.9 2.4 8.4l.4.6-1.6 5.9 6-1.5z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M32.4 6.4C29 2.9 24.3 1 19.5 1 9.3 1 1.1 9.3 1.2 19.4c0 3.2.9 6.3 2.4 9.1L1 38l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM19.5 34.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L6.9 28l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9s16.5-2.3 20.9 4.9 2.3 16.5-4.9 20.9c-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5s.4-.4.5-.6c.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	height: 39px;
}
.icon_live_chat {
	background: url(../img/live-chat.png);
	background-repeat: no-repeat;
}
.icon_line {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'%0Awidth='39' height='39'%0AviewBox='0 0 48 48'%0Astyle=' fill:%23000000;'%3E%3Cpath fill='%2300c300' d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23C6,39.09,8.91,42,12.5,42z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	height: 39px;
}
.icon_telegram {
	background: url(../img/sosmed/icon-telegram.png);
	background-repeat: no-repeat;
}
.icon_kakao {
	background: url(../img/sosmed/icon-kakao.png);
	background-repeat: no-repeat;
}
.hide_kakao_qr_code {
	display:none;
	height: 136px;
	box-shadow: 2px 2px 10px 0 rgb(0 0 0 / 10%);
	bottom: 0;
	transform: translateX(50%);
	z-index: 1;
	position: absolute;
	top: 62%;
	height: 136px;
	width: 136px;
}
.show_kakao_qr_code:focus + .hide_kakao_qr_code {
	display: block;
}
.hide_th_line_qr_code {
	display: none;
	height: 136px;
	box-shadow: 2px 2px 10px 0 rgb(0 0 0 / 10%);
	bottom: 0;
	transform: translateX(128%);
	z-index: 1;
	position: absolute;
	top: 67%;
	height: 136px;
	width: 136px;
}
.show_th_line_qr_code:focus + .hide_th_line_qr_code {
	display: block;
}
.hide_jp_line_qr_code {
	display: none;
	height: 136px;
	box-shadow: 2px 2px 10px 0 rgb(0 0 0 / 10%);
	bottom: 0;
	transform: translateX(1%);
	z-index: 1;
	position: absolute;
	top: 67%;
	height: 136px;
	width: 136px;
}
.show_jp_line_qr_code:focus + .hide_jp_line_qr_code {
	display: block;
}