/* INCLUDE AS <Static> */

/*=====================================================================================*/
/* Static */
/*=====================================================================================*/

html, body { position:relative; width:100%; margin:0; padding:0; font-family:Arial; }

body { background:#e7e6ee; display:flex; flex-direction:column; align-items:center; height:auto; overflow:auto; }

#center-column { flex-grow:1; display:flex; justify-content:center; align-items:center; }

#box { flex-grow:1; display:inline-block; position:relative; margin:1em auto; justify-content:center; padding-bottom:20px; }
#box svg { max-width:80vw; max-height:80vh; width:auto; min-height:560px; filter:drop-shadow(2px 2px 2px #888); }

#box .form { width:70%; }
#box .form .animating { position:absolute; }

#box .form h3 { font-size:1.4em; margin-top:0; }
#box .form > div:first-child { margin-top:2em; }
#box .form > div { font-size:1.4em; margin-top:0.4em; }
#box .form > div:last-child { margin-bottom:2em; margin-top:1em; }

#box .buttons { display:inline-block; margin-top:4em; padding-right:2em; float:right; }
#box .buttons button { white-space:nowrap; padding:0 1em; }

#controls { display:flex; justify-content:center; align-items:center; }

#showError:hover { text-decoration:underline; }

#box button { border:none; height:2em; color:white; }
#box button:focus { outline:1px dotted white; -webkit-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; }

#copyright { flex-grow:0; color:#888; width:auto; font-size:0.8em; text-align:center; padding-bottom:40px; }

#portal-link { width:23%; height:23%; position:absolute; top:6%; left:17.75%; border-radius:50%; }

.caller-info.with-picture { padding-left: 4em; position:relative; min-height:4em; }
.caller-info.with-actions { padding-right: 2em; position:relative; } 
.caller-info .actions { position:absolute; top:0; right:0; }
.caller-info .actions .btn { background:none; color: white; }
.caller-info .profile-picture { position:absolute; top:0; left:0; }
.caller-info .profile-picture .thumbnail { width:4em; background-color:transparent; border:none; height:4em; }
.caller-info .address,
.caller-info .customerno,
.caller-info .organisation { font-size:80%; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
	form { font-size:0.8em; }
	#box svg { max-width:100vw; max-height:60vh; }
}

body svg .circle { display:none; }
body svg .button { display:none; }

body.MEC svg #circleMEC,
body.Billing svg #circleBilling,
body.Admin svg #circleAdmin,
body.WebPortal svg #circleWebPortal,
body.NewsApp svg #circleNewsApp,
body.MBC svg #circleMBC,
body.RIA svg #circleRIA,
body.CRM svg #circleCRM,
body.BP svg #circleContacts,
body.DCC svg #circleDCC,
body.Porter svg #circlePorter	{ display:inherit; }

body.MEC svg #btnMEC,
body.Billing svg #btnBilling,
body.Admin svg #btnAdmin,
body.WebPortal svg #btnWebPortal,
body.NewsApp svg #btnNewsApp,
body.MBC svg #btnMBC,
body.RIA svg #btnRIA,
body.CRM svg #btnCRM,
body.BP svg #btnContacts,
body.DCC svg #btnDCC,
body.Porter svg #btnPorter { display: inherit; }

#box {
	-webkit-animation: appear 0.5s ease 0s 1 normal ;
	animation: appear 0.5s ease 0s 1 normal ;
}
#languages, #copyright
{
	-webkit-animation: appear-simple 2.5s ease 0s 1 normal ;
	animation: appear-simple 2.5s ease 0s 1 normal ;
}

@-webkit-keyframes appear {
  0%{
	opacity: 0;
	-webkit-transform: scale3d(0.3, 0.3, 0.3);
	transform: scale3d(0.3, 0.3, 0.3);
  }
  100%{
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
  }
}

@keyframes appear {
  0%{
	opacity: 0;
	transform: scale3d(0.3, 0.3, 0.3);
  }
  100%{
	opacity: 1;
	transform: scale3d(1,1,1);
  }
}

@-webkit-keyframes appear-simple { 0%{ opacity: 0; } 20%{ opacity:0; } 100%{ opacity: 1; } }
@keyframes appear-simple { 0%{ opacity: 0; } 20%{ opacity:0; } 100%{ opacity: 1; } }