/* COMMON VARIABLES ------------------------------------------------------- */
:root {
  --main-background-color: rgba(248,248,248,0.9);
  --main-disabled-color: rgba(200,200,200,0.5);
  --main-label-color: #111;
  --main-hover-color: rgba(95,158,160,1.0);
  --main-gridCell-color: rgba(135,198,200,0.7);
  --main-design-color: rgba(255,158,0,0.9);
  --main-menu-color: rgba(255,158,0,0.9);
  --main-menuHover-color: rgba(95,158,160,1.0);
  --main-ajaxLoad-color: rgba(95,95,95,0.7);
  --main-infoPanelTop-color: rgba(105, 168, 170, 0.5);
  --main-infoPanelBottom-color: rgba(35, 98, 100, 0.9);
  --main-infoText-color:rgba(255,250,230,1.0);
}

/* FONTS ------------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GENERAL ----------------------------------------------------------------- */
body
{
  background-color: #fff;
  color: #111;
  font-family: "Montserrat";
  font-size: 0.8em;
}

#mainDiv
{
  width: 1200px;
  height: 800px;
  margin-left:auto;
  margin-right:auto;
  background-color: var(--main-background-color);
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-radius:10px 0 0 0;
  box-shadow: 10px 10px 10px grey;
}

.infoPanel
{
  background-image: linear-gradient(var(--main-infoPanelTop-color),var(--main-infoPanelBottom-color));
  border-radius:8px 8px 0px 0px;
  z-index:100;
}

.infoText
{
  text-align:center;
  font-size:3em;
  font-weight:bold;
  color:var(--main-infoText-color);
  text-shadow: 2px 2px #555;
}

.invisibility
{
  visible:hidden;
}

/* INPUT INTERFACE --------------------------------------------------------- */
.label
{
  font-family: "Montserrat";
  font-size:0.8em;
  font-weight: normal;
  font-style: normal;
  color:var(--main-label-color);
}

button
{
  width:140px;
  height:36px;
  line-height:18px;
  background-color: var(--main-design-color);
  color:#fff;
  text-align:center;
  vertical-align:center;
  border:none;
  cursor:pointer;
}

button:disabled
{
  background-color: var(--main-disabled-color);
  color:#fff;
}

button:hover
{
  background-color: var(--main-hover-color);
}

.input
{
  border-top:none;
  border-left:none;
  border-right:none;    
  border-bottom:2px solid #bbb;
  font-family: "Arial";
  font-size:1.1em;
  /* font-weight: bold; */
  font-style: normal;
  color:#111;
}

.inputSelector
{
  border-top:1px solid #bbb;
  border-left:1px solid #bbb;
  border-right:none;    
  border-bottom:1px solid #bbb;
  font-family: "Arial";
  font-size:1.1em;
  /* font-weight: bold; */
  font-style: normal;
  color:#111;
}

.addIcon, .delIcon, .eyeIcon, .profileIcon, .sortIcon
{
  width:35px;
  height:35px;
  border:3px solid transparent;
  border-radius:50%;
  cursor:pointer;
}
.addIcon:hover, .delIcon:hover, .eyeIcon:hover, .profileIcon:hover, .sortIcon:hover
{
  border:3px solid var(--main-hover-color);
}

.disconnectIcon
{
  width:33px;
  height:33px;
  border:3px solid transparent;
  border-radius:50%;
  cursor:pointer;
}
.disconnectIcon:hover
{
  border:3px solid var(--main-hover-color);
}

select
{
  font-family: "Montserrat";
  font-size:1.0em;
  color:#555;
  cursor:pointer;
}

.textInput
{
  width:96%;
  height:7.0em;
  resize:none;
}

.error
{
  border:1px solid #F00;
  background-color:rgba(255,0,0,0.2);
}

/* TOP BAR -------------------------------------------------------------------- */
#topBar
{
  background-color:#FFF;
  width: 100%;
  height: 80px;
  top:0px;
  left:0px;
  border-bottom:2px solid #eee;
  border-radius:10px 0 0 0;
}
#logoAdel
{
  float:left;
  width:40px;
  height:45px;
  margin-top:5px;
  margin-left:15px;
}  
#logoAdelPict
{
  width:60px;
  height:60px;
}
#menuIcon
{
  position:absolute;
  width:40px;
  height:75px;
  margin-top:20px;
  margin-left:85px;
}  
#menuIconPict
{
  width:37px;
  height:37px;
  cursor:pointer;
}
#pageTitle
{
  position:absolute;
  width:800px;
  height:50px;
  margin-top:22px;
  margin-left:140px;
  font-family: "Montserrat";
  font-size:2.0em;
  /* font-weight:bold; */
  color:#555;
}
#connectionInfo
{
  float:right;
  /* font-weight:bold; */
  color:rgb(85, 85, 85);
  margin-top:20px;
  margin-right:10px;
}
#userName
{
  text-align:right;
  width:600px;
}
#lastConnection
{
  text-align:right;
  width:600px;
}
#languageSelector
{ position: absolute;
  text-align:right;
  width:100px;
  margin-bottom:40px;
  
}
#connectedAs
{
  text-align:right;
  width:600px;
}
#profile
{
  float:right;
  margin-left:10px;
}
#profileIcon
{
  width:30px;
  height:30px;
}
/* MENU -------------------------------------------------------------------- */
#menuLostFocus
{
  z-index:1990;
  position:absolute;
  top:0px;
  width: 1200px;
  height:95vh;
  visibility:hidden;
}

#menuOverlay
{
  z-index:2000;
  position:absolute;
  top:90px;
  width:0px;
  height:820px;
  margin-left:auto;
  margin-right:auto;
  background-color: var(--main-menu-color);
  background-image: url("../../resources/pictures/logoAdelTransparent.png");
  border-radius:0px 10px 10px 0px;
  -webkit-transition: width 0.5s; /* Safari */
  transition: width 0.5s;  
  box-shadow: 0px 0px 0px grey;
  overflow:hidden;
}
.menuOption
{
  width:240px;
  margin-top:5px;
  font-family: "Montserrat";
  font-size:1.1em;
  font-style: normal;
  /* font-weight: bold; */
  text-align:left;
  color:white;
  padding-top:10px;
  padding-left:10px;
  padding-bottom:10px;
  cursor:pointer;
/*  border-top:1px solid #ccc; */
}
.menuOption:hover
{
  background-color:var(--main-menuHover-color);
  color:white;
}

/* DIALOG BACKGROUND DIMMER ------------------------------------------------- */
#modalDimmer
{
  position: fixed;
  visibility:hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--main-ajaxLoad-color);
  z-index:32000;
}

/* AJAX WAITING ------------------------------------------------------------ */
#waiting
{
  position: fixed;
  visibility:hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: wait;
  background-color: var(--main-ajaxLoad-color);
  z-index:32000;
}

#waitingLogo, #waitingLogoFixed
{
  position:absolute;
  width:100px;
  margin-left:calc( ( 100vw - 100px ) / 2 );
  margin-top:calc( ( 800px - 100px ) / 2 );
  transform : rotate(0deg);
}

#waitingMessage
{
  position:absolute;
  width:800px;
  margin-left:calc( ( 100vw - 800px ) / 2 );
  margin-top:calc( ( ( 800px - 100px ) / 2 ) + 100px );
  font-size:2em;
  font-weight:bold;
  text-align:center;
  color:var(--main-infoText-color);
}

/* ERROR DIALOG ------------------------------------------------------------ */
#errorDialog
{
  text-align:center;
  font-size: 1.3em;
  padding-top:40px;
}

/* SUPERADMIN -------------------------------------------------------------- */
#superAdminCustomerListSelector
{
  width:100%;
}

#superAdminCustomerValidationZone
{
  margin-top:10px;
  text-align:center;
}