/* --------------------------------- BODY ----------------------- */
* {padding:0; margin:0; outline: none;}
html,
body {
  width: 100%;
  min-height: 100%;
}
body {
  font: normal 14px 'Cabin', sans-serif, Arial;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background: #dddddd;
  color: #3c3f41;
  text-align: left;
}
#container {
  width: 100%;
  min-height: calc(100vh - 55px);
}
#header {
  width: 100%;
}
#footer {
  width: 100%;
  height: 55px;
  background: rgba(13, 33, 66, 0.65);
}




/* --------------------------------- HEADER ----------------------- */

#headerBar {
  position: relative;
  height: 70px;
  background: rgba(0,0,0,0.1);
  color: #ffffff;
  box-shadow: 1px 1px 4px #222222;
}
#headerBar #logo {
  position: relative;
  width: 65px;
  height: 70px;
  background-size: contain;
}
#headerBar #mainMenu {
  position: relative;
  text-align: right;
}
#headerBar .menuItem {
  position: relative;
  display: inline-block;
  line-height: 70px;
  height: 70px;
  padding-right: 10px;
  color: #2b2b2b;
}

/* --------------------------------- MAIN ----------------------- */

.cs-buffer-5 { height: 5px; margin: 0;padding: 0}
.cs-buffer-10 { height: 10px; margin: 0;padding: 0}
.no-wrap {white-space:nowrap;}
.dib {display: inline-block}
.text-c {text-align: center}
.text-l {text-align: left}
.text-r {text-align: right}
.text-b {font-weight: bold}
.text-green {color: #008000}
.num-fld {
  text-align: right;
}

/* --------------------------------- FOOTER ----------------------- */
.footer-copyright {
  color: #ffffff;
  line-height: 55px;
  font-weight: bold;
  text-align: center;
}

/* Background Colours
-------------------------------------------------- */
.cs-bg-gray-lt {
  color: #2b2b2b;
  background: rgb(254,255,232);
  background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
  background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
}
.cs-bg-green {
  color: #ffffff;
  background: rgb(169,219,128);
  background: -moz-linear-gradient(top,  rgba(169,219,128,1) 0%, rgba(150,197,111,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
  background: linear-gradient(to bottom,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
}
.cs-bg-red {
  color: #ffffff;
  background: rgb(255,48,25);
  background: -moz-linear-gradient(top,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}
.cs-bg-blue {
  color: #ffffff;
  background: rgb(44,83,158);
  background: -moz-linear-gradient(top, rgb(71, 128, 232) 0%, rgba(44,83,158,1) 100%);
  background: -webkit-linear-gradient(top, rgb(71, 128, 232) 0%,rgba(44,83,158,1) 100%);
  background: linear-gradient(to bottom, rgb(71, 128, 232) 0%,rgba(44,83,158,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 );
}
.cs-bg-amber {
  color: #ffffff;
  background: rgb(255,175,75);
  background: -moz-linear-gradient(top,  rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
}

/* Custom Buttons Colours
-------------------------------------------------- */
/* Purple */
.btn-purple {
  background: #3e09af;
  color: #cacaca;
}
.btn-purple:hover, .btn-purple:focus, .open > .dropdown-toggle.btn-purple {
  background: #5e36ff;
  color: #ffffff;
}
.btn-purple:active {
  background: #4e18e6;
  color: #ffffff;
  box-shadow: none;
}

/* Green */
.btn-green-lt {
  background: #bff1d8;
  color: #1a0933;
}
.btn-green-lt:hover, .btn-green-lt:focus, .open > .dropdown-toggle.btn-green-lt {
  background: #e0f6ff;
  color: #1a0933;
}
.btn-green-lt:active {
  background: #bff1d8;
  color: #1a0933;
  box-shadow: none;
}

/* Orange */
.btn-orange {
  background: #f0ad4e;
  color: #1a0933;
  border: 1px solid #cccccc;
}
.btn-orange:hover, .btn-orange:focus, .open > .dropdown-toggle.btn-orange {
  background: #ffdb7f;
  color: #1a0933;
  border: 1px solid #999999;
}
.btn-orange:active {
  background: #ffba50;
  color: #1a0933;
  box-shadow: none;
}

/* Custom Checkbox and Radio buttons
-------------------------------------------------- */

.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
  font-size: 1.2em;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
  cursor: pointer;
}

.radio .cr {
  border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 20%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
  display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
  opacity: .5;
}
