html, body, #form1 {
    margin: 0;
    padding: 0;
    /*height: 100%;
    box-sizing: border-box;*/
}
/*html{
    height:100vh;
}*/

/* Header */
.dxpnl-edge.t.headerPane {
    background-color: rgb(0,46,88); /*#EDEDED;*/
    background-position: left top;
    background-repeat: no-repeat;
    height: 100px;
    width: 100%;
    border: none;
}

    /*.headerPane>div{
    height:100%;
}*/

    .dxpnl-edge.t.headerPane.expandedPanel {
        height: auto;/*initial;*/
    }

    .dxpnl-edge.t.headerPane.panel {
        padding: 0;
        border-radius: initial;
    }

.headerTop {
    width: 100%;
    height: 100%;
}

ul.headerMenu {
}

/*div.headerMenu > div {
    height: 100%;
}*/

.headerMenu {
    border-width: 0 !important;
    float: left;
    height: 100%;
}

.alignText {
    display: table !important;
}

    .alignText > div.dxm-content, .alignText > a.dxm-content {
        float: none;
        display: table-cell !important;
        height: 100%;
        vertical-align: middle;
    }

/*.alignText > div, .alignText > a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    display: table !important;
    height: 100%;
}

    .alignText > div > span, .alignText > a > span {
        display: table-cell !important;
        vertical-align: middle;
    }*/

.expandedPanel .alignText > div.dxm-content, .expandedPanel .alignText > a.dxm-content {
    padding: 6px 19px 7px 8px !important;
    display: block !important;
    height: 100%;
}

.expandedPanel .alignText { /*> div > span, .expandedPanel .alignText > a > span {*/
    display: block !important;
    vertical-align: middle;
}

.expandedPanel {
    padding: 2px !important;
}

    .expandedPanel .headerMenu {
        border-top-width: 0 !important;
        float: none; /*initial;*/
    }

.showexpand {
    display: none;
}

.expandedPanel .showexpand {
    display: inherit;
}

.hideexpand {
    display: inherit;
}

.expandedPanel .hideexpand {
    display: none;
}

.dxpnl-np {
    height: 100%;
}


.headerMenu ul {
    height: 100%;
}

.expandedPanel .headerMenu ul {
    height: auto;
    width: auto !important;
}

.templateTitle {
    float: left;
    padding: 10px;
    height: 100%;
    display: table;
    /*margin-right: 100px;*/
}

    .templateTitle > div {
        display: table-cell;
        vertical-align: middle;
    }

.headerPane.bar .templateTitle {
    padding: 0px;
}

.expandedPanel .templateTitle {
    display: none;
}

/*.dxpnl-edge.t*/
.headerPane.bar .templateTitle {
    margin: 0;
}

.templateTitle a {
    text-decoration: none;
    font-size: x-large;
    color: black;
}

/*.login {
    border: 1px solid #D1D1D1;
    box-sizing: border-box;
    padding: 20px;
    background: white;
    border-radius: 5px;
    max-width: 300px;
    margin: 150px auto 150px auto;
}*/

a.accountbutton > span {
    /*border-bottom: dashed 2px #1279c0;*/
    margin-right: 5px;
    color: white;
    font-size: 14pt;
    text-decoration: none;
}

.loginButton {
    border: none;
    border-radius: 0px;
    background-image: none;
    color: white;
    background-color: #002E58;
    Width: 100%;
    Height: 40px;
}

.loginControl {
    float: right;
    font-size: 12px;
    display: table;
    height: 100%;
    margin-right: 10px;
}

    .loginControl > div {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

.ratingPassword {
    margin: auto;
}

.expandedPanel .loginControl {
    /*float: none;
    margin-left: 12px;
    margin-bottom: 24px;
    display: initial;
    vertical-align: initial;*/
    display: none;
}

/*.loginControl a {
    text-decoration: none;
    border-bottom: dashed 1px black;
    display: inline-block;
}*/

.mainContentPane {
    padding: 20px 20px 61px 20px;
}

.menuContainer {
    border-bottom: solid;
    border-bottom-color: #D1D1D1;
    border-bottom-width: 1px;
    padding-bottom: 2px;
    padding-top: 2px;
}

/* AspxGridView */
table.dxgvTable_Moderno tr.dxgvDataRow_Moderno > td.dxgv {
    border-bottom-width: 1px !important;
}

/* Footer */
.dxpnl-edge.b.footerPane {
    background-color: #002E58;
    /*border:none;*/
}

    .dxpnl-edge.b.footerPane.panel {
        padding: 0;
        border-radius: initial;
        margin-bottom: 0px;
    }

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    /*float: left;*/
    margin: 10px 10px 10px;
    text-align: center;
    color: white;
}

    .copyright a {
        text-decoration: none;
        color: white;
    }

#mentionsLegales {
    cursor: pointer;
}

.content {
    padding: 5px;
}

/* Account */
.accountHeader h2 {
    margin: 10px 0 7px 0;
    font-size: 16px;
}

.accountHeader p {
    margin: 0;
    padding: 0;
}

.accountHeader {
    margin-bottom: 20px;
}


/* Bootstrap */
/*.row {
    margin-right: 0px;
    margin-left: 0px;
}*/



/* Moderno */
.dxpnlControl_Moderno.dxpnl-edge.t.headerPane,
.dxpnlControl_Moderno .footerMenu li {
    background-color: rgb(0,46,88);
    color: white;
}

.dxpnlControl_Moderno.headerPane .headerMenu .dxm-main {
    border-color: rgb(186,150,93);
    border-style: solid;
}

.dxpnlControl_Moderno.leftPane {
    padding: 0px;
    background-color: rgb(0,46,88);
}

    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-header,
    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-headerCollapsed {
        border-top: 0px;
    }

.dxpnlControl_Moderno.rightPane {
    width: 350px;
}

.dxpnlControl_Moderno .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Moderno .loginControl a,
.dxpnlControl_Moderno .templateTitle a {
    font-size: 14px;
    color: aquamarine;
    border-color: #0072c6;
}

.dxpnlControl_Moderno .templateTitle a {
    font-size: 28px;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvTable_Moderno {
    border: 0 !important;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvHeader_Moderno {
    border-top: 0 !important;
}

.mentions {
    /*background-color:#e6e6e6;*/
    background-color: whitesmoke;
    padding: 15px;
    border-radius: 5px;
}

.HyperLinkButton {
    text-decoration: none;
    background-color: #002E58;
    color: white;
    padding: 5px 20px 5px 20px;
}

    .HyperLinkButton:hover {
        color: white;
        text-decoration: none;
        background-color: #1279C0;
    }

.tdAccountLabel {
    text-align: right;
    font: bold;
}

.tdAccountInput {
    padding: 10px;
}

.BtnValider {
    border-radius: 0px;
    background-image: none;
    color: white;
    background-color: #002E58;
}

    .BtnValider:hover {
        color: white;
        background-color: #1279C0;
    }

.title {
    color: #002E58;
}

.Hibou {
    margin-bottom: -25px;
}

/*.BackGroundHibou {
    position: absolute;
    right: -400px;
    bottom: -2000px;
    opacity: 0.30;
}*/

.BackGroundHibou_Login {
    position: absolute;
    right: -400px;
    bottom: -2000px;
    opacity: 0.1;
}

@media screen and (max-width: 500px) {
    .DivGrandParentLogo {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        overflow: visible;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        -ms-flex-item-align: end;
    }

    .divParentLogo {
        width: 100%;
    }
}

@media screen and (min-width: 501px) {
    .DivGrandParentLogo {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        position: relative;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        overflow: visible;
        -ms-flex-direction: row;
        -ms-flex-item-align: end;
    }

    .divParentLogo {
        width: 50%;
    }
}

.LogoHydrauPredict {
    /*padding-bottom: 4px;*/
    width: 98%;
    overflow: visible;
}

.LogoHydrauBoxx {
    width: 102%;
    overflow: visible;
}

.btn-login {
    background-color: #4267B2;
    color: white;
    border-color: #4267B2;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

    .btn-login:hover {
        background-color: #35568c;
        border-color: #35568c;
    }

    .btn-login:active {
        background-color: #35568c;
        transform: translateY(4px);
    }

/*---- Menu Login ----*/
.MenuLogin {
    border-radius: 5px;
    width: 200px !important;
}

    .MenuLogin ul {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .MenuLogin li {
        padding-left: 10px;
    }

.ItemMenuLogin {
    border-bottom: 1px solid #e6e6e6;
}

#ctl00_ctl00_HeaderPane_HeadLoginView_ASPxPopupMenu {
    right: 20px;
    left: auto !important;
}

/*----------- CAPTEUR HUMIDITE -------------*/
.humiditeValeur {
    position: absolute;
    top: 60%;
    right: 0;
    z-index: 4;
}

.humiditeContainer {
    position: relative;
    width: 345px;
    height: 345px;
    margin: auto;
}

.humiditeFond {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-position-x: left -20px;
}

.fond1 {
    top: 0;
    background-image: url('/Content/images/GoutteEau_vide.png');
    background-size: cover;
    background-position-x: -10px;
    z-index: 0;
}

.fond2Container {
    height: 80%;
    max-height: 100%;
}

.fond2 {
    background-image: url('/Content/images/GoutteEau.png');
    background-position-x: -10px;
    background-position-y: bottom;
    background-size: cover;
    height: 100%;
    z-index: 3;
}

.marker {
    position: absolute;
    left: 0;
    height: 100%;
    width: 50%;
    border-top: 1px dashed black;
    z-index: 2;
}

.humiditeRange {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    z-index: 1;
    height: 100%;
}

.range1 {
    height: 80%;
    background-color: #59BB71;
}

.range2 {
    bottom: 80%;
    height: 10%;
    background-color: #F5E16B;
}

.range3 {
    bottom: 90%;
    height: 10%;
    background-color: #D54367;
}
/* -----------------------------*/
/* -------- Classe ISO ---------*/
.classISO {
    margin: auto;
}
/* -----------------------------*/

/* ---------------------------- */
/* -----------Releves---------- */
.releveItemContainer {
    padding: 5px !important;
}

.releveItem {
    /*width: 24.45%;*/
    /*min-width: 377px;*/ /*420px;*/
    float: left;
    text-align: center;
    background-color: transparent;
    /*margin: 5px;*/
    padding: 10px;
    box-sizing: border-box;
}

.ReleveTitle {
    float: left;
    display: inline-block;
    padding: 5px;
}

.tabReleve {
    Width: 250px;
    font-size: 12pt;
}

@media screen and (max-width: 693px) {
    .ReleveTitle {
        float: none;
    }
}

@media screen and (max-width: 550px) {
    .tabReleve {
        Width: auto;
        /*font-size: 10pt;*/
    }
    .mainContentPane{
        padding: 0px 10px 20px 10px;
    }
}

.TBD_GroupDate {
    width: 100%;
    background-color: #002E58;
    color: white;
    text-align: center;
    font-size: x-large;
    padding:10px;
    font-weight:bolder;
    outline: 5px double #002E58;
}

/*.TDB_Groups {
    border: solid;
    border-width: 1px;
    border-color: pink;
}

.GroupeTest1 {
    background-color: red;
    border: solid 2px black;
}

.GroupeTest2 {
    background-color: yellow;
    border: solid 2px black;
}

.GroupeTest3 {
    background-color: pink;
    border: solid 2px black;
}

.ItemTest1 {
    background-color: green;
    border: solid 2px black;
    min-height: 377px;
    width: 377px;
    min-width: 377px;
}

.ItemTest2 {
    background-color: blue;
    border: solid 2px black;
    min-height: 377px;
    width: 377px;
    min-width: 377px;
}

.ItemTest3 {
    background-color: cyan;
    border: solid 2px black;
    min-height: 377px;
    width: 377px;
    min-width: 377px;
}*/

.tileParent1 {
    outline: 5px double #3385ff;
    background-color: #3385ff;
    margin: 15px 0px 15px 0px;
}

.tileParent2 {
    outline: 5px double #99c2ff;
    background-color: #99c2ff;
    margin: 15px 0px 15px 0px;
}

.tileLabel {
    text-align: center;
    padding: 10px;
}
.textDateHeure{
    width:100%;
    font-size:large;
    color:white;
}
.dateHeure{
    width:100%;
    font-size:-webkit-xxx-large;
    color:#80ccff;
}

/*Message*/
.message {
    height: 5%;
    border-radius: 5px;
    opacity: 0.9;
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
}

.messageTd {
    text-align: center;
    padding: 5px;
}