/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i|Montserrat:300,300i,400,400i,500,500i|");
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

:root {
  --font-family: ProximaNovaA-Regular;
  --font-weight: normal;
  --font-medium-font-weight: normal;
  --font-regular-font-weight: normal;
  --font-semibold-font-weight: normal;
  --font-italic-font-weight: normal;
  --font-thin-font-weight: normal;
  --font-italic-font-style: normal; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@keyframes twerk {
  15% {
    transform: rotate(-5deg); }
  50% {
    transform: rotate(25deg); }
  85% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0deg); } }

.twerk {
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: twerk;
  animation-name: twerk; }

@keyframes buzz {
  0% {
    transform: translateY(-5px); }
  33% {
    transform: translateY(5px); }
  66% {
    transform: translateY(-3px); }
  100% {
    transform: translateY(0); } }

@keyframes bounce {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-2px); }
  100% {
    transform: translateY(0); } }

.fade-enter {
  opacity: 0.01; }

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in; }

.fade-leave {
  opacity: 1; }

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in; }
  .fade-leave.fade-leave-active.delay {
    transition-delay: 600ms; }

@keyframes report-fade-out {
  to {
    filter: grayscale(75%) contrast(20%) brightness(110%); } }

@keyframes report-fade-in {
  to {
    filter: grayscale(0%) contrast(100%) brightness(100%); } }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.buzz {
  animation: buzz 0.3s 1; }

/*
NOTE: when you reference one of these vars, comment underneath the element you've used it for. Mandem organised
*/
/*
USED FOR:
plan inputs
dashboard-panel
dashboard panel buttons
modal-body.report-options-modal > span.glyphicon
*/
/*
USED FOR:
dashboard panel header
dashboard panel buttons
typeahead
editable table > page header
*/
/*
USED FOR:
.modal-body.report-options-modal > .Select-menu-outer
*/
/*
USED FOR:
menu
dashboard panel
charts > drillup
.dashboard-filter-sentence-container > #fixed-version
superbutton overlay content
*/
/*
context menu
USED FOR:
header
pinned nav
dashboard panel
simple sidebar
spark chart

*/
/*
USED FOR:
modals
tooltip box
c tooltip

*/
/*
USED FOR:
error messages

*/
.plan-select-column-modal {
  font-size: 12px;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  position: fixed;
  z-index: 1000000;
  align-items: center;
  justify-content: center; }
  .plan-select-column-modal .content label {
    font-weight: normal; }
  .plan-select-column-modal h4 {
    font-size: 15px; }
  .plan-select-column-modal .content {
    width: 600px;
    background: var(--bg);
    color: black;
    padding: 20px; }
    .plan-select-column-modal .content .header {
      color: var(--text-light);
      display: flex;
      border-bottom: 2px solid var(--bg-dark);
      padding-bottom: 5px; }
      .plan-select-column-modal .content .header button {
        margin-left: auto; }
    .plan-select-column-modal .content .body {
      padding-top: 10px; }
    .plan-select-column-modal .content .footer {
      padding-top: 5px;
      display: flex;
      justify-content: flex-end; }

.plan .table-root-holder {
  margin-bottom: 180px;
  border-bottom: 2px solid var(--line); }
  .plan .table-root-holder .plan-table-controls {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
    flex-wrap: wrap; }
    @media print {
      .plan .table-root-holder .plan-table-controls {
        display: none; } }
    .plan .table-root-holder .plan-table-controls .controls-right {
      margin-left: auto; }
    .plan .table-root-holder .plan-table-controls * + * {
      margin-left: 0.5rem; }

/* Control Dropdown Menu (leftmost fixed column) */
@media screen {
  .planning-cell.control {
    display: none; } }

.planning-cell.control i {
  color: var(--text-light); }
  .planning-cell.control i:hover {
    color: #4d5160; }

.planning-cell.control .ba-dropdown.cell-dropdown .ba-dropdown-toggle.cell-edit.campaign {
  font-size: 16px; }

.cell-dropdown-menu.ba-dropdown-menu-content {
  width: 150px;
  font-size: 12px;
  border-radius: 0 0 2px 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white; }
  .cell-dropdown-menu.ba-dropdown-menu-content:before {
    /* creates tooltip arrowpoint */
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(0, 0, 0, 0.7);
    top: -7px;
    left: 8px; }
  .cell-dropdown-menu.ba-dropdown-menu-content .title {
    padding: 5px;
    padding-bottom: 2px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    background: #2c2e33; }
  .cell-dropdown-menu.ba-dropdown-menu-content .cell-dropdown-option {
    width: 100%;
    text-align: left; }
    .cell-dropdown-menu.ba-dropdown-menu-content .cell-dropdown-option button {
      width: 100%;
      display: flex;
      align-items: center;
      line-height: 26px; }
      .cell-dropdown-menu.ba-dropdown-menu-content .cell-dropdown-option button i {
        margin-left: auto; }
    .cell-dropdown-menu.ba-dropdown-menu-content .cell-dropdown-option:hover {
      background: #4C8EE3; }

.plan .cell {
  background: orangered !important; }

.plan .plan-tables-container {
  display: flex;
  /* @include hide-scrollbars-ie-chrome; */
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
  /* Left Hand Side */
  /* Right hand side */ }
  .plan .plan-tables-container ::-webkit-scrollbar {
    width: 5px;
    height: 7px; }
  .plan .plan-tables-container ::-webkit-scrollbar-track {
    background: #f1f1f1; }
  .plan .plan-tables-container ::-webkit-scrollbar-thumb {
    background: #cacaca; }
  .plan .plan-tables-container ::-webkit-scrollbar-thumb:hover {
    background: #555; }
  .plan .plan-tables-container #fixed-grid {
    background: white;
    position: relative;
    z-index: 100;
    border-right: 2px solid #D3D3D3; }
  .plan .plan-tables-container #line-grid {
    position: relative;
    z-index: 10; }
  .plan .plan-tables-container .ReactVirtualized__Grid {
    outline: none; }
    .plan .plan-tables-container .ReactVirtualized__Grid.react-virtualized-top-right::-webkit-scrollbar, .plan .plan-tables-container .ReactVirtualized__Grid.react-virtualized-bottom-left::-webkit-scrollbar {
      width: 0px;
      height: 0px; }
    .plan .plan-tables-container .ReactVirtualized__Grid .plan-column-header {
      /* fixed grid headers */
      font-size: 13px;
      background: #F6F7F8;
      padding-bottom: 4px;
      line-height: inherit;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding-left: 0.5rem;
      border-right: 1px solid #D3D3D3;
      border-bottom: 2px solid #D3D3D3;
      border-top: 1px solid #D3D3D3;
      color: #7D8196; }
      .plan .plan-tables-container .ReactVirtualized__Grid .plan-column-header:last-of-type {
        border-right: 3px solid #D3D3D3; }
    .plan .plan-tables-container .ReactVirtualized__Grid button.plan-column-header {
      text-decoration: underline; }
    .plan .plan-tables-container .ReactVirtualized__Grid .burst-header-cell {
      /* line grid headers */
      background: #F6F7F8;
      font-size: 12px;
      padding-bottom: 4px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      overflow: hidden;
      padding-top: 0.5em;
      line-height: 1.2em;
      border-bottom: 2px solid #D3D3D3;
      border-right: 1px solid #D3D3D3;
      border-top: 1px solid #D3D3D3; }
      .plan .plan-tables-container .ReactVirtualized__Grid .burst-header-cell .burst-number {
        color: #7D8196; }
      .plan .plan-tables-container .ReactVirtualized__Grid .burst-header-cell .start-date {
        color: #a7aab8; }
      .plan .plan-tables-container .ReactVirtualized__Grid .burst-header-cell .burst-number, .plan .plan-tables-container .ReactVirtualized__Grid .burst-header-cell .start-date {
        display: flex;
        justify-content: center;
        width: 100%; }
    .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell {
      /* all cells in both have this class */
      font-size: 10px;
      width: 100%;
      height: 100%;
      display: flex;
      text-align: center;
      align-items: center;
      border-bottom: 1px solid rgba(238, 238, 238, 0.5); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.highlight {
        background: #dcf1fa; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell:focus {
        outline: none !important; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.focused {
        /* One cell focused at a time */
        border: 2px solid #4C8EE3 !important; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.text-right {
        justify-content: flex-end;
        text-align: right;
        padding-right: 5px; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.text-left {
        justify-content: center;
        text-align: left;
        padding-left: 5px; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.text-center {
        justify-content: center;
        text-align: center; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.super-row {
        border-right: none;
        border-top: #b5bec6;
        background: white;
        border-bottom: #56bde8 2px solid; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.exploring {
        border-right: 1px solid rgba(238, 238, 238, 0.5); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.redacted {
        background: RGBA(200, 200, 200, 0.3); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.cursor-pointer {
        cursor: pointer; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.spend-cell {
        padding-right: 4px;
        font-family: monospace;
        font-size: 10px; }
        .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.spend-cell.overspend {
          background: rgba(220, 112, 130, 0.5); }
        .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.spend-cell.underspend {
          background: rgba(102, 163, 133, 0.5); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.add-line {
        border-bottom: 2px solid #D3D3D3;
        border-top: 1px solid #D3D3D3;
        background: rgba(211, 211, 211, 0.1); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.unspent {
        border-bottom: 1px solid #D3D3D3;
        /* &.overspend { color: transparentize($sky-red, 0.5); }
          &.underspend { color: transparentize($sky-green, 0.5); } */ }
        .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.unspent.overspend {
          color: #dc7082; }
        .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.unspent.underspend {
          color: #66a385; }
        .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.unspent.spend-cell {
          background: white;
          border-right: 2px solid var(--line-dark); }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.hidden-spend {
        background: #eeeff1; }
      .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.cursor-cell {
        cursor: cell; }

.plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row {
  /* row with the blue line joined by circles that indicates
          bursts of spending.  */
  border-bottom: none;
  /* border-top: 1px solid $grid-border; */ }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row.start-date {
    background-image: radial-gradient(circle, #99d7f1, #99d7f1 20%, transparent 20%, transparent 100%), linear-gradient(to right, white, white 60%, transparent 60%, transparent 100%), linear-gradient(to bottom, transparent, transparent 45%, #99d7f1 45%, #99d7f1 55%, transparent 55%, transparent 100%); }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row.mid-date {
    background-image: linear-gradient(to bottom, transparent, transparent 45%, #99d7f1 45%, #99d7f1 55%, transparent 55%, transparent 100%); }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row.end-date {
    background-image: radial-gradient(circle, #99d7f1, #99d7f1 20%, transparent 20%, transparent 100%), linear-gradient(to left, white, white 60%, transparent 60%, transparent 100%), linear-gradient(to bottom, transparent, transparent 45%, #99d7f1 45%, #99d7f1 55%, transparent 55%, transparent 100%); }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row.start-date.solo, .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-row.end-date.solo {
    background-image: radial-gradient(circle, #99d7f1, #99d7f1 15%, transparent 15%, transparent 24%, #99d7f1 25%, #99d7f1 30%, transparent 31%, transparent 100%); }

.plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell {
  border-right: 1px solid rgba(238, 238, 238, 0.5);
  border-bottom: 1px solid rgba(238, 238, 238, 0.5);
  /* Burst cells are on the right / weeks side */
  cursor: cell;
  font-family: monospace;
  font-size: 10px; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.invalid {
    box-shadow: inset 1px 1px 0 0 red, inset -1px -1px 0 0 red; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.empty {
    color: transparent; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.active {
    background: #99d7f1; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.out-of-date {
    background: #f0a756; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.hidden-spend {
    background: #eeeff1; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell.focussed {
    padding-right: 0; }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell input {
    background: white;
    width: 100%;
    height: 100%;
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    color: #225C88; }
    .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.burst-cell input::selection {
      color: white;
      background: #4C8EE3; }

.plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-spend {
  font-size: 13px;
  font-family: monospace;
  padding: 2px;
  /* border-bottom: 1px solid $grid-border; */ }
  .plan .plan-tables-container .ReactVirtualized__Grid .planning-cell.campaign-spend.spare-budget {
    color: #6cc5eb; }

.plan .plan-tables-container .ReactVirtualized__Grid .budget-cell {
  padding-right: 4px;
  font-family: monospace;
  font-size: 10px; }
  .plan .plan-tables-container .ReactVirtualized__Grid .budget-cell input {
    color: black; }

.plan .plan-tables-container .ReactVirtualized__Grid .overbudget-cell, .plan .plan-tables-container .ReactVirtualized__Grid .fixedDataTableCellLayout_wrap1.overbudget {
  background: #dc7082;
  color: white; }

.plan .plan-tables-container .ReactVirtualized__Grid .underbudget-cell, .plan .plan-tables-container .ReactVirtualized__Grid .fixedDataTableCellLayout_wrap1.underbudget {
  background: #66a385;
  color: white; }