@import "skin/@{skinBase}.less";

/*

	documents_userLogin.css

*/
@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/roboto/Roboto-Regular-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/google/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Regular-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/roboto/Roboto-Italic-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-Italic-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Italic-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/roboto/Roboto-Bold-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-Bold-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Bold-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/roboto/Roboto-BoldItalic-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-BoldItalic-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-BoldItalic-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../../fonts/roboto/Roboto-Medium-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-Medium-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Medium-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Light'; 
    src: url('../../fonts/roboto/Roboto-Light-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-Light-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Light-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Thin'; 
    src: url('../../fonts/roboto/Roboto-Thin-webfont.eot'); /* IE9 Compat Modes */
    src: url('../../fonts/roboto/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/roboto/Roboto-Thin-webfont.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/roboto/Roboto-Thin-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

html,body {
	font-family: 'Roboto';
	margin: 0px;
	width: 100%;
	height: 100%;
	/*line-height:0px;*/
	
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	/* No support for these yet, use at own risk */
	-o-user-select: none;
	user-select: none;  
}

input {
	font-family: 'Roboto';
	cursor: default;
	outline: none;
}

label {
	float: left;
}

.table {
	display: table;
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
}

.inline-table {
	display: inline-table;
}

.cell-padding {
	width: 30px;
}

#headAndfields {
	background-color: @login-background-color;
	vertical-align: top;
}

.labelField {
  padding-left: 11px;
  text-align: left;
  vertical-align: middle; 
}
.labelField, input {

	background-color: @login-field-background-color;
	cursor:default;
}

.labelText {
	color: @login-font-color;
}
.shadow{
	.skinShadow;
}

#loginTableRow {
	height: 100%;
	width: 100%;
}

.mobile #login {
  font-size: 16px;
}

#loginWrapper {
	text-align: center;
	vertical-align: middle;
}

#headerText {
	opacity: @login-header-font-opacity;
	color: @login-header-font-color;
	font-weight: 600;
}

#headerVersion {
	color: @login-header-version-font-color;
	opacity: @login-header-version-opacity;
	font-weight: bold;
	font-family: Roboto;
}

#loginHeaderImage {
	width: 100%;
	height: 120px;
	border-bottom: @login-header-border-color solid 1px;
	border-top: @login-header-border-color solid 1px;
	line-height: 120px;
	text-align: left;
	padding-top: 1px;
	box-sizing: border-box;
	font-size: 24pt;
	letter-spacing: -0.1px;
	font-family: Roboto-Light;
	color: white;
}

.loginHeaderBgImage {
	padding-left: 111px;
	background: url('../../img/documents/skin/@{login-skin}/shared/login/@{loginHeaderImage}') no-repeat;
	border-bottom: @login-header-image-border-color solid 1px;
	border-top: @login-header-image-border-color solid 1px;
}
.loginHeaderNoBgImage {
	padding-left: 32px;
}

#formLogin {
	padding: 29px 35px;
}

#formLogin .table-row {
	height: 40px;
}

#userLogin,#userPassword {
	padding: 11px 14px;
}

.leftField {
	/*border-left: 1px solid black;*/
	box-shadow: -1px 0 0 0 @login-field-outer-border2-color;
}

.rightField {
	/*border-right: 1px solid black;*/
	box-shadow: 1px 0 0 0 @login-field-outer-border2-color;
}

.topField {
	border-top:1px solid @login-field-outer-border2-color;
	border-bottom: 1px solid @login-field-inner-border-color;
}

.bottomField {
	border-top: 1px solid @login-field-inner-border-color;
	border-bottom:1px solid @login-field-outer-border2-color;
}

#passwordInput, #loginInput {
	vertical-align: middle;
}

#login,#password {
	border: none;
	background: none;
	width:135px;
	color: @login-font-input-color;
	font-size: 16px;
}

#buttonLoginDiv {
	vertical-align: top;
}

#buttonLogin {
	font-size: 18px;
	line-height: 32px;
	height: 40px;
	background-color: @login-button-background-color;
	color: @login-button-font-color;
	font-family: 'Roboto';
	width: 175px;
	border: solid @login-button-border-color 1px;
}

#buttonLogin:hover {
	background-color: @login-button-background-color-hover;
}

#autoLoginDiv {
	padding: 14px 0px 0px 0px;
}

#autoLoginDiv>div {
	width: 1px;
}

#autoLoginDiv>div>div {
	width: 250px;
}

.autoLoginRow {
	height: auto;
}

#autoLogin+label {
	cursor: default;
}

#autoLogin {
	display: none;
}

#autoLoginDiv .otrCBChk {
	margin: -1px 0px 0 0;
	border: 2px solid @login-field-background-color;
	color: @login-button-background-color;
}

#autoLoginDiv .otrCBLabel {
	color:  @login-autologin-font-color;
	font-size: 12px;
}

#loginCompanyImage {
	width: 191px;
	height: 288px;
}

#loginError {
	height: 20px;
	color: white;
	font-size: 12px;
	text-align: left;
	padding: 5px 0px 5px 38px;
	vertical-align: middle;
}

.loginError {
	background-color: @login-error-background-color;	
}

/*overrides jquery.selectmenu() styles */
.selectmenu .ui-selectmenu-button, .selectmenu .ui-selectmenu-button.ui-selectmenu-disabled:hover {
	border: medium none;
	background: @login-field-background-color;
	color: @login-font-color;
	height: 100%;
	text-align: left;
	vertical-align: middle;
	border-radius: 0;
	font-size: 100%;
	font-family: 'Roboto';
	cursor: pointer;
	opacity: 1;
}

.selectmenu .ui-selectmenu-button:hover {
	background: @login-field-background-color-hover;
}

li.ui-menu-item .ui-state-focus, li.ui-menu-item.ui-state-focus {
	background: @login-field-background-color-focus;
	color: @login-font-color;
	border-top-color: @login-field-background-color-focus;
}

li.ui-menu-item, li.ui-menu-item a{
	background: @login-field-background-color;
	color: @login-font-color;
	border: none;
	border-radius: 0;
	font-family: 'Roboto';
	font-size:16px;
}

div.ui-selectmenu-menu > ul.ui-widget-content {
  border: @login-field-inner-border-color;
  border-radius:0;
  overflow: hidden;
}

.otrContextMenu.ui-widget-content {
  border: @login-field-inner-border-color;
}

.selectmenu span.ui-selectmenu-text {
	text-align: left;
	line-height: 25px;
}

#language-button {
	border-top: 1px solid @login-field-outer-border2-color;
	border-bottom:1px solid @login-field-inner-border-color;
}
.single #language-button {
	border-bottom:1px solid @login-field-inner-border-color;
}

#mode-button{
	border-bottom: 1px solid @login-field-outer-border2-color;
	border-top: 1px solid @login-field-inner-border-color;
}

.single #mode-button {
	border-top: 1px solid @login-field-outer-border2-color;
}

#language-button, #mode-button{
	box-shadow:1px 0 0 0 black, -1px 0 0 0 @login-field-outer-border2-color;
}

div.ui-selectmenu-menu>ul.ui-widget-content {
	background: @login-background-color;
	color: @login-font-color;
	padding: 0;
}
.ui-menu .ui-menu-item {
  overflow: hidden;
}
.ui-selectmenu-open {
  border: solid @login-field-outer-border2-color 1px;
}

div.ui-selectmenu-menu a {
	color: @login-font-color;
}

ul li:hover {
  cursor: default;
}

.ui-menu .ui-menu-item {
  padding: 10px;
}


#licenceFooter {
  width: 100%;
}

#licenceFooter span {
  position: absolute;
  padding-top: 2px;
  color: @login-license-font-color;
  cursor: default;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0px);
}

.loginScreen {
	background: url('../../img/documents/skin/@{login-skin}/shared/login/@{loginBackgroundImage}') no-repeat;background-size: 100% 100%;
}


#loginCompanyImage {
	background: url('../../img/documents/skin/@{login-skin}/shared/login/@{loginCompanyImage}') no-repeat;
	background-position: 0px 0px;
}