html{
    position: relative !important;
    height: 100%;
    z-index: -1;
} 

body{
    position: relative !important;
    min-height: 100vh !important;
    max-width: 100%;
    font-family:DIN Pro;
    z-index: -1;
    /* bottom: 0; */
}

/* CUSTOM THEME */

.bg-dark{
    background-color: #000d42 !important; /* #000d42 */
    color: #fff;
}

/* ======= NAVBAR ======= */

/* ICONS */

.fa-droplet {
    color: #77b7fc;
}

img.icon-logo {
    margin-right: 5px;
    margin-left: 5px;
    height:30px;
}

img.icon-logo.icon-in-text{
    margin-right: 1.5px;
    margin-left: 1.5px;
    margin-bottom: 4px;
    height: 25px;
}

/* BRAND */

.navbar-brand{
    font-size:30px;
    font-family: 'DIN Pro Cond'!important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* OTHER NAV ELEMENTS */

.navbar-collapse{
    font-weight: 500;
    font-style: normal;
}

.navbar-nav{
    align-items: center !important;
}

.nav-item{
    margin-left: 3px;
    margin-right: 3px;
}

.nav-link{
    cursor: pointer;
}

.nav-right {
    margin-right: 5px;
}

.navbar-nav .nav-link.activable.actived{
    color: #fff;
}

/* ====== BUTTONS ====== */

/* Primary */

.btn:disabled{
    background-color: #d0d8e6;
    border-color: #d0d8e6;
}

.btn-primary, .btn-primary:active, .btn-primary:visited{
    color: #fff !important;
    background-color: #77b7fc !important;
    border-color: #77b7fc !important;
}

.btn-primary:disabled{
    color: #fff !important;
    background-color: #e3f0fd !important;
    border-color: #e3f0fd !important;
}

.btn-primary:hover{
    color: #fff !important;
    /* background-color: #5da0e4 !important;
    border-color: #5da0e4 !important; */
    filter: brightness(95%);
}

/* Secondary */

.btn-secondary, .btn-secondary:active, .btn-secondary:visited{
    color: #fff !important;
    background-color: #030F40 !important;
    border-color: #030F40 !important;
}

.btn-secondary:hover{
    color: #fff;
    /* background-color: #312c60 !important;
    border-color: #312c60 !important; */
    filter:brightness(115%);
}

/* Connect */

.btn-connect, .btn-connect:active, .btn-connect:visited{
    color: #fff;
    background-color: #9bcd41;
    border-color: #9bcd41;
}

.btn-connect:hover {
    color: #fff;
    /* background-color: #aed564;
    border-color: #aed564; */
    filter: brightness(95%);
}

/* Deconnect */

.btn-deconnect, .btn-deconnect:active, .btn-deconnect:visited{
    color:#fff;
    background-color: #F67536;
    border-color: #F67536;
} 

.btn-deconnect:hover{
    color: #fff;
    filter: brightness(95%);
}

/* CHECKBOX */

.form-check-input:checked{
    background-color: #9bcd41;
    border-color: #9bcd41;
}

/* INPUT SELECT */

input[type=text], select{
    text-align: center;
    text-align-last: center;
}

/* INPUT file */

.form-control[type=file]{
    border-color: #030F40;
}

input[type=file]::file-selector-button {
    color: #fff;
    border-color: #030F40;
    background-color: #030F40 !important;
  }

/* INPUT date */

/* input[type=date]{
    max-width: 120px !important; 
    min-width: 110px !important;
    padding: 0%;
    margin: 0%;
} */

/* SPINNER */

.suezSpinner{
    color: #9bcd41 !important;
}

.loadPredSpinner{
    left: 50%;
    position: fixed;
    top: 30%;
}

.plotly-graph-spinner{
    min-width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* OFFCANVAS */

.offcanvas-bottom{
    position: absolute;
    top: 56px;
    /* bottom: 0px !important; */
    min-height: 95% !important;
}

/* .content {
    padding: 0%;
    margin: 0%;
    position:absolute;
    display: flex;
    flex: 1 0 auto;
    top: 56px;
    bottom: 0;
    width: 100%;
    min-width: 100%;
    min-height: 90%;
    background-color: aquamarine;
} */

/* .navbar {
    z-index: 1;
} */

/* Graphs */

.plotly-graph {
    min-width: 100% !important;
}

.plotly-graph-history {
    max-height: 300px !important;
}

/* --------------- UPLOAD --------------- */

/* table */

/* .dataTable.tbody{
          height:200px;
          overflow-y:auto;
          width: 100%;
} */

/*  */

/* ---------------- MODAL --------------- */

/* DB INFO */

.header-table-db.header-graph-db{
    height: 38px;
    text-align: center;
}

/* Home Page */

.map-wrapper{
    position: relative;
    min-height: 75%;
    max-width: 100%;
}

.home_map{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    /* min-height: 650px; */
    /* height: 75%; */
    top: 0;
    /* right: 0; */
    bottom: 0;
    /* left: 0; */
    /* height: 100%; */
}

.welcomeText{
    padding: 10px;
    margin: 0;
    display:table;
    width: 100%;
    position: relative;
    min-height: 23%;
    justify-content: center;
    vertical-align: middle;
    /* align-items: center; */
    /* margin: auto; */
}

.welcomeText .text-content{
    display: table-cell;
    padding: 0;
    margin: 0;
    /* position: absolute; */
    /* margin: auto; */
    /* top: 50%; */
    /* display: table-cell; */
    text-align: center;
    /* vertical-align: middle; */
}

.homePage{
    position: absolute;
    padding: 0 !important;
    margin: 0 !important;
    /* min-height: 100%; */
    /* top: 62.43px; */
    /* right: 0;
    bottom: 0;
    left: 0; */
    /* width: 100%; */
    /* height: 94% !important; */
    z-index: -1;
}

.popupMarker{
    font-family:DIN Pro Cond;
    font-size:15px;

}

footer{
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    /* margin-top: 50px; */
    text-align:right;
}

footer .icon-logo{
    height: 50px;
}

.home{
    padding: 10px;
    top: 62.43px;
    bottom: 50px;
    position: absolute;
    overflow: scroll;
    z-index: -1;
}

/* .row{
    max-width: 100%;   
} */

/* .run-model-param.input-group.form-select.input[type="text"], select{ */
    /* min-width: fit-content !important; */
    /* max-width: 200px; */
/* } */

.graphPrediction{
    width: 100%;
    /* height: 100%; */
}