body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    margin:0;
    padding:0;
    background-size: 100% ;
    width:100%;
    color:black;
}
#body:before {
    content: "";
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('../img/img.jpg');
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    -webkit-filter: blur(8px);
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
}
#body2:before {
    content: "";
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('../img/pluiedeBanane.jpg');
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    -webkit-filter: blur(8px);
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
}
.navbar{
    background: #06285d;
}

.btnF{
    background-color:#3f8a61;
    border:none;
    color: white;
    border-radius: 3px;
    height: 70px;
}

.btnF:hover{
    background-color:#27502d;
}

.over{
    padding: 15px;
}
.spinner {
    width: 40px;
    height: 40px;
    background-color: #333;

    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}
.hidden{
    visibility: hidden;
}

.transpa {
    background-color: rgba(0,0,0,.0001) !important;
    border: none;
}
@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
}
#wrapper{padding:90px 15px;}
.navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
.card{margin-bottom: 15px; border-radius:0; box-shadow: 0 3px 5px rgba(0,0,0,.1); }
.header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
.leftmenutrigger, .navbar-nav li a .shortmenu{display: none}
.card-title{ font-size: 28px}
@media(min-width:992px) {
    #wrapper{padding: 90px 15px 15px 75px; }
    .navbar-nav.side-nav:hover {left:0;}
    .side-nav li a {padding: 20px}
    .navbar-nav li a .shortmenu {float: right;display: block;opacity: 1}
    .navbar-nav.side-nav:hover li a .shortmenu{opacity: 0}
    .navbar-nav.side-nav{background:  #325997 ;box-shadow: 2px 1px 2px rgba(0,0,0,.1);position:fixed;top:56px;flex-direction: column!important;left:-140px;width:200px;overflow-y:auto;bottom:0;overflow-x:hidden;padding-bottom:40px}
}
.animate{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.navbar-nav li a svg{font-size: 25px;float: left;margin: 0 10px 0 5px;}
.side-nav li { border-bottom: 1px solid #0a3c89;}
.dropdown-menu{
    background: #06285d;
}
.dropdown-menu hover{
    background: #0b387f;
}
/* Tooltip */
.btn btn-primary + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 5px;
    font-size: 12px;
}
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 5px;
    font-size: 12px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}
/* Tooltip on right */
.btn btn-primary + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

    .dropdown-menu li{
        position: relative;
    }
    .dropdown-menu .submenu{
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .dropdown-menu .submenu-left{
        right:100%; left:auto;
    }

    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
        display: block;
    }
}
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

    .dropdown-menu .dropdown-menu{
        margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
    }

}