* {
  box-sizing: border-box; }

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

img {
  max-width: 100%; }

/* ---------------------------------------------------------------------------------------------------- */
/* ANGULAR */
/* ---------------------------------------------------------------------------------------------------- */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none; }

/* VARIABLES */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* CENTER IN PAGE WHEN HIT MAX WIDTH */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  background-color: #464646; }

#max-width-container {
  flex: 0 1 1054px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch; }

#header {
  z-index: 0;
  background: black;
  color: white;
  font-size: 15px;
  box-shadow: 0px 7px 15px 0px #888888; }

@media (min-width: 0px) and (max-width: 350px) {
  #header {
    font-size: 13px; } }

.z-index-999 {
  z-index: 999; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* HEADER - NAVIGATION - TOP NAV - (BOOTSTRAP NOT USED)  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.caea-nav {
  padding-left: 0;
  margin-bottom: 0; }
  @media (max-width: 768px) {
    .caea-nav {
      display: block;
      /*
       z-index: 1000;
        position: fixed;
        left: 0;
        width: $width1;
        height: 100%;
        margin-left: $width1 * -1;
        overflow-y: auto;
        background: #000;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
           */ } }
  @media (min-width: 769px) {
    .caea-nav {
      display: block; } }

.caea-nav > li {
  position: relative;
  display: block;
  float: left;
  line-height: 4em;
  /* NAV_BAR_MIN_HEIGHT - USE */
  padding-left: 0.8em; }

.caea-nav li:last-child {
  padding-right: 0.8em; }

.caea-nav > li > a {
  color: white;
  line-height: 4em;
  /* NAV_BAR_MIN_HEIGHT - USE */
  padding: 0; }

.caea-collapsable-menu-button {
  min-height: 4em;
  /* NAV_BAR_MIN_HEIGHT - USE */ }
  @media (max-width: 768px) {
    .caea-collapsable-menu-button {
      display: block; } }
  @media (min-width: 769px) {
    .caea-collapsable-menu-button {
      display: none; } }

@media (max-width: 768px) {
  .caea-nav.is-expanded {
    margin-left: 0; } }

/* ---------------------------------------------------------------------------------------------------- */
/* SECOND TOP NAV */
/* ---------------------------------------------------------------------------------------------------- */
#second-top-nav {
  display: none; }
  @media (max-width: 768px) {
    #second-top-nav {
      display: block; } }

@media (max-width: 768px) {
  #second-top-nav div:first-child {
    box-shadow: 0px 7px 15px 0px #888888; } }

@media (max-width: 768px) {
  #second-top-nav-logo-img {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    width: 250px; } }

@media (min-width: 0px) and (max-width: 350px) {
  #second-top-nav-logo-img {
    width: 200px; } }

#below-header {
  flex: 1;
  display: flex; }
  @media (max-width: 320px) {
    #below-header {
      flex-direction: column; } }

@media (min-width: 321px) and (max-width: 768px) {
  #below-header {
    flex-direction: column; } }

#l-nav {
  flex: 0 0 250px;
  order: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #951B3C;
  border-color: #080808;
  box-shadow: 10px 0px 15px 0px #888888; }
  @media (max-width: 320px) {
    #l-nav {
      display: none; } }

@media (min-width: 321px) and (max-width: 768px) {
  #l-nav {
    display: none; } }

/* ---------------------------------------------------------------------------------------------------- */
/* LOGO*/
/* ---------------------------------------------------------------------------------------------------- */
#left-nav-logo-outer-box {
  flex: 0 1 auto;
  height: 225px;
  background-color: #231F20; }

#left-nav-logo-inner-box {
  height: 200px;
  background-color: white;
  text-align: center;
  box-shadow: inset 5px 0px 5px 0px #888; }

#left-nav-logo-img {
  padding-top: 50px;
  padding-bottom: 60px;
  width: 225px; }

/* ---------------------------------------------------------------------------------------------------- */
/* BELOW LOGO*/
/* ---------------------------------------------------------------------------------------------------- */
#left-nav-below-logo {
  flex: 1 1 auto;
  padding-left: 10px;
  box-shadow: inset 5px 0px 5px 0px #460719; }

#m-content {
  flex: 1;
  order: 1;
  overflow: auto;
  padding: 10px 0 10px 10px; }
  @media (max-width: 768px) {
    #m-content {
      padding: 0px 0 10px 10px;
      box-shadow: inset 5px 0px 5px 0px #888888; } }

#m-content .container-fluid {
  padding-right: 0; }

/*-------------------------------*/
/*           VARIABLES           */
/*-------------------------------*/
#slide-in-menu {
  z-index: 1000;
  position: fixed;
  right: 0;
  width: 80%;
  height: 100%;
  margin-right: -80%;
  overflow-y: auto;
  background: #000;
  transition: all 0.5s ease; }

#slide-in-menu.toggled {
  margin-right: 0; }

.slide-in-menu-header {
  padding-top: 5px;
  padding-left: 15px;
  color: white; }

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%; }
  .sidebar-nav li {
    display: inline-block;
    line-height: 20px;
    position: relative;
    width: 100%; }
    .sidebar-nav li:before {
      background-color: #1c1c1c;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 3px;
      z-index: -1; }
    .sidebar-nav li:hover:before {
      transition: width .2s ease-in;
      width: 100%; }
    .sidebar-nav li a {
      color: #dddddd;
      display: block;
      text-decoration: none; }
  .sidebar-nav li.open:hover before {
    transition: width .2s ease-in;
    width: 100%; }
  .sidebar-nav .dropdown-menu {
    background-color: #222222;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%; }

.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none; }

.sidebar-nav > .sidebar-brand {
  font-size: 20px;
  height: 65px;
  line-height: 44px; }

.slide-in-menu-backdrop {
  background-color: gray;
  opacity: 0.5;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990; }

.important-message-container {
  display: block;
  padding: 10px; }

.important-message-main-text {
  font-weight: bold; }
  @media (max-width: 767px) {
    .important-message-main-text {
      margin-bottom: 0px; } }

.important-message-secondary-text {
  margin-bottom: 0px; }

.boxed-page-container {
  background-color: #E6E7E8;
  margin: auto;
  margin-right: 0;
  margin-top: 10px;
  width: 95%;
  min-height: 300px;
  padding-bottom: 30px; }

.page-header-base, .boxed-page-header, .open-page-header {
  margin: 0;
  padding: 10px 20px 0px 20px;
  color: #9C2140;
  font-size: 36px; }
  @media (max-width: 767px) {
    .page-header-base, .boxed-page-header, .open-page-header {
      font-size: 30px;
      padding-bottom: 5px; } }

.open-page-header {
  padding: 0; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM */
/* ---------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .form-control {
    font-size: 16px; } }

.form-control:focus {
  border-color: black;
  box-shadow: inset 0 1px 1px grey, 0 0 8px grey; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - ELECTIONS TABLE */
/* ---------------------------------------------------------------------------------------------------- */
.form-table-outer-container-base, .form-table-outer-container-transparent, .form-table-outer-container {
  margin: auto;
  width: 90%;
  margin-top: 20px;
  margin-bottom: 20px; }
  @media (max-width: 767px) {
    .form-table-outer-container-base, .form-table-outer-container-transparent, .form-table-outer-container {
      margin-bottom: 0; } }

.form-table-outer-container {
  background-color: white; }
  .form-table-outer-container.tight-top {
    margin-top: 0; }
  .form-table-outer-container.tight {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px; }
  .form-table-outer-container.tight-no-padding-top-or-bottom {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0; }

.form-table-inner-container {
  display: flex;
  flex-wrap: wrap; }

.form-table-inner-container-block {
  display: block;
  padding-left: 15px;
  padding-right: 15px;
  overflow: auto; }

.fform-table-inner-container > div {
  padding: 10px;
  background-color: white; }

.fform-table-inner-container div.productionCol {
  width: 40%;
  font-weight: bold; }

.fform-table-inner-container div.engagerCol {
  width: 40%; }

.fform-table-inner-container div.actionCol {
  width: 20%;
  font-weight: bold;
  color: black;
  background-color: #FEE1AB;
  text-align: center;
  padding: 0; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - Split column */
/* ---------------------------------------------------------------------------------------------------- */
.flex-65-35-percent-65 {
  flex: 0 1 65%; }
  @media (max-width: 768px) {
    .flex-65-35-percent-65 {
      flex: 0 1 100%; } }

.flex-65-35-percent-35 {
  flex: 0 1 35%; }
  @media (max-width: 768px) {
    .flex-65-35-percent-35 {
      flex: 0 1 100%;
      margin-top: 10px; } }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - Add to list row */
/* ---------------------------------------------------------------------------------------------------- */
.add-to-list {
  font-weight: normal; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - ROW
/* ---------------------------------------------------------------------------------------------------- */
.form-row {
  margin-bottom: 20px;
  flex: 0 1 100%;
  display: flex;
  flex-wrap: wrap; }
  .form-row input {
    background-color: #FEE1AB; }
  .form-row.tight {
    margin-bottom: 0; }
  .form-row.bottom-border {
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 15px;
    border-bottom: solid #AFB1B3 1px; }

.flex-row-100-percent {
  flex: 0 1 100%; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - ELEMENTs
/* ---------------------------------------------------------------------------------------------------- */
input[type="text"] {
  background-color: #FEE1AB; }

select {
  background-color: #FEE1AB; }

textarea.mine {
  background-color: #FEE1AB;
  display: block;
  overflow: hidden;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  border-radius: 8px;
  border: solid #ccc 1px;
  line-height: 1.42857143;
  color: #555; }
  @media (max-width: 768px) {
    textarea.mine {
      font-size: 16px; } }

div.image-radio-button-label {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  display: table-cell;
  vertical-align: bottom;
  display: flex;
  flex-direction: column-reverse;
  line-height: 1; }

div.image-radio-button-button {
  background-color: pink; }

div.image-radio-button-image img {
  width: 20px; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - HELP BUTTON */
/* ---------------------------------------------------------------------------------------------------- */
.form-section-header-help {
  display: flex; }

.form-section-header-help .form-section-header-triangle {
  align-self: flex-end; }

.form-help-button-container {
  display: flex;
  flex-direction: row-reverse;
  width: 100%; }

.form-help-button, .form-help-button-small {
  width: 180px;
  background-color: black;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px; }

@media (max-width: 768px) {
  .form-help-button {
    display: none; } }

@media (min-width: 769px) {
  .form-help-button {
    display: block; } }

@media (max-width: 768px) {
  .form-help-button-small {
    display: block;
    width: 100px; } }

@media (min-width: 769px) {
  .form-help-button-small {
    display: none; } }

.form-help-button-text {
  margin: 0;
  padding: 5px 0;
  color: white;
  font-size: .8em;
  text-align: center;
  white-space: nowrap; }

.form-help-button-icon {
  font-size: 1.5em;
  margin-right: 10px; }

@media (min-width: 0px) and (max-width: 350px) {
  .form-help-button-icon {
    font-size: 1.3em; } }

.form-help-button-caret {
  margin-left: 5px; }

/* ---------------------------------------------------------------------------------------------------- */
/* FORM - HEADER */
/* ---------------------------------------------------------------------------------------------------- */
.form-section-header-triangle, .form-section-end-header-triangle {
  margin-left: -30px;
  width: 0;
  height: 0;
  border-bottom: 15px solid #6F0C28;
  border-left: 30px solid transparent; }

.form-section-end-header-triangle {
  border-bottom: 15px solid #221F20; }

.form-section-header {
  margin-left: -30px;
  color: white;
  background-color: #9F2342;
  min-height: 30px; }

.form-section-header p {
  font-size: 1.3em;
  margin-bottom: 0;
  padding: 5px 15px; }

@media (min-width: 0px) and (max-width: 350px) {
  .form-section-header p {
    font-size: 1.1em;
    line-height: 1.2; } }

.form-section-header-last {
  background-color: #414042; }

.form-section-header-last p {
  font-size: 1.0em; }

div.form-help-button .dropdown-menu {
  margin-top: 0; }

div.form-help-button ul {
  background-color: black;
  border: solid gray 1px; }

div.form-help-button .dropdown-menu > li > a {
  color: white; }
  div.form-help-button .dropdown-menu > li > a:hover {
    background-color: #505050; }
  div.form-help-button .dropdown-menu > li > a:focus {
    background-color: #505050; }

.help-block-container {
  margin: auto;
  width: 90%;
  margin-top: 20px;
  margin-bottom: 20px; }
  @media (max-width: 767px) {
    .help-block-container h3 {
      font-size: 22px; } }

.help-address-header {
  color: #9C304D;
  font: bold 13pt arial, helvetica;
  padding-bottom: 6px; }

.help-address-hours {
  margin-top: 10px;
  margin-bottom: 10px; }
  .help-address-hours p {
    margin: 0; }

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` 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.
 */
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  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.3s; }

.c-hamburger:focus {
  outline: none; }

.c-hamburger span {
  display: block;
  position: absolute;
  top: 22px;
  left: 9px;
  right: 9px;
  height: 4px;
  background: white; }

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

.c-hamburger span::before {
  top: -10px; }

.c-hamburger span::after {
  bottom: -10px; }

/**
 * Style 1
 *
 * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
 * Nothing too fancy, simple transition.
 */
.c-hamburger--rot {
  background-color: #28aadc; }

.c-hamburger--rot span {
  transition: transform 0.3s; }

/* active state, i.e. menu open */
.c-hamburger--rot.is-active {
  background-color: #166888; }

.c-hamburger--rot.is-active 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".
 */
.c-hamburger--htx {
  background-color: #ff3264; }

.c-hamburger--htx span {
  transition: background 0s 0.3s; }

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s; }

.c-hamburger--htx span::before {
  transition-property: top, transform; }

.c-hamburger--htx span::after {
  transition-property: bottom, transform; }

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #cb0032; }

.c-hamburger--htx.is-active span {
  background: none; }

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg); }

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg); }

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s; }

/**
 * 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.
 */
.c-hamburger--htla {
  background-color: #32dc64; }

.c-hamburger--htla span {
  transition: transform 0.3s; }

.c-hamburger--htla span::before {
  transform-origin: top right;
  transition: transform 0.3s, width 0.3s, top 0.3s; }

.c-hamburger--htla span::after {
  transform-origin: bottom right;
  transition: transform 0.3s, width 0.3s, bottom 0.3s; }

/* active state, i.e. menu open */
.c-hamburger--htla.is-active {
  background-color: #19903c; }

.c-hamburger--htla.is-active span {
  transform: rotate(180deg); }

.c-hamburger--htla.is-active span::before,
.c-hamburger--htla.is-active span::after {
  width: 50%; }

.c-hamburger--htla.is-active span::before {
  top: 0;
  transform: translateX(19px) translateY(2px) rotate(45deg); }

.c-hamburger--htla.is-active span::after {
  bottom: 0;
  transform: translateX(19px) translateY(-2px) 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.
 */
.c-hamburger--htra {
  background-color: #ff9650; }

.c-hamburger--htra span {
  transition: transform 0.3s; }

.c-hamburger--htra span::before {
  transform-origin: top left;
  transition: transform 0.3s, width 0.3s, top 0.3s; }

.c-hamburger--htra span::after {
  transform-origin: bottom left;
  transition: transform 0.3s, width 0.3s, bottom 0.3s; }

/* active state, i.e. menu open */
.c-hamburger--htra.is-active {
  background-color: #e95d00; }

.c-hamburger--htra.is-active span {
  transform: rotate(180deg); }

.c-hamburger--htra.is-active span::before,
.c-hamburger--htra.is-active span::after {
  width: 50%; }

.c-hamburger--htra.is-active span::before {
  top: 0;
  transform: translateX(-4px) translateY(2px) rotate(-45deg); }

.c-hamburger--htra.is-active span::after {
  bottom: 0;
  transform: translateX(-4px) translateY(-2px) rotate(45deg); }

.foo {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  width: 96px;
  height: 96px;
  transition: background 0.3s; }
  .foo:focus {
    outline: none; }
  .foo span {
    display: block;
    position: absolute;
    background: white; }
  .foo span::before,
  .foo span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    background-color: #fff;
    content: ""; }
  .foo span {
    top: 44px;
    left: 18px;
    right: 18px;
    height: 8px; }
  .foo span::before,
  .foo span::after {
    height: 8px; }
  .foo span::before {
    top: -20px; }
  .foo span::after {
    bottom: -20px; }

.header-hamburger-button {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  width: 60px;
  height: 60px;
  transition: background 0.3s; }
  .header-hamburger-button:focus {
    outline: none; }
  .header-hamburger-button span {
    display: block;
    position: absolute;
    background: white; }
  .header-hamburger-button span::before,
  .header-hamburger-button span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    background-color: #fff;
    content: ""; }
  .header-hamburger-button span {
    top: 27.5px;
    left: 11.25704px;
    right: 11.25704px;
    height: 5px; }
  .header-hamburger-button span::before,
  .header-hamburger-button span::after {
    height: 5px; }
  .header-hamburger-button span::before {
    top: -12.5px; }
  .header-hamburger-button span::after {
    bottom: -12.5px; }

.err-message-block {
  margin: 10px; }

.err-messages-header {
  color: #a94442;
  font-weight: bold; }

.err-message {
  color: #a94442; }

.form-row.has-error {
  color: #a94442; }

button.has-error {
  border: solid #a94442 1px; }

div.fm-has-error-wrapper {
  padding: 0;
  margin: 0; }

div.fm-has-error-wrapper.has-error {
  border: solid #a94442 1px; }

/* Remove the (blue) outline added by the browser when the date picker gets focus */
table.uib-daypicker:focus {
  outline: none; }

.caea-button {
  background-color: #9F2342;
  box-shadow: 8px 8px 30px #191919 inset;
  -webkit-box-shadow: 8px 8px 30px #191919 inset;
  -moz-box-shadow: 8px 8px 30px #191919 inset;
  padding: 12px;
  max-height: 45px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; }

.caea-button-secondary {
  background-color: #FEE1AB;
  box-shadow: 8px 8px 30px #BCA376 inset;
  -webkit-box-shadow: 8px 8px 30px #BCA376 inset;
  -moz-box-shadow: 8px 8px 30px #BCA376 inset;
  padding: 12px;
  max-height: 45px;
  color: #464748;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; }

.validation-messages {
  flex: 0 1 100%;
  margin: 10px;
  padding: 5px;
  border: solid #9F2342 1px;
  text-align: center; }

.validation-header {
  color: #9F2342;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px; }

.production-list {
  display: flex;
  width: 100%; }
  .production-list div.production-engager-col {
    flex: 0 1 80%;
    display: flex;
    flex-wrap: wrap; }
  .production-list div.productionCol {
    flex: 0 1 40%;
    padding: 10px;
    font-weight: bold; }
    @media (max-width: 767px) {
      .production-list div.productionCol {
        flex: 0 1 100%;
        padding: 5px 10px 0px 10px; } }
  .production-list div.engagerCol {
    flex: 0 1 40%;
    padding: 10px; }
    @media (max-width: 767px) {
      .production-list div.engagerCol {
        flex: 0 1 100%;
        padding: 0px 10px 5px 10px; } }
  .production-list div.actionCol {
    flex: 0 1 20%;
    padding: 0;
    font-weight: bold;
    background-color: #FEE1AB;
    color: #464748;
    box-shadow: 8px 8px 30px #BCA376 inset;
    display: flex;
    align-items: center;
    justify-content: center; }

.submit-with-certify-row {
  display: flex; }
  @media (max-width: 767px) {
    .submit-with-certify-row {
      flex-wrap: wrap;
      justify-content: space-between; } }
  .submit-with-certify-row .submit-button-col {
    flex: 0 1 20%; }
    @media (max-width: 767px) {
      .submit-with-certify-row .submit-button-col {
        order: 2;
        flex: 0 1 35%; } }
  .submit-with-certify-row .certify-col {
    flex: 0 1 60%;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (max-width: 767px) {
      .submit-with-certify-row .certify-col {
        order: 1;
        flex: 0 1 100%; } }
  .submit-with-certify-row .cancel-col {
    flex: 0 1 20%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; }
    @media (max-width: 767px) {
      .submit-with-certify-row .cancel-col {
        order: 3; } }
  .submit-with-certify-row .certify-text {
    margin: 0;
    padding: 10px;
    font-weight: bold; }
    @media (max-width: 767px) {
      .submit-with-certify-row .certify-text {
        padding: 0;
        margin-bottom: 10px; } }
  .submit-with-certify-row .cancel-link {
    font-size: 20px; }

.submit-cancel-row {
  min-height: 50px;
  display: flex; }
  .submit-cancel-row .submit-col {
    flex: 0 1 70px;
    background-color: #FEE1AB;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center; }
  .submit-cancel-row .cancel-col {
    flex: 0 1 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; }

.submit-link-cancel-row {
  display: flex;
  justify-content: space-between; }
  .submit-link-cancel-row .submit-col {
    flex: 0 1 20%; }
    @media (max-width: 767px) {
      .submit-link-cancel-row .submit-col {
        flex: 0 1 35%; } }
  .submit-link-cancel-row .cancel-col {
    flex: 0 1 20%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; }

.logout-cancel-row {
  display: flex;
  margin-top: 15px;
  font-size: 20px; }
  .logout-cancel-row .logout-col {
    flex: 0 1 50%; }
  .logout-cancel-row .cancel-col {
    flex: 0 1 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; }

.beta-feedback-logout-row {
  display: flex; }
  .beta-feedback-logout-row .feedback-button-col {
    flex: 0 1 50%; }
  .beta-feedback-logout-row .logout-col {
    flex: 0 1 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 20px; }

.button-link-row {
  display: flex;
  justify-content: space-between; }
  .button-link-row .button-col {
    flex: 0 1 20%; }
    @media (max-width: 767px) {
      .button-link-row .button-col {
        flex: 0 1 35%; } }
  .button-link-row .link-col {
    flex: 0 1 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 20px; }

.clickable {
  cursor: pointer; }

.flex {
  display: flex; }

.justify-content-center {
  justify-content: center; }

.justify-content-flex-end {
  justify-content: flex-end; }

.align-items-center {
  align-items: center; }

.align-items-stretch {
  align-items: stretch; }

.align-items-flex-start {
  align-items: flex-start; }

.align-items-flex-end {
  align-items: flex-end; }

.flex-wrap {
  flex-wrap: wrap; }

.flex-justify-end {
  display: flex;
  justify-content: flex-end; }

.flex-item-100-percent {
  flex: 0 1 100%; }

.flex-item-90-percent {
  flex: 0 1 90%; }

.flex-item-80-percent {
  flex: 0 1 80%; }

.flex-item-20-percent {
  flex: 0 1 20%; }

.display-inline {
  display: inline; }

.display-none {
  display: none; }

.font-weight-bold {
  font-weight: bold; }

.no-margin {
  margin: 0; }

.margin-auto {
  margin: auto; }

.margin-top-10px {
  margin-top: 10px; }

.margin-top-25px {
  margin-top: 25px; }

.margin-top-15px {
  margin-top: 15px; }

.margin-bottom-5px {
  margin-bottom: 5px; }

.margin-bottom-10px {
  margin-bottom: 10px; }

.margin-bottom-20px {
  margin-bottom: 20px; }

.padding-0 {
  padding: 0; }

.padding-5px {
  padding: 5px; }

.padding-10px {
  padding: 10px; }

.padding-25px {
  padding: 25px; }

.padding-top-bottom-10px {
  padding-top: 10px;
  padding-bottom: 10px; }

.no-padding-top-or-bottom {
  padding-top: 0;
  padding-bottom: 0; }

.padding-left-right-0 {
  padding-left: 0;
  padding-right: 0; }

.padding-left-right-10px {
  padding-left: 10px;
  padding-right: 10px; }

.padding-left-20px {
  padding-left: 20px; }

.width-100-percent {
  width: 100%; }

.width-80-percent {
  width: 80%; }

.width-90-percent {
  width: 90%; }

.width-60-percent {
  width: 60%; }

.width-50-percent {
  width: 50%; }

.width-40-percent {
  width: 40%; }

.width-20-percent {
  width: 20%; }

.width-20px {
  width: 20px; }

.width-25px {
  width: 25px; }

.width-165px {
  width: 165px; }

.font-size-12px {
  font-size: 12px; }

.font-size-16px {
  font-size: 16px; }

.font-size-20px {
  font-size: 20px; }

.min-height-30px {
  min-height: 30px; }