html {
    position: relative;
    min-height: 100%;
  }

.container-lg {
    margin-left:200px;
    
}
.hb-navbar {
    background-color: #e3f2fd;
}

.hidden {
    display: none;
}

.upper {
    text-transform: uppercase;
}
body {
    margin-bottom: 60px; /* Margin bottom by footer height */
}
.hb-body {
    font-family: "Open Sans", sans-serif;
    background-color:whitesmoke;
    background-image: url('cloud.jpg');
    
}
.hb-body-2 {
    font-family: "Open Sans", sans-serif;
    background-color:whitesmoke;
    background: linear-gradient(to bottom, white 0%, rgb(226, 242, 250) 100%);
 
}

.hb-body-3 {
    font-family: "Open Sans", sans-serif;
    background-color:whitesmoke;
    background: linear-gradient(to bottom, white 0%, rgb(225, 231, 235) 100%); 
}


.hb-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #cce2f5;
}
  
  

.hb-footer {
    padding-left:10px;
}


/* Dashboard */

.hb-dbrd-item {
    height: 100px;
    width: 100px;
    border-radius: 20px;
    border:1px solid #007bff;
    background-color: #007bff;
    color: #e3f2fd;
    text-align: center;
    padding-top: 30px;
    
}

.list-group{
    max-width: 1200px;
    margin-bottom: 10px;
    border-radius: 20px;
    
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}


.hb-container {
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: auto;
    margin-left: auto;
}

.selectionResult {
    display: none;
}

.hb-top-border {
    margin-top:100px;
}

.hb-width-100 {
    width: 100%;
}

/* icons 
https://codepen.io/dan10gc/pen/QMBGXP
https://coolors.co/9d9d98-767ae8-ccc4e3-dfd3e0-dacccd
https://html-online.com/articles/gradient-background-buttons-css-html/
*/

.icon-container {
    margin: 20px auto;
    width: 140px;
    height: 140px;
    border-radius: 20%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: end;
            align-items: flex-end;
    background-color: #ececec;
    position: relative;
    background-color: #767AE8;
    color:whitesmoke    ;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:20px;
    padding-bottom:80px;
    
  }
  
  .bar {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: #f7ca18;
    border-radius: 20% 20% 0 0;
    margin-bottom: 20px;
  }
  .bar-left {
    border-radius: 10px 0 0 10px;
  }
  .bar-middle {
    height: 100px;
    border-radius: 10px 0 0 0;
    z-index: 1;
  }
  .bar-right {
    background-color: #f27935;
    height: 150px;
    border-radius: 10px 10px 10px 0;
    overflow: hidden;
  }


  .gradient-button {
    transition: 0.5s;
    background-size: 200% auto;
    color: #FFF;
    box-shadow: 0 0 20px #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    display: inline-block;
}
.gradient-button:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    margin: 8px 10px 12px;
}
.gradient-button-1 {background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%)}
.gradient-button-1:hover { background-position: right center; }


.gradient-button-2 {background-image: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%)}
.gradient-button-2:hover { background-position: right center; }

.gradient-button-3 {background-image: linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%)}
.gradient-button-3:hover { background-position: right center; }

.gradient-button-4 {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%)}
.gradient-button-4:hover { background-position: right center; }