@charset "UTF-8";
/* CSS Document */

	*{padding: 0; list-style: none}
	:root {
	--domain-dark-green: #465E3E;
	--domain-light-green: #6F944D;
	--domain-premium: #3C3C3C;
	--domain-special: #704CBB;
	--UD-grey9C: #9c9c9c;
    --UD-green: #47B549;
	--UD-blue: #2A3A91;

	}

	body{height: 1200px;min-width:1200px; }

	#page{width: 100%}
	#header_global{display: none}
#header{ width: 100%; padding: 10px 0; font-size:16px /*display:flex; align-items: center; align-self: flex-start; flex-direction: column*/}

	#logo{ width:140px;height: 90px;background: url(/images/searchbox/logo_ud_light.svg) top center no-repeat;position: relative; text-align: center;margin:0 auto 1rem; display: none}
	#logo:after{content:"UDomain"; color: #fff;font-size: 22px; font-weight:lighter; position: absolute; bottom: 0;width: 100%; display: block}

	#navigation{ width: 100%; margin:0; padding: 20px 0; background: #6F944D; }
	#navigation ul{display: grid; grid-template-columns: auto auto;}
	#navigation ul li{line-height: 60px; padding: 2px}
	#navigation ul li a{color: #fff; text-decoration: none; padding: 1px 10px}

	#panel-search{ display: grid; width: 98%; padding: 8px; align-self:center; margin: 0 auto;}
	#panel-search p{ margin: 0; font-size: 16px; }
	#searchdomain {width:100%}

	#ui-search{ display: grid;padding: 3px; border-radius:3px; background:#6F944D}

	div.toggle-select{display: grid;padding: 6px}
	div.toggle-select input{display: grid; padding: 8px; border: none;border-radius:3px; font-size: 16px;}
	#ui-search.selected div.toggle-select{padding: 6px; border-radius:3px;background:#47B549 }


	#list-selected-domain{display: grid; padding: 10px; border-radius:3px; background:#47B549; color: #fff}
	#list-selected-domain li p:after{content: attr(data-domain-type); margin:0; color:white }
	#list-selected-domain li{display: flex; align-items: center; padding: 8px 0}
	#list-selected-domain li:last-child{border-top:1px solid #fff }
	#list-selected-domain li p, #list-selected-domain li a { color: white; }

	.ud_domain{background: #465E3E}
	.btn_expand{ color: #fff; text-decoration: none;margin: 8px; display: inline-flex; align-items: center}
	.btn_expand:before{content:"Explore all extension";display: inline-block}
	.btn_expand:after{content: ""; background: url(/images/searchbox/ico_expand.svg) no-repeat; width: 15px; height: 15px; margin: 0 10px; display: inline-block}
	.btn_cancel:before{content: ""; background: url(/images/searchbox/ico_close.svg) no-repeat; width: 15px; height: 15px; margin: 0 10px 0 0; display:flex}
	.btn_addDomain,.btn_whois{font-family: 'Heebo', sans-serif;text-decoration: none; position: absolute; right:0}
	.btn_addDomain:after{font-family: "FontAwesome";content: "\F07A"; background:#47B549; color: #fff; padding: 9px 9px;  border-radius: 3px; margin: 0 8px;font-size: 18px;}
	.btn_whois:after{content: "?"; background:#2A3A91; color: #fff; padding: 0 10px;  border-radius: 3px; margin: 0 8px}
	.btn_confirm{ color: #fff; text-decoration: none; margin: 8px 0 0 ; display: inline-flex; align-items: center}
	.btn_confirm:after{content: ""; background: url(/images/searchbox/ico_next.svg) no-repeat center; width: 20px; height: 15px; margin: 0 10px}
	.promotion_text{ color:red;padding-left:10px;margin-bottom:-5px;}

	.domain_form_btn{background-color: #2A3A91;border-radius: 3px;font-style: normal;font-weight: normal;font-size: 18px;color: #FFFFFF;width:100%;padding:10px 10px !important;}
	.domain_form_btn:hover{color:white;}

	#panel-search-result{ overflow-y: scroll; margin: 12px 0 0 0; border: 1px solid #ebebeb;border-radius:3px; background: #fff; max-height: 300px }
	#panel-search-result ul{ margin:0 }
	.list-domain-result{  background: #fff; display: flex; flex-direction: column}
	ul.list-domain-result li{border-bottom:1px solid #ebebeb; width: 100%; height: 50px; color:#9c9c9c; display: grid; align-items: center;position: relative;cursor:pointer;}
	ul.list-domain-result li p{ display: flex; align-items: center; color:#9c9c9c }
	ul.list-domain-result li:hover{background: #efefef;cursor:pointer;}
	ul.list-domain-result li.list-unavailable p:before{content: "";background: url(/images/searchbox/ico_unavailable.svg) no-repeat; background-size:contain;width: 14px; height: 14px; margin: 8px; display: block }
	ul.list-domain-result li.list-available p:before{content: "";background: url(/images/searchbox/ico_available.svg) no-repeat;background-size: contain; width: 14px; height: 14px; margin: 8px; display: block }
	ul.list-domain-result li p:after{content: attr(data-domain-type); color:#47B549;}
	ul.list-domain-result li a:before{content: attr(data-price); }
	ul.list-domain-result li.list-unavailable a{color:#2A3A91;}
	ul.list-domain-result li.list-available a{color:#47B549;}
	ul.list-domain-result li.list-unavailable p:after{content: attr(data-domain-type); color:#9c9c9c;}
	ul.list-domain-result li.premium{display: flex;}
	ul.list-domain-result li.premium p:after{content: attr(data-domain-type); color:#3C3C3C;}
	ul.list-domain-result li.special p:after{content: attr(data-domain-type); color:#704CBB;}
	ul.list-domain-result li.premium .domaintype-tag:before{content: "premium"; background:#3C3C3C; color: #fff; display:block;padding:0 3px;border-radius:3px; font-size: 12px; font-style: normal; margin: 0 5px}
	ul.list-domain-result li.special .domaintype-tag:before{content: "sepcial"; background:#704CBB; color: #fff; display:block;padding:0 3px;border-radius:3px; font-size: 12px; font-style: normal; margin: 0 5px}

	#promo-box{display: flex; flex-direction: row; padding: 10px 0; align-items: center; margin: 0 auto; width:98%; }

	@media screen and (min-width:1200px) {
	#header{ width: 100%;position: relative;height: auto;}
	#navigation{ width: 1200px; height: 90px; padding: 0; margin: 0 auto;}
	#navigation ul{display: flex; justify-content: space-between; margin: 0 4rem}
	#navigation ul li{ display: grid;flex:row; line-height: 90px;}
	#panel-search, #promo-box{ width: 1200px; position: relative; margin: 0 auto}
	#ui-search:before{color: #fff; position: absolute; margin:38px}
	#ui-search.en:before{content: "Domain Registration";}
	#ui-search.zh:before{content: "域名註冊";}

	#panel-search-result{/*position: absolute; width: 60%;margin:90px 20%*/}
	div.toggle-select{width: 62%; margin: 0 20%;padding: 8px}
	div.toggle-select input{padding:20px 10px; margin:0}
	#ui-search.selected div.toggle-select{padding: 8px; }
	.btn_expand{position: absolute; right:20px;top:38px;margin: auto}

	}

	/*Loading*/
	.list-loading {display: inline-block;width: 40px;height: 40px}
	.list-loading:after {content: " ";display: block;width: 12px;height: 12px;margin: 8px;border-radius: 50%;border: 1px solid #47B549;border-color: #47B549 #47B549 #47B549 transparent;animation: ani-loading 1.2s linear infinite}
	@keyframes ani-loading {
	  0% {
		transform: rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg);
	  }
	}