body {
  background-color: #f0f0f0;
}

#form-connexion {
  margin            : 10% auto;
  padding-left      : 6px;
  padding-right     : 6px;
  padding-top       : 16px;
  padding-bottom    : 12px;
  max-width         : 560px;
  background-color  : #FFFFFF;
  -webkit-box-shadow: 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60, 60, 60, 0.15);
  box-shadow        : 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60, 60, 60, 0.15);
  border-radius     : 5px;
}

#img-connexion {
  text-align: center;
  width     : 20%;
  height    : 20%;
}

.input-container {
  display       : flex;
  min-width     : 245px;
  padding-top   : 10px;
  padding-left  : 16px;
  padding-right : 16px;
  text-align    : center;
  vertical-align: middle;
}

.img-container {
  text-align    : center;
  vertical-align: middle;
}

.footer-container {
  text-align    : center;
  vertical-align: middle;
}

.icon {
  padding   : 10px;
  background: #1bb8e3;
  color     : white;
  min-width : 50px;
  text-align: center;
}

.input-field {
  width  : 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid #1bb8e3;
}

/* The side navigation menu */
.sidebar {
  margin          : 0;
  padding         : 10px;
  width           : 200px;
  background-color: #dadada;
  position        : fixed;
  height          : 100%;
  overflow        : auto;
  border-right    : 1px solid;
  border-color    : rgb(165, 164, 164);
  z-index: 10;
}

/* Sidebar links */
.sidebar a {
  display        : block;
  color          : black;
  padding        : 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #1bb8e3;
  color           : white;
}

/* Active/current link */
#connexion {
  background-color: #1bb8e3;
  color           : white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color           : white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  padding    : 1px 16px;
  height     : 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    width   : 100%;
    height  : auto;
    position: relative;
  }

  .sidebar a {
    float: left;
  }

  div.content {
    margin-left: 0;
  }
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float     : none;
  }
}


.custom-control-input:focus~.custom-control-label::before {
  /* when the button is toggled off 
  it is still in focus and a red border will appear */
  border-color: red !important;
  /* box shadow is blue by default
  but we do not want any shadow hence we have set 
  all the values as 0 */
  box-shadow  : 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

/*sets the background color of
          switch to blue when it is checked*/
.custom-control-input:checked~.custom-control-label::before {
  border-color    : #1bb8e3 !important;
  background-color: #1bb8e3 !important;
}

/*sets the background color of
          switch to blue when it is active*/
.custom-control-input:active~.custom-control-label::before {
  background-color: #1bb8e3 !important;
  border-color    : #1bb8e3 !important;
}

/*sets the border color of switch
          to red when it is not checked*/
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: red !important;
}

h1 {
  text-align: center;
}