@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato/Lato-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato/Lato-Bold.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body { height: 100%; margin: 0; padding: 0; font-family: Arial; font-size: 14px; }
body { /*display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: stretch;*/ background-color: #2dbecd;/*522f91*/ }

.green { color: #009a5b; }

.bg-gray { background-color: #6c6c6c; color: white; }
.bg-gray2 { background-color: #8c8c8c; color: white; }
.bg-gray3 { background-color: #f3f3f3; color: #444; }
.bg-gray4 { background-color: #d1d1d1; color: #444; }
.bg-gray5 { background-color: #e5e5e5; }
.bg-gray6 { background-color: #f2f2f4; }
.bg-rmsuccess { background-color: #90ee90; }/*for routine maintenance form*/
.bg-rmdanger { background-color: #f08080; }/*for routine maintenance form*/
.bg-mmqdanger { background-color: #fff2f0; }
.bg-servicemaxlabel { background-color: #f3f2f2; color: black; }
.bg-mymilliqlabel { background-color: #e8e8e8; color: black; }
.bg-mymilliqlabel2 { background-color: #f8f8ff; color: black; }
.bg-mymilliqlabel3 { background-color: #f0f0f0; color: black; }
.bg-mkcyan, .bg-bluemmq, .btn-mkcyan, .text-bg-mkcyan { background-color: #2dbecd; color: white; }
.btn-mkcyan:hover { background-color: #27a5b3; }
.bg-mkyellow, .btn-mkyellow { background-color: #ffc832; color: white; }
.btn-mkyellow:hover { background-color: #e6b42d; }
.bg-bluesm { background-color: #0070d2; color: white; }
.bg-routinemaintenance { background-color: #c57dac; color: #032d60; }
.bg-pdfmenu { background-color: #3b3b3b; color: white; }
.bg-pdfwoblue { background-color: #79b4cd; }
.bg-pdfwodarkblue { background-color: #202847; color: white; }

.text-mkcyan, .link-mkcyan { color: #2dbecd; }
.link-mkcyan:hover { color: #2d6ecd; }
.text-mkyellow, .link-mkyellow { color: #ffc832; }
.link-mkyellow:hover { color: #ffdcb9; }
.text-mkmagenta, .link-mkmagenta { color: #eb3c96; }
.link-mkmagenta:hover { color: #db2081; }
/* .text-mkpink, .link-mkpink { color: #e1c3cd; } */
/* .link-mkpink:hover { color: #eb3c96; } */
.text-mkpurple, .link-mkpurple { color: #503291; }
.link-mkpurple:hover { color: #593c9a; }
.text-bluesm { color: #0070d2; }
.text-bluehmilarge { color: #20c4f4; }
.text-gray, .link-gray { color: #6c6d6d; }
.text-gray:hover, .link-gray:hover { color: white; }
.text-gray2, .link-gray2 { color: #8c8c8c; }
.text-gray2:hover, .link-gray2:hover { color: white; }
.text-gray3, .link-gray3 { color: #f3f3f3; }
.text-gray3:hover, .link-gray3:hover { color: #444; }
.text-gray4, .link-gray4 { color: #d1d1d1; }
.text-gray4:hover, .link-gray4:hover { color: #444; }

.text-secondarylight, .link-secondarylight { color: #88919a; }
.link-secondarylight:hover { color: #7e878f; }

.border-secondarylight { border-color: #88919a; }
.border-mkcyan { border-color: #2dbecd !important; }

.sz-4 { font-size: 1.4em; }
.fs-7 { font-size: .7em; }

ul.nostyle { padding-left: 0; }
ul.nostyle, ul.nostyle li { list-style-type: none; }

img.icon-256, img.icon-128, img.icon-64, img.icon-32, img.icon-16, img.pageprecsuiv { width: 100%; height: auto; }
img.icon-256 { max-width: 256px; }
img.icon-128 { max-width: 128px; }
img.icon-64 { max-width: 64px; }
img.icon-32 { max-width: 32px; }
img.icon-24 { max-width: 24px; }
img.icon-16 { max-width: 16px; }

a { color: #0066b3; }
a.hover { color: #2dbecd; }

button[aria-expanded=true] .fa-chevron-right { display: none; }
button[aria-expanded=false] .fa-chevron-down { display: none; }

h1, h2, h3 { font-family: Arial Black, Arial Bold, Gadget, sans-serif; }
h1 { margin: 0; padding: 0; font-size: 1.8em; }
h2, h3 { color: #0066b3; text-align: right; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.6em; }

p { text-align: justify; }

ul.none { list-style: none; padding-left: 0; }

/* Pour les ancres*/
/* #ProductDescription, #InstalledProductInformation, #MyMilliQInformation, 
#SystemInstallationConfiguration, #PeripheralDevices, #MyContracts, #FileManagement, #WaterInformation, #ProcessInformation, #DiagnosticInformation, #InventoryInformation,
#Information,
#AlarmAndAlert { position: relative; top: -60px; } */
:target { scroll-margin-top: 60px; }

.form-signin { width: 100%; padding: 0; margin: auto; }
.form-signin { max-width: 300px; }

div.gridcenter { height: 100% !important; }

div.whitepage { width: 100%; max-width: 960px; height: auto; margin: auto; padding: 20px; background-color: white; color: black; box-shadow: 8px 8px 12px rgba(0,0,0,.8); border-radius: 50px; }
div.whitepage ul { margin: auto; text-align: left; }

img.profil { width: 100%; max-width: 150px; height: auto; }

div.servicemax, div.inbox, div.mymilliq, div.hmi, div.training, div.pdf { max-width: 3000px; margin: auto; padding-bottom: 50px; }
div.mymilliq { font-family: 'Lato', sans-serif; }
div.servicemax { padding-top: 10px; background-color: #b0c4df; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; font-size: 12px; }
div.inbox, div.hmi, div.training, div.pdf { padding-top: 80px; background-color: white; }
div.mymilliq { background-color: white; }
div.pdf { background-color: #333; }
div.xlsx { background: url('../img/xlsx-grid.png'); }

div.mmqlogin { width: 100%; height: 100%; background: url('../img/landing-background.d5378983.png') no-repeat center fixed; background-size: cover; }
div.mmqlogin div.loginform { padding-top: 120px; }
div.mmqlogin div.logincard { width: 100%; max-width: 480px; margin: 0 auto; background-color: white; border-radius: 5px; }
div.mmqlogin div.welcome { display: inline-block; padding: 5px; background-color: #2dbecd; color: white; }

div.mymilliq input[type=submit], div.mmqlogin input[type=submit] { margin: 4px 2px; padding: 8px 16px; background-color: #2dbecd; text-decoration: none; border: none; color: white; cursor: pointer; }

div.mymilliq .cardborder { border: 2px solid #d7d7d7; }
div.mymilliq .cardlisthead { color: #8a8477; font-size: .9em; }
div.mymilliq .cardupdate { font-size: .6em; }
div.mymilliq .bg-beige { background-color: #fee8b0; }

div.screenshot { width: 100%; height: auto; margin: 50px 0 0 0; padding: 0; }
div.screenshothmi, div.screenshothmi2 { width: 100%; height: auto; margin: auto; padding: 0; }
div.screenshothmi { max-width: 770px; }
div.screenshothmi2 { max-width: 800px; }
img.screenshot, img.screenshotportion, img.illu-800, img.illu-400 { width: 100%; height: auto; margin: auto; padding: 0; }
img.screenshot, img.screenshotportion { max-width: 3000px; }
img.illu-800 { max-width: 800px; }
img.illu-400 { max-width: 400px; }
rect.link { fill: #fff; opacity: 0; /*rx: 15px; ry: 15px; */}
rect.link:hover { fill: blue; opacity: .2; }
circle.xlink { fill: #fff; opacity: 0; }
circle.xlink:hover { fill: blue; opacity: .2; }
div.screenshotportion { width: 100%; height: auto; margin: 0; padding: 0; }

div.mymilliqheader { width: 100%; height: auto; margin: 50px 0 0 0; padding: 0; background-color: #2dbecd; color: white; }
/* img.mymilliqheader { width: 100%; max-width: 1874px; height: auto; }
img.mymilliqdots { width: 100%; max-width: 27px; height: auto; } */

span.previousnextpage { font-size: 1.5em; }

img.screenshot { width: 100%; /*max-width: 256px;*/ }
figcaption { margin-top: 5px; font-style: italic; font-size: .8em; }

img.vibrantm, img.milliq { height: auto; margin: 0; padding: 0; width: 40% !important; max-width: 100px; }

div.smmenu { width: 100%; margin: 50px 0 0 0; padding: 0; border-bottom: 3px solid #0070d2; }
div.smmenulink, div.smmenulinkcurrent { padding: 15px; border-top: 3px solid white; }
div.smmenulink:hover, div.smmenulinkcurrent { border-top: 3px solid #0070d2; background-color: #e5f0fb; }

table.pdfwo, table.pdfwo th, table.pdfwo td { border: 1px solid darkgray; border-collapse: collapse; }
table.pdfqr, table.pdfqr th, table.pdfqr td { border: 2px solid black; border-collapse: collapse; }

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #198754;
}
input:focus + .slider {
  box-shadow: 0 0 1px #198754;
}
input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

/*.page { width: 100%; max-width: 960px; padding: 0; margin: auto; }
.form-signin, .form-crypt { width: 100%; padding: 0; margin: auto; }
.form-signin { max-width: 300px; }
.form-crypt { max-width: 400px; }*/

.popover{ max-width: 100% !important; }

.datepicker{ z-index:99999 !important; }

@media all and (max-width: 640px) { /* version mobile */

html,body { font-size: 12px; }

header, footer { position: static !important; }

}