@font-face {
  font-family: 'Ubuntu';
  font-weight: 400;
  font-style: normal;
  src: url('../../fonts/Ubuntu-regular/Ubuntu-regular.eot');
  src: url('../../fonts/Ubuntu-regular/Ubuntu-regular.eot?#iefix') format('embedded-opentype'),
       local('Ubuntu'),
       local('Ubuntu-regular'),
       url('../../fonts/Ubuntu-regular/Ubuntu-regular.woff2') format('woff2'),
       url('../../fonts/Ubuntu-regular/Ubuntu-regular.woff') format('woff'),
       url('../../fonts/Ubuntu-regular/Ubuntu-regular.ttf') format('truetype'),
       url('../../fonts/Ubuntu-regular/Ubuntu-regular.svg#Ubuntu') format('svg');
}

@font-face {
  font-family: 'Ubuntu';
  font-weight: 500;
  font-style: normal;
  src: url('../../fonts/Ubuntu-500/Ubuntu-500.eot');
  src: url('../../fonts/Ubuntu-500/Ubuntu-500.eot?#iefix') format('embedded-opentype'),
       local('Ubuntu Medium'),
       local('Ubuntu-500'),
       url('../../fonts/Ubuntu-500/Ubuntu-500.woff2') format('woff2'),
       url('../../fonts/Ubuntu-500/Ubuntu-500.woff') format('woff'),
       url('../../fonts/Ubuntu-500/Ubuntu-500.ttf') format('truetype'),
       url('../../fonts/Ubuntu-500/Ubuntu-500.svg#Ubuntu') format('svg');
}

@font-face {
  font-family: 'Ubuntu';
  font-weight: 400;
  font-style: italic;
  src: url('../../fonts/Ubuntu-italic/Ubuntu-italic.eot');
  src: url('../../fonts/Ubuntu-italic/Ubuntu-italic.eot?#iefix') format('embedded-opentype'),
       local('Ubuntu Italic'),
       local('Ubuntu-italic'),
       url('../../fonts/Ubuntu-italic/Ubuntu-italic.woff2') format('woff2'),
       url('../../fonts/Ubuntu-italic/Ubuntu-italic.woff') format('woff'),
       url('../../fonts/Ubuntu-italic/Ubuntu-italic.ttf') format('truetype'),
       url('../../fonts/Ubuntu-italic/Ubuntu-italic.svg#Ubuntu') format('svg');
}

@font-face {
  font-family: 'Ubuntu';
  font-weight: 500;
  font-style: italic;
  src: url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.eot');
  src: url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.eot?#iefix') format('embedded-opentype'),
       local('Ubuntu Medium Italic'),
       local('Ubuntu-500italic'),
       url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.woff2') format('woff2'),
       url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.woff') format('woff'),
       url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.ttf') format('truetype'),
       url('../../fonts/Ubuntu-500italic/Ubuntu-500italic.svg#Ubuntu') format('svg');
}
body { padding:20px; background-color:#222; font-family:Ubuntu,Helvetica,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input { outline:none; }
input[type=text], input[type=password] { font:15px Ubuntu,Helvetica,sans-serif; border-radius:3px; border:none; padding:10px; background-color:#FFF; color:#CCC; width:206px; margin:0 0 8px 0; }
input[type=text]:active, input[type=text]:focus, input[type=password]:active, input[type=password]:focus { outline:none; color:#666; }
a { color:inherit; text-decoration:none; }
a:visited { color:inherit; }
a:hover { color:inherit; }
a:active { color:inherit; }
#login-form { text-align:center; width:480px; height:270px; margin-left:-240px; left:50%; top:50%; margin-top:-135px; position:absolute; }
#login-left { margin-right:30px; padding-right:30px; height:100%; float:left; }
#forgot-form { width:570px; height:218px; margin-left:-285px; left:50%; top:50%; margin-top:-109px; position:absolute; }
#forgot-left { margin-bottom:28px; }
#reset-form { width:704px; height:174px; margin-left:-352px; left:50%; top:50%; margin-top:-87px; position:absolute; }
#login-button { line-height:14px !important; font:14px Ubuntu,Helvetica,sans-serif; border:none; border-radius:3px; padding: 11px 26px 12px 26px; background-color:#2FA732; color:#FFF; font-weight:400; cursor:pointer; width:226px; margin-top:10px; }
	#login-button:hover { background-color: #2f9732; }
	#login-button:active { }
    #forgot-form #login-button { margin-top:0; }
#top-container { position:absolute; top:20px; right:20px; min-width: 200px; z-index: 1; }
.top-button { border: 1px solid #272727; float:right; margin-left:5px; color:#6F6F6F; padding:9px 20px; display:block; background-color:#1A1A1A; border-radius:4px; cursor:pointer; font-size:14px; }
	.top-button:hover { background-color: #000; }
	.top-button:active { background:#000; }
	a.top-button:visited { color:#6F6F6F; }
	a.top-button:hover { color:#6F6F6F; }
	a.top-button:active { color:#6F6F6F; }
#select-lang { padding:9px 10px; }
	#select-lang.active #langs { display:block; }
	#select-lang.active { background:#1A1A1A; }
	#select-lang.active:hover { background:#1A1A1A; }
	#select-lang.active:active { background:#1A1A1A; }
	#select-lang .item  { padding-bottom:3px; padding-top:3px; cursor:pointer; display:block; font-size:12px; }
	#select-lang .item:hover { color:#A2A2A2; }
#active-lang { text-align:right; }
	#langs { display:none; margin-top:8px; }
	#langs .group { float:left; margin-right:17px; }
	#langs .group:last-child { margin-right:0; }
#login-logo { margin:0 auto; width:165px; height:50px; background-image:url('../../images/pre-login/countly-logo.svg'); background-repeat: no-repeat; background-size: contain; }
#forgot-logo { margin:0 auto; width:180px; height:55px; background-image:url('../../images/pre-login/countly-logo.svg'); background-repeat: no-repeat; background-size: contain; }
#create-account { overflow:auto; }
	#create-account div { float:left; margin-right:10px; }
	#create-account div:last-child { margin-right:0; }
#message { position:absolute; top:50px; text-align:center; left:50%; width:400px; margin-left:-200px; color:#A7A7A7; font:18px Ubuntu,Helvetica,sans-serif; }
#forgot-password { color:#666; font-size:13px; cursor:pointer; transition:color 1s; }
	#forgot-password:hover { color:#2f9732; transition:color 1s; }

body.mobile { padding-top:0; min-height:300px; }

.mobile #login-form { background-image: none; height:210px; width:300px; margin-left:-150px; margin-top:-105px; }
.mobile #login-logo { margin: 0 auto; }
.mobile #login-left { float:none; margin:0 auto; margin-bottom:30px; padding:0; width:250px; text-align: center; }
.mobile #login-right { margin:0 auto; width:250px; text-align: center; }