:root {
  --theme-main-color-rgb: 69, 98, 114;
  --theme-login-background-color-rgb: var(--theme-main-color-rgb);
  --theme-login-background-color: rgba(var(--theme-login-background-color-rgb), 0.6);
  --theme-login-color: rgb(var(--theme-main-color-rgb));
  --theme-box-shadow: 0px 1px 10px #b3b3b3;
  --theme-login-highlight-color: var(--theme-main-highlight-color);
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /*font-weight: 100 !important;*/
}

.clear {
  clear: both;
}

#login-body {
  height: 100%;
  width: 100%;
}

#login-overlay {
  height: 100%;
  background: rgb(27 28 28 / 42%);
}

.closebutton {
  float: right;
  margin: 0.125em;
  right: 1em;
  position: absolute;
}

.m-menu > li {
  min-height: 3.25em;
}

.m-menu-divider {
  display: block;
  line-height: 3.125rem;
  height: 0.125em;
  width: 0.125em;
  background-color: #4c9cd7;
  padding: 0;
}

.m-menu > li .dropdown-toggle .icon {
  display: none;
  color: #cccccc;
}

.m-menu > li:hover .dropdown-toggle .icon {
  color: #ffffff;
}

.m-menu > li .dropdown-toggle .m-menu-text {
  display: block;
}


#login-button button,
.m-menu > li.active-container,
.m-menu > li.active-container .icon,
.m-menu .m-menu-item.active-container,
.m-menu > li:hover,
.m-menu .m-menu-item:hover {
  color: #ffffff;
}

.m-menu > li.no-hovered:hover,
.m-menu .m-menu-item.no-hovered:hover {
  background-color: #ffffff;
}

.m-menu .m-menu-container {
  opacity: 0.95;
  font-size: 1.1em;
  border-bottom: 0.250em solid #ffffff;
}



.appDevLogos {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 14em;
  height: 3.5em;
  padding: 0.25em;
  background-color: #ffffff;
}

  .appDevLogos img {
    max-width: 10em;
    max-height: 2.25em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

#login-buttons-container {
  text-align: center;
  padding: 0.25rem;
}

#appLogo {
  height: 3.25em;
  width: 16em;
  margin-left: 0.4rem;
  font-weight: 400 !important;
  font-size: 0.8em;
  float: left;
}

  #appLogo .version {
    font-size: 6em;
    position: absolute;
    color: #cccccc;
    left: 2em;
    top: -0.3em;
    opacity: .4;
  }

  #appLogo .product {
    position: absolute;
    font-size: 2em;
    color: #E4AD34;
    top: 0.4em;
  }

  #appLogo .claim {
    position: absolute;
    font-size: 0.75em;
    font-style: italic;
    left: 4.5em;
    top: 3.25em;
    color: #49443C;
  }

.input-control.select {
  font-weight: 400 !important;
}

#loginProjectImage {
  max-height: 6rem;
  margin-right: 1rem;
}

#project-container div {
  float: left;
}

#login-container a {
  height: 0.8em;
  min-height: 0.8em;
  line-height: 0.8em;
  vertical-align: middle;
  color: #ffffff;
}

.input-control.text,
.input-control.password {
  display: inline-block;
  min-height: 2.525rem;
  height: 2.525rem;
  position: relative;
  vertical-align: middle;
  line-height: 1;
  margin: 0.325rem 0px;
  font-size: 1.5rem;
  /*padding-right: 2rem;*/
  padding-left: 0.5rem;
}

.input-control > .button-group > .helper-button,
.input-control > .helper-button {
  visibility: hidden;
  margin: 0;
  border: 0;
  height: 100%;
  padding: 0 .6rem;
  z-index: 100;
  font-size: 1.25rem;
}

.input-control.email .button,
.input-control.file .button,
.input-control.number .button,
.input-control.password .button,
.input-control.select .button,
.input-control.tel .button,
.input-control.text .button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin: 0;
}

.output-control .output-container,
.input-control.text input[type=text],
.input-control.textarea textarea,
.input-control.password input,
.input-control.file input,
.input-control.email input,
.input-control.tel input,
.input-control.number input {
  font-size: 1.5rem
}

input.error {
  border: 2px solid #ce352c !important;
}

input.success {
  border: 2px solid #60a917 !important;
}

#languages {
  width: 6.25em;
  margin-right: 0.625em;
}

  #languages .select2-selection__arrow {
    /*background-color:#ffffff;*/
  }

  #languages select {
    margin-top: 0.2em;
  }

#default-header,
#login-header {
  background: #ffffff;
  color: #000000;
  position: relative;
}

#app-bar-divider,
#login-separator {
  width: 100%;
  height: 0.250em;
  position: absolute;
}

#login-container {
  /*position: absolute;
    z-index: 2;
    margin-top: -14em;
    margin: -9em 0 0 -25em;*/
  /*height: 18.75em;*/
  /*height: auto;
    width: 50em;*/
  /*top: 50%;
    left: 50%;*/
  /*left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;*/
  clear: both;
}

#project-container {
  /*width: auto;
    margin-right: 20.5em;*/
  /*height: 18.75em;*/
  /*height: auto;
    text-align: left;
    position: relative;
    padding: 0 0.625em 0.625em 0.625em;*/
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0 !important;
}

#project-name {
  color: #ffffff;
}

#project-description {
  color: #ffffff;
  font-size: 1.3em;
}

#project-message {
  color: #ffffff;
  font-size: 0.9em;
  margin-top: 10px;
}

#form-container {
  width: 30rem;
  margin: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  background-color: rgba(250, 250, 250, 0.4) !important;
  margin-top: 0 !important;
}



#form-opacity-effect {
  background-color: #000000;
  opacity: 0.25;
  filter: alpha(opacity=25);
}

#form-inner {
  color: #000000;
  width: 100%;
  padding: 2rem;
}


#login-options-container button {
  background: transparent;
  background-color: transparent;
  margin: auto;
  height: 100%;
  border: 0;
}

  #login-options-container button::before {
    font-size: 2rem;
    display: inline-block;
    background-color: transparent;
    border: 1px solid transparent;
    color: #fff;
    padding: 0;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0.75rem;
  }

#login-options-container .button .caption {
  font-family: "Segoe UI", "Open Sans", sans-serif, serif;
  font-size: 1rem;
  display: block;
  text-shadow: 1px 1px 1px #FFF;
}

#mods span {
  display: block;
  font-size: 0.9em;
}

.registerlink {
}


/*-- bandiere --------*/
a.imgflag {
  display: inline-block;
  margin: 2px 15px 15px 0;
  background: 0 0 no-repeat url('../img/flagSprite.png');
  border-width: 0;
  width: 40px;
  height: 41px;
}





#project-dialog {
  display: none;
  margin-top: 10px
}





#login-body,
#form-blur-effect {
  background: url("../img/building2.jpg");
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/worker.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/worker.jpg', sizingMethod='scale')";
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position-x: center;
}

#form-blur-effect {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

#login-body, #form-blur-effect {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#login-separator,
#btnCookiesAccept,
#login-buttons-container .button,
.m-menu > li.active-container,
.m-menu .m-menu-item.active-container,
.m-menu > li:hover,
.m-menu .m-menu-item:hover {
  background-color: var(--theme-main-button-color) !important;
  border-radius: var(--theme-border-radius);
  font-size: 1.25rem;
  border-color: transparent;
  color: #ffffff !important;
}

#login-header {
  border-bottom: 0.250em solid #4E6F9C;
}

#project-container {
  text-align: center;
  margin-top: 0 !important;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 6rem;
}

#appLogo .product {
  color: #4E6F9C !important;
}

#appLogo .release {
  font-size: 0.4em;
  top: -1em;
  left: -0.3em;
  position: relative;
}

.m-menu > li.no-hovered:hover, .m-menu .m-menu-item.no-hovered:hover {
  background-color: transparent !important;
}


#lbgoogle,
#lbLogin,
#login-buttons-container .button {
  width: 7.5em;
  font-weight: bold;
  margin-right: 5px;
  margin-left: 5px;
}

#lbLogin {
  width: 10em !important;
}

#login-buttons-container .button,
.m-menu > li.active-container,
.m-menu > li.active-container .icon,
.m-menu .m-menu-item.active-container,
.m-menu > li:hover,
.m-menu .m-menu-item:hover {
}

#lbgoogle {
  background-color: #ea4033 !important;
}

  #lbgoogle[disabled=disabled],
  #lbgoogle:disabled,
  #lbLogin:disabled,
  #lbLogin[disabled=disabled] {
    opacity: 0.5 !important;
  }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  margin-top: 0.125rem;
  font-size: 1.125rem;
  padding: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}


.UpdateProgress {
  z-index: 3000;
}

#ExternalAuthenticationContainer {
  display: inline-block;
  margin-top: 5px;
  border-top: 1px solid;
  padding-top: 1px;
  min-width: 80%;
}


.UpdateProgress .template {
  width: 100%;
  height: 100%;
  border: solid 0px black;
  text-align: center;
  background-color: #fff;
  filter: alpha(opacity=75);
  -moz-opacity: .75;
  opacity: .75;
}

.UpdateProgress .uploading,
.uploading {
  width: 500px;
  height: 50px;
  background-image: url('Img/Default.gif');
  background-repeat: no-repeat;
  background-position: center;
}



.dialog {
  opacity: 0.95 !important;
}

/*charms*/
div.charms {
  background-color: #484848;
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  background-color: var(--theme-login-background-color) !important;
  box-shadow: none;
  border-radius: 0.5rem;
}

.charms {
  display: block;
  position: fixed;
  z-index: 1090;
  background-color: #1d1d1d;
  color: #ffffff;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  padding: 1rem;
  font-size: 1.5rem;
}

  .charms p {
    font-size: 1rem;
  }

div.charms.top-side {
  border-radius: 0 0 0.5rem 0.5rem;
}

.charms.top-side {
  bottom: 100%;
  width: 100%;
  left: 0;
}

.charms.top-side {
  width: 100%;
  max-width: 1200px;
  left: calc((100% - 1200px) / 2);
  /* transform: translate(-50%, 0); */
}

  .charms.top-side.open {
    -webkit-box-shadow: var(--theme-box-shadow);
    box-shadow: var(--theme-box-shadow);
  }

  .charms.top-side.open {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }



div.charms.bottom-side {
  border-radius: 0.5rem 0.5rem 0 0;
}

.charms.bottom-side {
  top: 100%;
  left: 0;
  width: 100%;
}

  .charms.bottom-side.open {
    -webkit-box-shadow: var(--theme-box-shadow);
    box-shadow: var(--theme-box-shadow);
  }

  .charms.bottom-side.open {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

div.charmsClose {
  float: right;
  top: 0;
  right: 0;
  position: absolute;
  width: 1rem;
  height: 1rem;
  margin: 1rem;
  cursor: pointer;
}