.greyback1 {
  background-color: #e6e6e6;
}

.greyback2 {
  background-color: #c9c9c9;
}

.greyback3 {
  background-color: #f3f3f3;
}

.greyback4 {
  background-color: #888888;
}

.blueback {
  background-color: red;
}

.blackback {
  background-color: #000000;
}

.branddefaultback {
  background-color: #005baa;
}

.branddarkback {
  background-color: #002444;
}

.brandlightback {
  background-color: #1190ff;
}

.whiteback {
  background-color: #ffffff;
}

.brandwashedoutback {
  background-color: #115a99 #002444;
}

.greydarkback {
  background-color: #666666;
}

.greylightback {
  background-color: #ededed;
}

.greydefaultback {
  background-color: #a8a8a8;
}

.accentdefaultback {
  background-color: #009b9f;
}

.accentdarkback {
  background-color: #003839;
}

/* Toggle Switch Globals: All switches should take on the class `hamburger-toggle-switch` as well as their variant that will give them unique properties. This class is an overview class that acts as a reset for all versions of the icon. */
.hamburger-toggle-switch {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.hamburger-toggle-switch:focus {
  outline: none;
}

.hamburger-toggle-switch span {
  display: block;
  position: absolute;
  top: 22.5px;
  left: 5px;
  right: 5px;
  height: 5px;
  background: white;
}

.hamburger-toggle-switch .hamburgerSpanTwo {
  display: block;
  position: absolute;
  top: 22.5px;
  left: 5px;
  right: 5px;
  height: 5px;
  background: white;
}

.hamburger-toggle-switch span::before, .hamburger-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #fff;
  content: "";
}

.hamburger-toggle-switch span::before {
  top: -17.5px;
}

.hamburger-toggle-switch span::after {
  bottom: -17.5px;
}

/* Style 1: Rotating hamburger icon (rot), that simply rotates 90 degrees when activated. Nothing too fancy, simple transition. */
.hamburger-toggle-switch__rot {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__rot span {
  transition: transform 0.2s;
}

/* flipped state, i.e. menu open */
.hamburger-toggle-switch__rot.flipped {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__rot.flipped span {
  transform: rotate(90deg);
}

/* Style 2: Hamburger to "x" (htx). Takes on a hamburger shape, bars slide down to center and transform into an "x". */
.hamburger-toggle-switch__htx {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htx span {
  transition: background 0s 0.2s;
}

.hamburger-toggle-switch__htx span::before, .hamburger-toggle-switch__htx span::after {
  transition-duration: 0.2s, 0.2s;
  transition-delay: 0.2s, 0s;
}

.hamburger-toggle-switch__htx span::before {
  transition-property: top, transform;
}

.hamburger-toggle-switch__htx span::after {
  transition-property: bottom, transform;
}

/* flipped state, i.e. menu open */
.hamburger-toggle-switch__htx.flipped {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htx.flipped span {
  background: none;
}

.hamburger-toggle-switch__htx.flipped span::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger-toggle-switch__htx.flipped span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.hamburger-toggle-switch__htx.flipped span::before, .hamburger-toggle-switch__htx.flipped span::after {
  transition-delay: 0s, 0.2s;
}

/* Style 3: Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing arrow. Usually indicates an off canvas menu sliding in from left that will be close on re-click of the icon. */
.hamburger-toggle-switch__htla {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htla span {
  transition: transform 0.2s;
}

.hamburger-toggle-switch__htla span::before {
  transform-origin: top right;
  transition: transform 0.2s, width 0.2s, top 0.2s;
}

.hamburger-toggle-switch__htla span::after {
  transform-origin: bottom right;
  transition: transform 0.2s, width 0.2s, bottom 0.2s;
}

/* flipped state, i.e. menu open */
.hamburger-toggle-switch__htla.flipped {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htla.flipped span {
  transform: rotate(180deg);
}

.hamburger-toggle-switch__htla.flipped span::before, .hamburger-toggle-switch__htla.flipped span::after {
  width: 50%;
}

.hamburger-toggle-switch__htla.flipped span::before {
  top: 0;
  transform: translateX(25px) translateY(2.5px) rotate(45deg);
}

.hamburger-toggle-switch__htla.flipped span::after {
  bottom: 0;
  transform: translateX(25px) translateY(-2.5px) rotate(-45deg);
}

/* Style 4: Hamburger to right-arrow (htra). Hamburger menu transforms to a right-pointing arrow. Usually indicates an off canvas menu sliding in from right that will be close on re-click of the icon. */
.hamburger-toggle-switch__htra {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htra span {
  transition: transform 0.2s;
}

.hamburger-toggle-switch__htra span::before {
  transform-origin: top left;
  transition: transform 0.2s, width 0.2s, top 0.2s;
}

.hamburger-toggle-switch__htra span::after {
  transform-origin: bottom left;
  transition: transform 0.2s, width 0.2s, bottom 0.2s;
}

/* flipped state, i.e. menu open */
.hamburger-toggle-switch__htra.flipped {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-toggle-switch__htra.flipped span {
  transform: rotate(180deg);
}

.hamburger-toggle-switch__htra.flipped span::before, .hamburger-toggle-switch__htra.flipped span::after {
  width: 50%;
}

.hamburger-toggle-switch__htra.flipped span::before {
  top: 0;
  transform: translateX(-5px) translateY(2.5px) rotate(-45deg);
}

.hamburger-toggle-switch__htra.flipped span::after {
  bottom: 0;
  transform: translateX(-5px) translateY(-2.5px) rotate(45deg);
}

/* Style 5: Woodard Logo */
.hamburger-woodard span {
  display: block;
  position: absolute;
  top: 21.5px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: white;
}

.hamburger-woodard .hamburgerSpanTwo {
  display: block;
  position: absolute;
  top: 21.5px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: white;
}

.hamburger-woodard span::before, .hamburger-woodard span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: #fff;
  content: "";
}

.hamburger-woodard span::before {
  top: -16.5px;
}

.hamburger-woodard span::after {
  bottom: -16.5px;
}

.hamburger-woodard {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-woodard span {
  transition: transform 0.2s, left 0.2s, right 0.2s;
}

.hamburger-woodard span::before {
  transform-origin: top right;
  transition: transform 0.2s, height 0.2s, width 0.2s, bottom 0.2s;
}

.hamburger-woodard span::after {
  transform-origin: bottom right;
  transition: transform 0.2s, height 0.2s, width 0.2s, bottom 0.2s;
}

/* flipped state, i.e. menu open */
.hamburger-woodard.flipped {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-woodard.flipped span {
  transform: rotate(270deg) skewY(10deg) translate(0, -3.5px);
  left: 11px;
  right: 11px;
}

.hamburger-woodard.flipped .hamburgerSpanTwo {
  transform: rotate(270deg) skewY(-10deg) translate(0, 3.5px);
}

.hamburger-woodard.flipped span::after {
  transform: translate(0, 3.5px);
}

.hamburger-woodard.flipped span::before {
  transform: skewY(-20deg) translate(0, -1.75px);
}

.hamburger-woodard.flipped span::before, .hamburger-woodard.flipped span::after {
  height: 12.875px;
}

.hamburger-woodard .hamburgerSpanTwo::before {
  display: none;
}

.hamburger-woodard .hamburgerSpanTwo::after {
  display: none;
}

/* Style 6: Woodard resizer*/
.hamburger-woodard-resizer, .hamburger-woodard-resizer span, .hamburger-woodard-resizer span::before, .hamburger-woodard-resizer span::after, .hamburger-woodard-resizer .hamburgerSpanTwo {
  transition: all 0.2s ease;
}

.hamburger-woodard-resizer span, .hamburger-woodard-resizer span::before, .hamburger-woodard-resizer span::after, .hamburger-woodard-resizer .hamburgerSpanTwo {
  display: block;
  position: absolute;
  background-color: #ffffff;
}

.hamburger-woodard-resizer {
  background-color: rgba(1, 1, 1, 0);
}

.hamburger-woodard-resizer span, .hamburger-woodard-resizer .hamburgerSpanTwo {
  top: 21.5px;
  left: 5px;
  right: 5px;
  height: 7px;
}

.hamburger-woodard-resizer span::before, .hamburger-woodard-resizer span::after {
  left: 0;
  width: 100%;
  height: 7px;
  content: "";
}

.hamburger-woodard-resizer span::before {
  top: -16.5px;
  transform-origin: top right;
}

.hamburger-woodard-resizer span::after {
  bottom: -16.5px;
  transform-origin: bottom right;
}

.hamburger-woodard-resizer.flipped {
  height: 220px;
  width: 220px;
  background-color: #ffffff;
}

.hamburger-woodard-resizer.flipped span, .hamburger-woodard-resizer.flipped span::before, .hamburger-woodard-resizer.flipped span::after, .hamburger-woodard-resizer.flipped .hamburgerSpanTwo {
  background: #005baa;
}

.hamburger-woodard-resizer.flipped span::before, .hamburger-woodard-resizer.flipped span::after {
  height: 56.65px;
}

.hamburger-woodard-resizer.flipped span {
  top: 99.5px;
  height: 30.8px;
  transform: rotate(-90deg) skewY(10deg) translate(0, -15.4px);
  left: 48.4px;
  right: 48.4px;
}

.hamburger-woodard-resizer.flipped span::before {
  top: -72.6px;
  transform: skewY(-20deg) translate(0, -7.7px);
}

.hamburger-woodard-resizer.flipped span::after {
  bottom: -72.6px;
  transform: translate(0, 15.4px);
}

.hamburger-woodard-resizer.flipped .hamburgerSpanTwo {
  top: 99.5px;
  transform: rotate(-90deg) skewY(-10deg) translate(0, 15.4px);
}

.hamburger-woodard-resizer .hamburgerSpanTwo::before, .hamburger-woodard-resizer .hamburgerSpanTwo::after {
  display: none;
}

#navigation {
  position: relative;
  width: 100%;
  background: #232323;
  background: -moz-linear-gradient(top, #232323 0%, #444444 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #232323), color-stop(100%, #444444));
  background: -webkit-linear-gradient(top, #232323 0%, #444444 100%);
  background: -o-linear-gradient(top, #232323 0%, #444444 100%);
  background: -ms-linear-gradient(top, #232323 0%, #444444 100%);
  background: linear-gradient(to bottom, #232323 0%, #444444 100%);
}

#nav {
  position: absolute;
  height: 100%;
  bottom: 0;
  right: 0;
  width: 100%;
}

#navUser {
  position: absolute;
  top: 30px;
  right: 30px;
  float: right;
}

#navContent {
  position: absolute;
  bottom: 10px;
  right: 30px;
  float: right;
}

#navigation img {
  padding-left: 30px;
}

#navigation span {
  padding: 0 10px;
}

.noRightPad {
  padding-right: 0px !important;
}

.noLeftPad {
  padding-left: 0px !important;
}

.noPad {
  padding: 0px !important;
}

.uk-button i {
  padding-right: 5px;
}

.login .uk-panel, .passwordChangeEmail .uk-panel, .securityQuestions .uk-panel, .changePassword .uk-panel, .preferences .uk-panel {
  width: 300px;
}

.signup .uk-panel, .PendingMessage .uk-panel {
  width: 600px;
}

.newTicket .uk-panel, #PendingMessage .uk-panel {
  width: 500px;
}

.uk-form-stacked .uk-form-row label {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

.formBox {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#underButtons button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 0 20px;
}

#navigation {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.uk-button, .uk-icon-button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.formbox .uk-button {
  box-shadow: 0 0px 0px transparent, 0 0px 0px transparent;
}

.formBox .uk-button {
  box-shadow: 0 0px 0px transparent, 0 0px 0px transparent;
}

.uk-icon-button.uk-button-success {
  background-color: #8cc14c;
  border: 1px solid #98C85F;
  color: #ffffff;
}

.uk-icon-button.uk-button-success:active {
  background-color: #72ae41;
  color: #ffffff;
}

.uk-icon-button.uk-button-success:hover, .uk-icon-button.uk-button-success:focus {
  background-color: #8ec73b;
  color: #ffffff;
}

#message {
  min-height: 70px;
  margin: 20px auto 0;
}

.adminNav {
  margin: 0 0 20px 0;
}

h1 i, h2 i {
  color: #BBBBBB;
}

h1 i {
  margin-right: 10px;
}

h2 i {
  margin-right: 5px;
}

.editClass {
  float: right;
}

.editClass:hover {
  cursor: pointer;
}

.ts-headerQuickInfo {
  margin: 0 10px 0 0;
  padding-left: 10px;
  border-left: 1px solid #CCCCCC;
}

.uk-panel .ts-headerQuickInfo:first-child {
  margin: 0 10px 0 0;
  padding-left: 35px;
  border-left: 0px solid #CCCCCC;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ticketContents span {
  font-weight: bold;
}

#commentThread {
  background-color: rgba(255, 0, 0, 0.3);
}