
  
//  @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
 $main-color: #2962ff;
// :root {
//   --modal-duration: 1s;


// }

// * {
//   box-sizing: border-box;
// }

body {
  // font-family: 'Lato', sans-serif;
  // margin: 0;
  transition:  0.3s ease;
  // height: 100%;
  
}
.navbar{
  background-color: #f6f9ff;
}
#expandToggle.show-nav {
  // transform: translateX(-50%);
  transition-property: width;
  // transition: 0.2s ease;
  // transition-duration: 0.6s;
  width: 200px;
  // display: flex;
  // flex-direction: row;
  // display: flex;
  // flex-direction: column;
}
.sideNav, .navToggle {
  // ul li:hover {
  //   background-color:#1F52DD ;
  //   // padding-left: -20px;
  //   // margin-left: 20px;
  //   // padding-left:-20px ;
  //   // padding-right: 161px;
    
  // }
}

.expandToggle{
  margin-left: -16px;
  position: fixed;
  // margin-top: 85px;
  height: 100%; 
  background-color: #17a2b8;

  // margin-left: -10px;
  transition: transform 0.3s ease;
  // transition-property: width;

  ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
    transition-property: width;

    width: 65px;
    list-style-type: none;
    margin-top: 17px;
   
    // justify-content: space-between;
    
    .icon {
      color: white;
      margin-right: 40px;
      // margin-left: -15px;
      font-size: 23px;
      // position: absolute;
    
    span {
      // margin-left: 20px;
      margin-left: 20px;
      font-size: 17px !important;
      font-family: 'Lato', sans-serif;
    }
  }
}
  ul li {
    // border-bottom: 2px solid $main-color;
    padding-top: 25px;
    padding-bottom: 20px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    // margin-left: 20px;
   
    // padding-left: 40px;
    a {
      margin-left: 20px;
    }
  }

  ul .linkItem:hover {
    background-color:#108EA2 ;
    // width: 100%;
    


  }

  
  ul li:first-of-type {

  }
  ul li a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    align-items: center;
  }
  ul li a:hover {
    // text-decoration: underline;
    // background-color:#1F52DD ;
    text-decoration: none;

  }

}
.toggle {
  background-color:#17a2b8;
  color: white;
  position: fixed;
  padding: .6rem 1rem;
  z-index: 1000;
  font-size: 25px;
  border: none; 
  top: 15px;
  left: 5px;
  // margin-left: 100px;
  border-radius: 2rem;

  :active {
    text-decoration: none;
  }
  
}

.container {
  padding: 15px;
  margin: 0 auto;
  max-width: 100%;
  width: 800px;
}


