/* paths */
/*
----------------------------------------
COLORS
----------------------------------------
*/
/* palette */
/* stylelint-disable color-no-hex */
/* palette shades */
/* primary */
/* accent */
/* red-brand */
/* yellow-brand */
/* Function colours */
/* Main Text colors */
/* Background colors */
/* colour opacities (mainly used for font-colors & hovers) */
/* stylelint-enable color-no-hex */
/* utility colors */
/* font colour (on eg. buttons) */
/* layout colors and helpers */
/*
--------------------------------------
Color Maps
--------------------------------------
*/
/* theme colors */
/* theme shades map */
/* functional colors map */
/* functional color shades map */
/* provide neutral text grayscale map for css variable generation */
/* provide surface grayscale map for css variable generation */
/*
----------------------------------------
Fonts
----------------------------------------
*/
/* fonts */
/*
html font-size: 100% = 16px -> REM is based on this!!!
body font-size: 0.875rem = 14px
*/
/* box shadows */
/* elevation levels */
/* kinda the same as box shadow variables, but for now extra variables to not break anything */
/* borders */
/* badge */
/* navbar & footer */
/* sidebar */
/* bootstrap nav vars */
/* TODO on rework of slidein, these can probably be removed */
/* pagination */
/* arrow */
/* tooltip */
/* table */
/* List group */
/* form elements */
/** inputs -fields general **/
/**
* input fields (and buttons inside input-fields)
* heights
**/
/**
* buttons
* bootstrap uses:
* @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
**/
/* grid */
/** grid breakpoints **/
/** defines the minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries **/
/** container breakpoints **/
/** defines the maximum width of `.container` for different screen sizes **/
/** grid columns **/
/** sets the number of columns and specifies the width of the gutters **/
/* toggles */
/** (keep these at the bottom of the file please) **/
/* add 'inherit' to the $overflows of bootstrap, to get the .overflow-inherit class */
/* Modals */
/* Drawer */
:root {
  --ig-text-secondary: light-dark(#1272ab, #93c4ea);
}

html {
  height: 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

body {
  height: 100%;
  width: 100%;
  padding: 5px;
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", "Segoe UI", arial, sans-serif;
}

.hideImageInfo {
  display: none;
}

#browsercheck {
  display: none;
  margin: auto;
  position: relative;
  width: 50%;
  border: 2px solid black;
  background-color: white;
  padding: 10px;
}

.left-inner-addon {
  position: relative;
}
.left-inner-addon input[type=text], .left-inner-addon input[type=password] {
  padding-left: 30px;
}
.left-inner-addon span {
  position: absolute;
  padding: 8px 8px;
  pointer-events: none;
}

.validation-summary-errors {
  color: #e4003a !important;
}
.validation-summary-errors ul {
  list-style-type: none;
  padding-left: 0;
}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

#content {
  clear: both;
  height: 240px;
  position: relative;
  padding: 0;
}
@media (max-height: 500px), (max-width: 576px) {
  #content .login-snake {
    display: none;
  }
}

#floater {
  height: 50%;
  margin-bottom: -200px;
}

#floater-login {
  height: 50%;
  margin-bottom: -250px;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.version {
  color: rgba(100, 100, 100, 0);
}
.version :hover {
  color: #000000;
  background: rgba(255, 255, 255, 0.5);
}

#login label {
  color: #555d71;
}

.login-header {
  color: #0079D6;
  font-size: 1.6em;
  font-weight: 500;
  margin: 0;
}

.login-sub-header {
  color: #666666;
  font-size: 1.2em;
  font-weight: 500;
  margin: 0;
}

ul.language-list li {
  list-style: none;
  display: inline;
  padding: 0 5px;
}
ul.language-list li:last-child span {
  padding-right: 0px;
}
ul.language-list li:last-child::after {
  border-left: none;
}
ul.language-list li span {
  padding-right: 10px;
}
ul.language-list li::after {
  content: "";
  border-left: 1px solid #aaaeb8;
}
ul.language-list li:hover {
  cursor: pointer;
}

.has-method {
  list-style-type: none;
  margin: 10px 0 20px 0;
  padding: 0;
}

.method {
  font-weight: 700;
}

.method-link {
  border: 2px solid #555d71;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: #555d71;
  display: block;
  font-size: 90%;
  padding: 0.625em;
  padding-left: 2.5em;
  position: relative;
}

@media screen and (min-width: 768px) {
  .method-link {
    font-size: 100%;
  }
}
.method-link:active, .method-link:focus, .method-link:hover, .method-link.is-selected {
  border-color: #e94e0f;
  color: #e94e0f;
}

.method-link.is-selected::before {
  color: #e94e0f;
  background-color: #e94e0f;
}

.method-link::before {
  background: #e9eaed;
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  left: 0.625em;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
}

.featurename {
  font-size: larger;
  color: red;
  font-weight: 700;
  position: fixed;
  width: 75%;
}