body{padding:0;margin:0;text-align:center;}
body, td, textarea{font-size:15px;font-family:arial,sans-serif;}

#page{width:980px;margin:0 auto;text-align:left;background:#f8f8f8;transition:margin 500ms;min-height:500px;}

#header{padding:5px 0;margin-bottom:10px;border-bottom:solid 1px #dedede;position:relative;background:#ffffff;}

#weblogo_light,#weblogo_dark{height:50px;margin-left:10px;}
#weblogo_light{display:inline-block;}
#weblogo_dark{display:none;}

#logo_light,#logo_dark{display:none;}

#menu{position:absolute;top:23px;right:10px;font-size:16px;}
.menuitem{display:block;float:left;margin-right:20px;border-bottom:solid 2px transparent;padding-bottom:3px;}
.menuitem.current{border-color:#dedede;}
.menuitem, .menuitem:link, .menuitem:hover, .menuitem:visited{text-decoration:none;color:#666666;}
.menuitem:hover{color:#000000;}

.cwidth{padding:0 15px;}
.wcwidth{}
.nwidth{width:80%;margin:0 auto;}
.clear{clear:both;}

#web_login{display:table;width:100%;height:100vh;}
#web_login_banner,#web_login_form{display:table-cell;vertical-align:top;}
.web_login_banner_content{text-align:center;padding-top:100px;}
#web_login_banner{width:60%;}
#web_login_form{width:40%;}

#app_tagline{font-size:32px;padding-bottom:60px;font-family:Georgia,serif;}
#app_cover{width:90%;max-width:700px;margin:0 auto;opacity:0.7;}

#web_login_banner{background:#ffffff;}
#web_login_form{background:#f0f0f0;}

p{line-height:1.5em;}
p.first{padding-top:50px;}
ul{line-height:1.8em;}

button{padding:8px 15px;;border:solid 1px #444444;border-radius:5px;cursor:pointer;}


.chat_product_tile{width:80px;margin:10px;cursor:pointer;display:inline-block;border:solid 1px #dedede;overflow:hidden;border-radius:10px;vertical-align:middle;}
.chat_product_tile img{display:block;width:100%;}

.botchat{text-align:left;position:fixed;width:45%;max-width:850px;right:0;bottom:50px;}
.botchat_{margin-right:10px;max-height:90vh;background:#ffffff;border:solid 1px #444444;border-radius:5px;overflow:auto;box-shadow:0 0 2px #111111;}

#chat_more{margin:10px;}
#chatlines{margin:10px;}

.botchat.init_chat{width:auto;}
	.botchat.init_chat #chat_hello{display:none;}
	.botchat.init_chat #chat_adder{display:none;}

	.botchat.init_chat .botchat_{margin-bottom:20px;border:none;background:transparent;box-shadow:none;}


.chatstart{text-align:center;padding:10px;display:none;}

	.botchat.init_chat .chatstart{display:block;}

.chatbubble{border:solid 1px #dedede;box-sizing:border-box;padding:10px;width:70%;margin:10px;clear:both;line-height:1.4em;}
.chatbubble.from_agent{margin-right:25%;border-radius:10px 10px 10px 0;}
.chatbubble.from_user{margin-left:25%;}

#chatstarter{box-shadow:0 0 4px #000000;padding:16px 20px;}

.botchat_wait{width:24px;height:24px;vertical-align:middle;filter:hue-rotate(150deg);}

.botchatresolver{
	display:block;border:solid 1px #848cf7;border-radius:100%;cursor:pointer;text-align:center;box-sizing:border-box;float:left;
	margin-bottom:5px;margin-right:5px;width:27px;height:27px;
	filter:hue-rotate(245deg);
}
.botchatresolver_{
	font-size:8px;display:block;margin:3px;border-radius:100%;width:20px;height:20px;overflow:hidden;box-sizing:border-box;
	background:transparent url(app/imgs/chaticons.gif) no-repeat 0 0;
	background-size:640px 40px;
	transition:all 300ms;
}
.botchatresolver:hover .botchatresolver_{margin:0;width:26px;height:26px; background-size:832px 52px;background-position:0 0;}

.botchatresolver_.func_who_am_i{background-position:-80px 0;}
.botchatresolver:hover .botchatresolver_.func_who_am_i{background-position:-104px 0;}

.botchatresolver_.func_my_order_info{background-position:-100px 0;}
.botchatresolver:hover .botchatresolver_.func_my_order_info{background-position:-130px 0;}

.botchatresolver_.func_product_finder{background-position:-40px 0;}
.botchatresolver:hover .botchatresolver_.func_product_finder{background-position:-52px 0;}

.botchatresolver_.func_product_knowledge{background-position:-60px 0;}
.botchatresolver:hover .botchatresolver_.func_product_knowledge{background-position:-78px 0;}

.botchatresolver_.func_topic_details{background-position:-20px 0;}
.botchatresolver:hover .botchatresolver_.func_topic_details{background-position:-26px 0;}

.botchatresolver_.func_date_time{background-position:-220px 0;}
.botchatresolver:hover .botchatresolver_.func_date_time{background-position:-286px 0;}

.botchatbubble .codesnippet{margin:10px;padding:5px;border:dotted 1px #66ff66;color:#008800;}


#mmenu{
	position:fixed;
	top:0;right:-70%;
	width:70%;
	text-align:left;
	transition:right 500ms;
	background:#111111;
	height:100%;
}

#mmenu_{
	padding:20px 20px;padding-top:40px;
	color:#ffffff;	
}

.mmenuitem{display:block;border-bottom:solid 1px #666666;text-align:center;padding-bottom:10px;margin-bottom:10px;transition:color 320ms;margin-left:10px;margin-right:10px;}
.mmenuitem, .mmenuitem:hover, .mmenuitem:visited, .mmenuitem:link{text-decoration:none;color:#999999;}
.mmenuitem:hover{color:#ffffff;}
.mmenuitem.current{color:#ffffff;}

#mtrigger{position:absolute;top:14px;right:20px;display:none;cursor:pointer;}
#mtrigger img{border:none;width:28px;}

#copyright{text-align:center;padding:10px 0;background:#444444;color:#ffffff;margin-top:40px;}
#logincopyright{padding:10px 0;margin-top:40px;display:none;}

#footerlinks{display:inline-block;margin-left:15px;}

.footerlink, .footerlink:hover, .footerlink:visited{text-decoration:underline;}
#copyright .footerlink, #copyright .footerlink:hover, #copyright .footerlink:visited{color:#ffffff;}
#logincopyright .footerlink, #logincopyright .footerlink:hover, #logincopyright .footerlink:visited{color:#444444;}

#yubikeysetup a, #yubikeysetup a:hover, #yubikeysetup a:link, #yubikeysetup a:visited{text-decoration:none;color:#187CA6;}
#yubikeysetup a:hover{text-decoration:underline;}

#loginbox__{margin-top:140px;margin-left:20px;margin-right:20px;}
#loginbox_{padding:10px;}
#loginbox{text-align:left;}
.powered{display:none;}
.loginbutton_,.loginbutton{color:#ffffff;background:#187CA6;padding:8px 20px;border-radius:3px;border:none;cursor:pointer;box-shadow:0px 1px 2px #c9c9c9;-webkit-appearance:none;text-decoration:none;}
.loginbutton_:focus, .loginbutton_:hover{background:#29ABE1;}
.loginbutton_:active, #loginbuttonbutton:active{box-shadow:1px 1px 3px #999999;}

#fingerprint{cursor:pointer;vertical-align:middle;}
#fingerprint img{width:22px;margin-right:-10px;filter:saturate(0.4);}
#fingerprint img:hover{filter:saturate(1);}

#cardlink, #passlink{display:none;text-align:center;padding-top:10px;}
#cardlink{display:none;}
#cardinfo{padding:5px;font-size:12px;padding-left:26px;background:#fcfcdd url(app/imgs/smartcard.png) no-repeat 5px 50%;margin-bottom:10px;display:none;}

.lfinp,.lfsel{border:solid 1px #999999;display:block;margin-bottom:5px;border-radius:3px;}
.lfinp:active, .lfinp:focus, .lfsel:active, .lfsel:focus{outline:0;border:solid 2px #29ABE1;}
.lfinp{font-size:18px;-webkit-appearance:none;}
.lfsel{font-size:15px;}

#lang{padding:5px 0;}

.passtoggle{position:absolute;top:12px;right:8px;width:18px;cursor:pointer;}

.codesnippet{width:100%;height:180px;max-width:600px;}

/* ----------------- */
@media screen and (min-width:20px){
	#page{width:100%;max-width:2000px;}
	.cwidth{padding:0 20px;margin:0 auto;max-width:1240px;}
	.wcwidth{margin:0 auto;max-width:1480px;}
	
	.lfinp{padding:5px;box-sizing:border-box;height:34px;line-height:32px;font-size:15px;}
	
}

@media screen and (max-width:1240px){
	#page{margin-left:0;}
}
/* ----------------- */

@media screen and (max-width:900px){
	.botchat{width:55%;max-width:auto;}	
}

@media screen and (max-width:810px){
	#web_login{display:block;height:auto;}
	#web_login_banner,#web_login_form{display:block;}
	#app_tagline{padding-bottom:30px;}
	#app_cover{display:none;}
	#web_login_banner{width:auto;}
	#web_login_form{width:auto;}
	
	#loginbox__{margin-top:60px;}	
}

@media screen and (max-width:630px){
	#menu{display:none;}
	#mtrigger{display:inline;}
	p.first{padding-top:20px;}	
}

@media screen and (max-width:520px){
	.botchat{width:80%;}	
}

@media screen and (max-width:460px){
	.botchat{width:90%;}	
}

@media screen and (max-width:400px){
	#loginbox__,.powered{width:90%;}
	#loginbox__{margin-top:50px;}
	#weblogo_light,#weblogo_dark{height:40px;}
}

@media screen and (max-width:300px){
	.loginbutton_{width:auto;padding-left:15px;padding-right:15px;}
}

@media screen and (max-width:260px){
	.powered{text-align:center;}
	.powered span{display:block;padding-top:3px;}
}

@media (prefers-color-scheme:dark) {
	body{background:#21262D;color:#e0e0e0;}

	.botchat_{background:#21262D;border:solid 1px #444444;border-radius:5px;overflow:auto;box-shadow:0 0 2px #111111;}
	
	#chatprompt textarea{background:#21262D;color:#ffffff;}
	
	#page{background:#0D1117;}
	#header{background:#21262D;border:none;}
	
	#weblogo_light{display:none;}
	#weblogo_dark{display:inline-block;}
	
	#app_cover{filter:invert(1);}

	.menuitem, .menuitem:link, .menuitem:hover, .menuitem:visited{color:#dcdcdc;}
	.menuitem:hover{color:#ffffff;}
	
	#loginbox{background:#0D1117;color:#C9D1D9;}
	input,#lang{background:#0D1117;color:#C2C3C5;}
	.loginbutton_{box-shadow:none;border:solid 1px #388BFD;}
	.loginbutton_:hover{background:#125B7A;}
	.powered{color:#8B949E;}
	#fingerprint,.passtoggle{filter:invert(1) hue-rotate(180deg);}
	.passtoggle{filter:invert(1);}
	#yubikeysetup a, #yubikeysetup a:hover, #yubikeysetup a:link, #yubikeysetup a:visited{text-decoration:none;color:#29ABE1;}	
	
	#web_login_banner{background:#21262D;}
	#web_login_form{background:#0D1117;}
	
	#copyright{background:transparent;border-top:solid 1px #444444;}
	#logincopyright .footerlink, #logincopyright .footerlink:hover, #logincopyright .footerlink:visited{color:#dedede;}
	
	.codesnippet{background:#222222;color:#ffffff;}
}