.corners {
  display: table;
}

.corner {
  display: table-cell;
  vertical-align: top;
  padding-right: 20px;
}

.corner-title {
  margin-bottom: 0.5em;
}

.corner-example {
  background-color: #F0F0F0;
}

.corner--1 .corner-example {
  height: 110px;
  width: 110px;
}

.corner--2 .corner-example {
  border-radius: 3px;
  height: 110px;
  width: 110px;
}

.corner--3 .corner-example {
  border-radius: 6px;
  height: 185px;
  width: 380px;
}

.shadows {
  display: table;
}

.shadow {
  display: table-cell;
  vertical-align: top;
  padding-right: 20px;
}

.shadow-title {
  margin-bottom: 0.5em;
}

.shadow-example {
  background-color: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
}

.shadow--1 .shadow-example {
  height: 110px;
  width: 245px;
}

.shadow--2 .shadow-container {
  background: #F0F0F0;
  border-radius: 6px;
  padding: 30px 20px;
  width: 380px;
}

.shadow--2 .shadow-example {
  border-radius: 3px;
  height: 110px;
  width: 245px;
  margin-left: auto;
}

.borders {
  display: table;
}

.border {
  display: table-cell;
  vertical-align: top;
  padding-right: 20px;
}

.border-title {
  margin-bottom: 0.5em;
}

.border-example {
  border: 1px solid #F0F0F0;
}

.border--1 .border-example {
  height: 110px;
  width: 110px;
}

.border--2 .border-example {
  border-radius: 3px;
  border-color: #319AED;
  height: 110px;
  width: 110px;
}

.border--3 .border-example {
  border-radius: 6px;
  border-color: #D6EDFF;
  border-width: 2px;
  height: 185px;
  width: 380px;
}

.input-toggle {
  display: table;
  cursor: pointer;
  position: relative;
}

.input-toggle input {
  left: -99999em;
  position: absolute;
  top: 0;
}
.input-toggle .lbl {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.input-toggle .lbl--false {
  padding-right: 30px;
}
.input-toggle .lbl--true {
  padding-left: 30px;
}
.input-toggle .lbl--true:before {
  background-color: #319AED;
  border-radius: 12px;
  content: "";
  display: block;
  left: -22px;
  width: 44px;
  height: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.input-toggle .lbl--true:after {
  background-color: #fff;
  border: 1px solid #319AED;
  border-radius: 12px;
  content: "";
  display: block;
  left: -22px;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  transition: left 0.125s;
}
.input-toggle .lbl--false {
  color: #319AED;
}
.input-toggle .lbl--true {
  color: #B7B7B7;
}
.input-toggle input:checked ~ .lbl--false {
  color: #B7B7B7;
}
.input-toggle input:checked ~ .lbl--true {
  color: #319AED;
}
.input-toggle input:checked ~ .lbl--true:after {
  left: -2px;
}