* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

//
// Flex display content
//

@mixin _display_flex($_direction) {
  display: flex;
  flex-direction: $_direction;
}

@mixin _flex($_grow, $_shrink, $_basis: 0) {
  // Flex Basis needs to be explicitly set to 0 for flexbox to work in Safari
  flex: $_grow $_shrink $_basis;
}


// Flex Column
.ccss-flex-container-col {
  @include _display_flex(column);
  height: 100%;
}

.ccss-flex-container-col .ccss-flex-header {
  @include _flex(0, 1);
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid $colour-base;
}

.ccss-flex-container-col .ccss-flex-content {
  @include _flex(1, 1);
  overflow-y: auto;
}

.ccss-flex-container-col .ccss-flex-footer {
  @include _flex(0, 1);
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid $colour-base;
}


// Flex Row
.ccss-flex-container-row {
  @include _display_flex(row);
  height: 100%;
}

.ccss-flex-container-row .ccss-flex-hard-left {
  @include _flex(0, 1);
  border-right: 1px solid $colour-base;
}

.ccss-flex-container-row .ccss-flex-content {
  @include _flex(1, 1);
  overflow-y: auto;
  border-right: 1px solid $colour-base;
}

.ccss-flex-container-row .ccss-flex-hard-right {
  @include _flex(0, 1);
}


//
// Dividers
//

hr.ccss-break {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
  border-style: none;
  border-bottom: 1px solid #808080;
}
hr.ccss-break.medium {
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 50px;
  margin-right: 50px;
  border-bottom: 1px solid #808080;
}
hr.ccss-break.small {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 90px;
  margin-right: 90px;
  border-bottom: 1px solid #d3d3d3;
}

// Width & Height
[class*=w-] {
  float: left;
}

.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-80 {
  width: 80%;
}

.w-75 {
  width: 75%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

.w-Half {
  width: 50%;
}

.w-50 {
  width: 50%;
}

.w-40 {
  width: 40%;
}

.w-Third {
  width: 33.3333333%;
}

.w-30 {
  width: 30%;
}

.w-Quarter {
  width: 25%;
}

.w-25 {
  width: 25%;
}

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%;
}

.w-5 {
  width: 5%;
}

[class*=h-] {
  float: left;
}

.h-100 {
  height: 100%;
}

.h-95 {
  height: 95%;
}

.h-75 {
  height: 75%;
}

.h-50 {
  height: 50%;
}

.h-25 {
  height: 25%
}

.h-20 {
  height: 20%;
}

.h-15 {
  height: 15%;
}

.h-10 {
  height: 10%;
}

.h-5 {
  height: 5%;
}

.h-15-30 {
  min-height: 15%;
  max-height: 30%;
}

.h-15-60 {
  min-height: 15%;
  max-height: 60%;
}