@font-face
{
  font-family: 'Fabasoft Sans';
  src:
    local('FabasoftSans-Regular'),
    url('../fonts/FabasoftSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'Fabasoft Sans';
  src:
    local('FabasoftSans-RegularItalic'),
    url('../fonts/FabasoftSans-RegularItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face
{
  font-family: 'Fabasoft Sans';
  src:
    local('FabasoftSans-Bold'),
    url('../fonts/FabasoftSans-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
@font-face
{
  font-family: 'Fabasoft Sans';
  src:
    local('FabasoftSans-BoldItalic'),
    url('../fonts/FabasoftSans-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}
@font-face
{
  font-family: 'Fabasoft Sans UX';
  src:
    local('FabasoftSansUX-Regular'),
    url('../fonts/FabasoftSansUX-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'Fabasoft Sans UX';
  src:
    local('FabasoftSansUX-RegularItalic'),
    url('../fonts/FabasoftSansUX-RegularItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face
{
  font-family: 'Fabasoft Sans UX';
  src:
    local('FabasoftSansUX-Bold'),
    url('../fonts/FabasoftSansUX-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
@font-face
{
  font-family: 'Fabasoft Sans UX';
  src:
    local('FabasoftSansUX-BoldItalic'),
    url('../fonts/FabasoftSansUX-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}
@font-face
{
  font-family: 'Open Sans';
  src:
    local('OpenSans-Light'),
    url('../fonts/OpenSans-Light-webfont.woff') format('woff');
  font-weight: 300; /* lighter */
  font-style: normal;
}
@font-face
{
  font-family: 'Open Sans';
  src:
    local('OpenSans-Regular'),
    url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

HTML
{
  width: 100%;
  height: 100%;
}
BODY
{
  font-family: 'Fabasoft Sans UX', 'Fabasoft Sans', 'Open Sans', sans-serif;
  font-weight: normal;
  font-size: 12pt;
  width: 100%;
  height: 100%;
  color: #000;
  margin: 0;
}

BODY.MotokyThemeCustom
{
  color: #000000;
}
*, *::after, *::before
{
  box-sizing: border-box;
}

A
{
  color: #000;
  text-decoration: underline;
}

A#copyright
{
  text-decoration: none;
}

BODY.MotokyThemeCustom A
{
  color: #000000;
}

BODY.MotokyThemeInvisible {
  opacity: 0;
}

A:hover:not(#logo)
{
  text-decoration: underline;
  opacity: 0.7;
}
A:active, A:hover
{
  outline: 0px none;
}

IMG
{
  border: none;
}

BUTTON,
INPUT,
SELECT,
TEXTAREA 
{
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

BUTTON,
INPUT[type="submit"],
INPUT[type="button"],
INPUT[type="reset"]
{
  -webkit-appearance: button;
  cursor: pointer;
}

BUTTON.inlineButton
{
  background-color: transparent;
  border: none;
  display: inline;
  padding: 0;
  text-decoration: underline;
  color: #000;
}

BODY.MotokyThemeCustom BUTTON.inlineButton
{
  color: #000000;
}


BUTTON.inlineButton:hover,
BUTTON.inlineButton:focus
{
  text-decoration: underline;
}

/* default colors for page */
.MotokyThemeBg {
  background-image: url(/idp/files/images/background/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

BODY.MotokyThemeCustom .MotokyThemeHeader, 
BODY.MotokyThemeCustom #header.MotokyThemeHeader {
  border: 1px solid #333332;
  border-bottom: transparent;
}


.MotokyThemeFg, BUTTON.MotokyThemeFg.inlineButton {
  color: var(--motoky-fg-color, #FFFFFF) !important;
}

.MotokyThemeHeader, #header.MotokyThemeHeader {
  background-color: var(--motoky-bg-color, #266AFE);
}

.MotokyThemeFg.Support:hover {
  background-color: var(--motoky-shade-color, #0045fe);
}

div.MotokyThemeBg {
  background-image: var(--motoky-bg-image, url(/idp/files/images/background/background.jpg)); 
}

.MotokyThemeFg.inlineButton {
  color: #FFFFFF;
  text-decoration: none;
}

/* Page elements like header, footer, logo */
#page
{
  min-height: 100%;
  position: relative;
}

BODY.MotokyThemeCustom #page
{
  background-image: none;
  color: #000000;
}

@media (max-width: 649px),  (max-height: 649px)
{
  BODY.MotokyThemeCustom #page
  {
    background-color: #f9f8f6;
  }
}


#header
{
  background-color: #266AFE;
  border: 1px solid #b2b2af;
  border-bottom: transparent;
  border-radius: 12px 12px 0 0;
  margin: 0 auto;
  opacity: 0.9;
  padding: 48px 0 28px 0;
  position: relative;
  width: 500px;
}

#header .Logo
{
  margin: 0 auto;
  position: relative;
}

#logo
{
  display: block; 
  margin: 0 auto;
  text-align: center;
}

#logo IMG
{
  max-height: 60px;
  max-width: 300px;
}

#content
{
  width: 100%;
  display: block;
  padding-top: 170px;
  margin: 0 auto;
  text-align: center;
}

#footer
{
  background-color: #f2f1ed;
  border-top: 1px solid #b2b2af;
  bottom: 0px;
  color: #000;  /*delete?*/
  font-size: 14px;
  line-height: 50px;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

BODY.MotokyThemeCustom #footer{
  background: none repeat scroll 0% 0% #cccbc8;
  border-top: 1px solid #b2b2af;
  color: #000;  /*delete?*/
}

#footer .Center
{
  text-align: center;
}
/* Tablet */
@media (max-height: 979px)
{
  #content
  {
    padding-top: 75px;
  }
}

@media (max-height: 849px)
{
  #header
  {

  }
  
  #content
  {
    padding-top: 75px;
  }
}

/* Tablet */
@media (max-width: 1399px), (max-height: 699px)
{
  #content
  {
    padding-top: 50px;
    padding-bottom: 60px;
  }
}

/* Phone */
@media (max-width: 649px), (max-height: 649px)
{
  .MotokyThemeBg
  {
    background-image: none !important;
  }
  
  #header
  {
    padding: 38px 0 18px 0;
    width: 100%;
    border: none;
    opacity: 1;
  }
  BODY.MotokyThemeCustom .MotokyThemeHeader, 
  BODY.MotokyThemeCustom #header.MotokyThemeHeader, 
  .MotokyThemeHeader, #header.MotokyThemeHeader {
    border: none;
    border-radius: 0px;
  }

  #header .Logo
  {
  
  }

  #logo
  {
  }

  #logo IMG
  {
    max-height: 50px;
    max-width: 250px;
  }

  #content
  {
    padding-top: 0px;
    padding-bottom: 50px;
  }

  .ContentBox
  {
    padding: 30px;
  }
}

/* Content Box */
.ContentBox
{
  background-color: #FFF;
  border: 1px solid #b2b2af;
  border-radius: 0 0 12px 12px;
  border-top: transparent;
  display: inline-block;
  min-height: 520px;
  width: 500px;
  max-width: 100%;
  padding: 65px 50px 40px 50px;
  margin-bottom: 55px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

.ContentBox H1
{
  color: #3f6681;
  font-size: 16pt;
  font-weight: normal;
  margin: 0 0 15px 0;
}

BODY.MotokyThemeCustom .ContentBox
{
  background-color: #FFFFFF;
  border: 1px solid #333332;
  border-top: none;
}

/* Error */
.error
{
  color: #bf0d30;
  font-weight: bold;
  margin-bottom: 15px;
}

.FscAccError
{
  display: block;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  position: absolute !important;
  top: -3333px !important;
  left: -3333px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Device Binding*/
#devicebindinglogin {
  color: #666664;
}

#devicebindingloginlink {
  color: #666664;
}

/* Tablet */
@media (max-height: 849px)
{
  .ContentBox
  {
    padding: 40px 40px 20px 40px;
    min-height: 440px;
  }
}

@media (max-width: 649px), (max-height: 649px)
{
  .ContentBox
  {
    padding: 15px 30px 15px 30px;
    margin-bottom: 0px;
    min-height: 0;
  }

  .ContentBox
  {
    border: none;

  }

  BODY.MotokyThemeCustom .ContentBox
  {
    background-color: transparent;
    border: none;
  }
  
  BODY.MotokyThemeCustom #content {
    border-top: 1px solid #b2b2af;
  }
}

/* Support Button */
.Support
{
  display: inline-block;
  font-size: 10pt;
  margin-right: 25px;
  padding: 5px;
  position: absolute;
  right: 0;
  top: 15px;
  vertical-align: middle;
  width: auto;
  z-index: 1;
}
.Support img
{
  display: none;
}

@media (max-width: 649px)
{
  .Support
  {
    background: none;
    margin-right: 10px;
    top: 10px;
  }

  .Support span
   {
    display: none;
  }

  .Support img
    {
    display: block;
    width: 16px;
    height: 16px;
  }

  .Support:hover
   {
   background-color: #0045fe;
   border-radius: 6px;
  }
}

#motokyhelper
{
  height: 0;
  position: absolute;
  visibility: hidden;
  margin: 0;
  border: 0;
  top: -1000px;
  left: -1000px;
}

.WhiteBgDummy
{
  background-color: #FFF;
}
.BlackBgDummy
{
  background-color: #000;
}

/* Login modes */

.LoginMode-simple #header,
.LoginMode-simple #footer,
.LoginMode-compact #header,
.LoginMode-compact #footer,
.LoginMode-shop #header,
.LoginMode-shop #footer,
.LoginMode-cmisapp #mobilepininfolink
{
  display: none;
}

.hidden {
  display: none;
}

div.hidden-absolute {
  visibility: hidden;
  position: absolute;
}

.display-block {
  display: block;
}

.underline {
  text-decoration:underline;
}

input[type=number]#mobilepin::-webkit-inner-spin-button,
input[type=number]#mobilepin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}