/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../../../node_modules/normalize.css/normalize.css';

@import '../../../node_modules/react-datepicker/dist/react-datepicker.css';

/*! React Starter Kit | MIT License | https://www.reactstarterkit.com/ */

@import '../variables.scss';

@import '../../public/fonts/fonts.scss';

@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,700,900');

/*
 * Base styles
 * ========================================================================== */

html {
  color: $black;
  font-weight: $weight-regular;
  font-size: 14px;
  font-family: $font-family-base;
  line-height: 1.375; /* ~22px */
  height: 100%;
  body {
    height: 100%;
  }
  .hidden {
    display: none;
  }
  .container-left {
    display: none;
  }
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}
.root {
  height: 100%;
  min-width: 1024px;
  h1 {
    font-weight: $weight-light;
    font-size: 32px;
    color: $black;
  }
  h2 {
    font-weight: $weight-light;
    font-size: 30px;
    color: $black;
    margin: 0;
  }
  h3 {
    font-weight: $weight-light;
    font-size: 24px;
    color: $gray-darker;
  }
}
/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
button {
  height: 32px;
  border-radius: 4px;
  background-color: $blue;
  border: none;
  font-size: 14px;
  color: #FFF;
  padding: 0;
  width: 160px;
  // transition: all $animation-swift-out;
  // &:hover {
  //   background-color: $blue-light;
  // }
  &:disabled:hover {
    // background-color: $blue;
    cursor: not-allowed;
  }
  &:focus {
    outline: none;
  }
  // &:active {
  //   transform: scale(0.98);
  // }

  &:global(.gray) {
    background-color: $task-gray-light;
    border-color: $task-gray-light;
    &:hover {
      background-color: $gray;
    }
    &:disabled:hover {
      background-color: $gray;
    }
  }
  &:global(.disabled), &:disabled {
    opacity: 0.7;
  }
  &:global(.wire) {
    color: $blue;
    background-color: #FFF;
    border: 1px solid $blue;
    &:hover {
      opacity: 0.75;
    }
    &:global(.gray) {
      border-color: $gray;
      color: $black;
    }
    &:global(.red) {
      border-color: $red;
      color: $red;
    }
  }
}
:global {
  .backBtn {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIzNXB4IiB2aWV3Qm94PSIwIDAgMTkgMzUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPg0KICA8ZyBpZD0iU3ViTWVudS1Db25uZWN0aW9uXCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5MS4wMDAwMDAsIC0zMS4wMDAwMDApIiBzdHJva2U9IiM2MTY3NzAiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8ZyBpZD0iUmV0dXJuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTIuMDAwMDAwLCAzMi4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlJlY3RhbmdsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYuMjYzNDU2LCAxNi4yNjM0NTYpIHJvdGF0ZSgtMjI1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNi4yNjM0NTYsIC0xNi4yNjM0NTYpICIgcG9pbnRzPSIyNy43NjM0NTYgNC43NjM0NTU5NyAyNy43NjM0NTYgMjcuNzYzNDU2IDQuNzYzNDU1OTcgMjcuNzYzNDU2Ij48L3BvbHlsaW5lPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
    width: 33px;
    height: 33px;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: -50px;
    margin-top: 16px;
    cursor: pointer;
  }
}
:global(.checkbox-normal) {
  /* Base for label styling */
  &[type="checkbox"]:not(:checked),
  &[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
  }
  &[type="checkbox"]:focus {
    outline: none;
    outline-style:none;
    border: 1px solid red;
  }
  &[type="checkbox"]:not(:checked) + label,
  &[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
  }

  /* checkbox aspect */
  &[type="checkbox"]:not(:checked) + label:before,
  &[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 14px;
    height: 14px;
    border: 1px solid $gray;
    background: #fff;
    border-radius: 3px;
    transition: border-color $animation-swift-out;
  }
  /* checkbox aspect on hover */
  &[type="checkbox"]:not(:checked):hover + label:before,
  &[type="checkbox"]:checked:hover + label:before {
    border-color: $gray-dark;
  }
  /* checked mark aspect */
  &[type="checkbox"]:not(:checked) + label:after,
  &[type="checkbox"]:checked + label:after {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 19px;
    line-height: 0.8;
    color: #09ad7e;
    transition: all .2s;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    content: " ";
    background-image: url('data:image/svg+xml;utf8,<svg width="12px" height="10px" viewBox="2 3 12 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline id="Path-178" stroke="%23FFFFFF" stroke-width="2" fill="none" points="3.97540723 8.10363508 6.76037774 10.8886056 12.9754072 4.67357608"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center center;
  }
  /* checked mark aspect changes */
  &[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
  }
  &[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
    background-color: $blue;
  }
  /* disabled checkbox */
  &[type="checkbox"]:disabled:not(:checked) + label:before,
  &[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
  }
  &[type="checkbox"]:disabled:checked + label:after {
    color: #999;
  }
  &[type="checkbox"]:disabled + label {
    color: #aaa;
  }
  /* accessibility */
  &[type="checkbox"]:checked:focus + label:before,
  &[type="checkbox"]:not(:checked):focus + label:before {
    //border: 1px dotted blue;
  }
}
:global(.checkbox-normal) {
  /* hover style just for information */
  &label:hover:before {
    border: 1px solid #4778d9!important;
  }
}
// TODO: find this stylesheets place
:global(button.transparent) {
  background-color: #FFF;
  color: $black;
  border: 1px solid $gray;
  width: 196px;
  &:hover {
    background-color: $blue;
    border: 1px solid $blue;
    color: #FFF;
  }
}
:global(#app) {
  height: 100%;
}

:global(.Dropdown-root) {
  position: relative;
}

:global(.Dropdown-root.is-open) {

}

:global(.Dropdown-control) {
  position: relative;
  overflow: hidden;
  background-color: white;
  border: 1px solid $gray;
  border-radius: $border-radius;
  box-sizing: border-box;
  line-height: 20px;
  color: #333;
  outline: none;
  padding: 5px 27px 5px 16px;
  transition: all $animation-swift-out;
  text-align: center;
  cursor: pointer;
  &:global(.Dropdown-disabled) {
    background-color: $gray-lighter;
  }
}

:global(.Dropdown-control:hover) {
  background-color: $blue;
  color: #FFF;
  :global(.Dropdown-arrow) {
    background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="7px" viewBox="1 5 14 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon id="Combined-Shape" stroke="none" fill="%23FFF" fill-rule="evenodd" points="8 10.3823376 2.50260702 5 1.81543289 5.67279221 8 11.7279221 14.1845671 5.67279221 13.497393 5 8 10.3823376"></polygon></svg>');
  }
}

:global(.Dropdown-arrow) {
  width: 14px;
  height: 7px;
  content: ' ';
  display: block;
  margin-top: -ceil(2.5);
  position: absolute;
  right: 8px;
  top: 13px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjEgNSAxNCA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5Z29uIGlkPSJDb21iaW5lZC1TaGFwZSIgc3Ryb2tlPSJub25lIiBmaWxsPSIlMjM2MTY3NzAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcG9pbnRzPSI4IDEwLjM4MjMzNzYgMi41MDI2MDcwMiA1IDEuODE1NDMyODkgNS42NzI3OTIyMSA4IDExLjcyNzkyMjEgMTQuMTg0NTY3MSA1LjY3Mjc5MjIxIDEzLjQ5NzM5MyA1IDggMTAuMzgyMzM3NiI+PC9wb2x5Z29uPjwvc3ZnPg==');
})
:global(.is-open .Dropdown-arrow) {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjEgNSAxNCA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5Z29uIGlkPSJDb21iaW5lZC1TaGFwZSIgc3Ryb2tlPSJub25lIiBmaWxsPSIlMjNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcG9pbnRzPSI4IDEwLjM4MjMzNzYgMi41MDI2MDcwMiA1IDEuODE1NDMyODkgNS42NzI3OTIyMSA4IDExLjcyNzkyMjEgMTQuMTg0NTY3MSA1LjY3Mjc5MjIxIDEzLjQ5NzM5MyA1IDggMTAuMzgyMzM3NiI+PC9wb2x5Z29uPjwvc3ZnPg==');
}

:global(.Dropdown-menu) {
  background-color: white;
  border: 1px solid $gray;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  box-sizing: border-box;
  margin-top: 8px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
  border-radius: $border-radius;
  :global(.wrapper) {
    overflow: hidden;
    border-radius: 4px;
    &:after {
      content: " ";
      display: block;
      position: absolute;
      border: 1px solid $gray;
      width: 10px;
      height: 10px;
      right: 9px;
      top: -6px;
      transform: rotate(135deg);
      border-color: transparent transparent $gray $gray;
      background-color: #fff;
      z-index: 1001;
    }
    &:global(.hovered) {
      &:after {
        background-color: $blue;
      }
    }
  }

  :global(.scroller) {
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    z-index: 1002;
  }
}

:global(.Dropdown-option) {
  box-sizing: border-box;
  color: rgba(51,51,51,0.8);
  cursor: pointer;
  display: block;
  padding: 8px 16px;
  background-color: #FFF;
  text-align: left;
}
:global(.Dropdown-option:first-child) {

}

:global(.Dropdown-option:hover) {
  background-color: $blue;
  color: #FFF;
}

:global(.Dropdown-option:first-child:hover) {
  &:after {
    background-color: $blue;
  }

}
:global(.Dropdown-option.is-selected) {
  font-weight: 500;
}
:global(.detailViewHead) {
  p {
    margin: 0;
    font-size: 14px;
    color: $gray-dark;
  }
}
:global(.filters) {
  margin-bottom: 40px;
  position: relative;
  :global(.checkbox-container) {
    position: absolute;
    position: absolute;
    left: -32px;
    top: 8px;
  }
}
:global(.category-filter) {
  margin-left: 16px;
  a {
    cursor: pointer;
    color: $gray-dark;
    text-transform: capitalize;
    margin-right: 16px;
    &:global(.selected) {
      color: $blue;
      text-decoration: underline;
    }
  }
}
:global(.items-list) {
  :global(.item) {
    display: flex;
    padding: 8px;
    border-bottom: 1px solid $gray-light;
    &:first-child {
      border-top: 1px solid $gray-light;
    }
    :global(.cell) {
      flex: 1;
      display: flex;
      align-items: center;

      &:global(.cell-icon) {
        :global(.icon) {
          float: left;
        }
        :global(.details) {
          float: left;
          font-size: 16px;
          margin-left: 16px;
          color: $black;
          width: 100%;
        }
      }
    }
    &:hover {
      background-color: $gray-light;
    }
  }
}
:global {
  .taskIcon {
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin: 1px 8px 0 8px;
    &.COMPLETED {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1PayI+DQogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTIiIGZpbGw9IiM0Q0Q5NjQiIGN4PSI4IiBjeT0iOCIgcj0iOCI+PC9jaXJjbGU+DQogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlN0cm9rZS0zIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSIxMiA2IDcuMDgzMDc0MTkgMTEgNCA4LjAwMzk3NTQyIj48L3BvbHlsaW5lPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
    }
    &.RUNNING {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9Ikdyb3VwLTciIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgaWQ9Ik92YWwtMi1Db3B5IiBmaWxsPSIjQTRBQUI1IiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0xNiw4IEMxNiwzLjU4MTcyMiAxMi40MTgyNzgsMCA4LDAgTDgsOCBMMTYsOCBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiMwMDU2QjgiPjwvcGF0aD48Y2lyY2xlIGlkPSJPdmFsLTItQ29weSIgZmlsbD0iI0ZGRkZGRiIgY3g9IjgiIGN5PSI4IiByPSI2Ij48L2NpcmNsZT48L2c+PC9zdmc+');
      animation: rotate 2s infinite linear;
    }
    &.WARNING {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNpcmNsZSBpZD0iT3ZhbC0yIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGREMwMkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY3g9IjgiIGN5PSI4IiByPSI4Ij48L2NpcmNsZT48cGF0aCBkPSJNOCw4IEw4LDQiIGlkPSJMaW5lLUNvcHkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiPjwvcGF0aD48cGF0aCBkPSJNOCwxMi4wMjU5NzQgTDgsMTEuMzMzMzMzMyIgaWQ9IkxpbmUtQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==');
    }
    &.CANCELED {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNpcmNsZSBpZD0iT3ZhbC0yIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGREMwMkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY3g9IjgiIGN5PSI4IiByPSI4Ij48L2NpcmNsZT48cGF0aCBkPSJNOCw4IEw4LDQiIGlkPSJMaW5lLUNvcHkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiPjwvcGF0aD48cGF0aCBkPSJNOCwxMi4wMjU5NzQgTDgsMTEuMzMzMzMzMyIgaWQ9IkxpbmUtQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==');
    }
    &.PENDING {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNpcmNsZSBpZD0iT3ZhbC0yLUNvcHkiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0M4Q0NENyIgZmlsbC1ydWxlPSJldmVub2RkIiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxjaXJjbGUgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9Im5vbmUiIGZpbGw9Im5vbmUiIGN4PSI4IiBjeT0iOCIgcj0iNiI+PC9jaXJjbGU+PHBhdGggZD0iTTgsOCBMOCw0IiBpZD0iTGluZS1Db3B5LTIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiPjwvcGF0aD48cGF0aCBkPSJNOCw4IEwxMCwxMCIgaWQ9IkxpbmUtQ29weS0zIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+');
    }
    &.ERROR {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGlkPSJJY29uLUVycm9yIj48Y2lyY2xlIGlkPSJPdmFsLTIiIGZpbGw9IiNFNjI1NjUiIGN4PSI4IiBjeT0iOCIgcj0iOCI+PC9jaXJjbGU+PHBhdGggZD0iTTExLjQyODU3MTQsNC41NzE0Mjg1NyBMNC41NzE0Mjg1NywxMS40Mjg1NzE0IiBpZD0iTGluZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMS40Mjg1NzE0LDExLjQyODU3MTQgTDQuNTcxNDI4NTcsNC41NzE0Mjg1NyIgaWQ9IkxpbmUtQ29weSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPjwvZz48L2c+PC9zdmc+');
    }
  }

}

:global {
  .icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    &.chevron {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSJDb3Jpb2xpcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgICA8ZyBpZD0iMjEwLS1SZXBsaWNhLVRhc2tzLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNzIuMDAwMDAwLCAtMTk0LjAwMDAwMCkiIHN0cm9rZT0iIzdGODc5NSI+DQogICAgPGcgaWQ9IkNoZXZyb24tR3JleSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzc2LjAwMDAwMCwgMjAwLjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTM3Ni4wMDAwMDAsIC0yMDAuMDAwMDAwKSB0cmFuc2xhdGUoMzY4LjAwMDAwMCwgMTkyLjAwMDAwMCkiPg0KICAgIDxwb2x5bGluZSBpZD0iUmVjdGFuZ2xlLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCA1LjUwMDAwMCkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTguMDAwMDAwLCAtNS41MDAwMDApICIgcG9pbnRzPSIxMS44ODkwODczIDEuNjEwOTEyNyAxMS44ODkwODczIDkuMzg5MDg3MyA0LjExMDkxMjcgOS4zODkwODczIj48L3BvbHlsaW5lPg0KICAgIDwvZz4NCiAgICA8L2c+DQogICAgPC9nPg0KICAgIDwvc3ZnPg==');
      width: 7px;
      height: 12px;
    }
    &.refresh {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+DQogICAgICAgIDxnIGlkPSJJY29uLVJlZnJlc2gtR3JleSIgc3Ryb2tlPSIjNjE2NzcwIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi41NzMwMTYyLDQuODE2NjM4ODUgQzExLjU2NjI0NTgsMy4zNzMwNzc0NiA5Ljg5MzQyMzQ4LDIuNDI4NTcxNDMgOCwyLjQyODU3MTQzIEM0LjkyMjk4NDk3LDIuNDI4NTcxNDMgMi40Mjg1NzE0Myw0LjkyMjk4NDk3IDIuNDI4NTcxNDMsOCBDMi40Mjg1NzE0MywxMS4wNzcwMTUgNC45MjI5ODQ5NywxMy41NzE0Mjg2IDgsMTMuNTcxNDI4NiBMOCwxMy41NzE0Mjg2IEMxMS4wNzcwMTUsMTMuNTcxNDI4NiAxMy41NzE0Mjg2LDExLjA3NzAxNSAxMy41NzE0Mjg2LDgiIGlkPSJPdmFsLTQiPjwvcGF0aD4NCiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUmVjdGFuZ2xlLTEwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBwb2ludHM9IjEzLjE0Mjg1NzEgMiAxMy4xNDI4NTcxIDUuNDI4NTcxNDMgOS43MTQyODU3MSA1LjQyODU3MTQzIj48L3BvbHlsaW5lPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
      width: 16px;
      height: 16px;
    }
    &.endpoint {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9Ikljb24tRW5kcG9pbnQtU21hbGwtLVN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1FbmRwb2ludC1TbWFsbC0tSWNvbi1FbmRwb2ludC1TbWFsbCI+DQogICAgICAgICAgICA8cGF0aCBkPSJNOC41Njk1NzQ1OCw2Ljc4NjggTDEuMTc3NzUzOTYsMTkuMjExOCBDMC4zOTk3NjA3OTcsMjAuNTIxODU4NyAwLjAwNjE3Mzk1NjQ3LDIyLjIzODcxMSAwLDIzLjk2MDE0NzQgQzAuMDA2MTY4NTY2MjIsMjUuNzU5ODg4NSAwLjM5Nzc1MTAzNSwyNy40NzU3NDUyIDEuMTc3NzUzOTYsMjguNzg3OCBMOC41Njk1NzQ1OCw0MS4yMTI4IEMxMC4xMzc5MzMxLDQzLjg1MDggMTMuOTI0OTQ1MSw0NS45OTk4IDE3LjAxODM3NjIsNDUuOTk5OCBMMzAuOTgxNTk4OSw0NS45OTk4IEMzNC4wNzkwNTY2LDQ1Ljk5OTggMzcuODU4MDE1NCw0My44NTY4IDM5LjQzMTQwNzIsNDEuMjEyOCBMNDYuODIyMjIxMSwyOC43ODc4IEM0Ny41OTIzMDczLDI3LjQ5MTggNDcuOTg1OTA2OSwyNS43OTc4IDQ4LDI0LjA5NTggTDQ4LDIzLjkwMzggQzQ3Ljk4NTkwNjksMjIuMjAyOCA0Ny41OTMzMTQsMjAuNTA4OCA0Ni44MjIyMjExLDE5LjIxMTggTDM5LjQzMTQwNzIsNi43ODY4IEMzNy44NzA3ODkzLDQuMTYzNTAzNTcgMzQuMTE4MTcyMywyLjAyMzc3MTIgMzEuMDMzNDA1OCwyIEwxNi45NjY0NzYyLDIgQzEzLjg3OTgwNzcsMi4wMjM3NDM1NiAxMC4xMzMxODU0LDQuMTU4NTQ4NTUgOC41Njk1NzQ1OCw2Ljc4NjggWiIgaWQ9Ikljb24tRW5kcG9pbnQtU21hbGwtLUNsaXAtMiIgZmlsbD0iI0M4Q0NENyI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTIxLjQ5Njk3ODksMTMgQzE3LjYxNzY3NjIsMTMgMTQuNTExMzUxMSwxNi4wNjkwODc2IDE0LjM0NjE4NSwxOS45MDY5NDg2IEMxMS41MzY1NTg0LDIwLjY3MzMxOTYgOS40ODQ4OTQ0LDIzLjIwODQ3IDkuNDg0ODk0NCwyNi4yMTM4OTM1IEM5LjQ4NDg5NDQsMjkuODQ0NTQ2MSAxMi40NjA4ODgzLDMyLjgyMDU0IDE2LjA5MTU0MDksMzIuODIwNTQgTDM0LjEwOTY2NzYsMzIuODIwNTQgQzM3LjA3OTY1NTUsMzIuODIwNTQgMzkuNTE1MTA1NiwzMC4zODUwODk5IDM5LjUxNTEwNTYsMjcuNDE1MTAyIEMzOS41MTUxMDU2LDI1LjA3Mjc0NTUgMzcuOTUzNTM0NiwyMy4wODU5NDY3IDM1Ljg1NTAyMzUsMjIuMzg0NDQxIEMzNS43Mjc2OTU0LDE4Ljg2MzA5ODQgMzIuODU1NjA2LDE2LjAwMzAyMTEgMjkuMzA0ODMzOCwxNi4wMDMwMjExIEMyOC42ODA4MDYsMTYuMDAzMDIxMSAyOC4xMDAwMjE3LDE2LjE1Njc3NTggMjcuNTIxNjM5OSwxNi4zMjI1NDI2IEMyNi4yMzA5NDE0LDE0LjM1ODU2NjggMjQuMDI5NzI2OSwxMyAyMS40OTY5Nzg5LDEzIEwyMS40OTY5Nzg5LDEzIFoiIGlkPSJJY29uLUVuZHBvaW50LVNtYWxsLS1QYXRoIiBzdHJva2U9IiMwMDQ0Q0IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LjUwMDAwMCwgMjIuOTEwMjcwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0yNC41MDAwMDAsIC0yMi45MTAyNzApICI+PC9wYXRoPg0KICAgICAgICAgICAgPHJlY3QgaWQ9Ikljb24tRW5kcG9pbnQtU21hbGwtLVJlY3RhbmdsZS01IiBzdHJva2U9IiMwMDQ0Q0IiIHg9IjI1LjkwNjI1IiB5PSIyMyIgd2lkdGg9IjYuMDkzNzUiIGhlaWdodD0iNSIgcng9IjIuNSI+PC9yZWN0Pg0KICAgICAgICAgICAgPHJlY3QgaWQ9Ikljb24tRW5kcG9pbnQtU21hbGwtLVJlY3RhbmdsZS01LUNvcHkiIHN0cm9rZT0iIzAwNDRDQiIgeD0iMTgiIHk9IjIzIiB3aWR0aD0iNi4wOTM3NSIgaGVpZ2h0PSI1IiByeD0iMi41Ij48L3JlY3Q+DQogICAgICAgICAgICA8cmVjdCBpZD0iSWNvbi1FbmRwb2ludC1TbWFsbC0tUmVjdGFuZ2xlLTgiIGZpbGw9IiNEOERCRTIiIHg9IjIzIiB5PSIyNC40NjE1Mzg1IiB3aWR0aD0iNSIgaGVpZ2h0PSIyIj48L3JlY3Q+DQogICAgICAgICAgICA8cGF0aCBkPSJNMjIuNSwyNS41IEwyNy41LDI1LjUiIGlkPSJJY29uLUVuZHBvaW50LVNtYWxsLS1MaW5lLUNvcHktNCIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
      height: 48px;
      width: 66px;
    }
    &.endpoint-white {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1FbmRwb2ludC1MYXJnZSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNMTEuNDI2MDk5NCw4LjUyNzQ4NDIyIEwxLjU3MDMzODYxLDI1LjQ3MDc0MyBDMC41MzMwMTQzOTYsMjcuMjU3MTk0OSAwLjAwODIzMTk0MTk2LDI5LjU5ODM2NzcgMCwzMS45NDU3OTE2IEMwLjAwODIyNDc1NDk2LDM0LjM5OTk5NTMgMC41MzAzMzQ3MTMsMzYuNzM5ODEwNCAxLjU3MDMzODYxLDM4LjUyODk4NDIgTDExLjQyNjA5OTQsNTUuNDcyMjQzMSBDMTMuNTE3MjQ0MSw1OS4wNjk1MzIxIDE4LjU2NjU5MzUsNjIgMjIuNjkxMTY4Myw2MiBMNDEuMzA4Nzk4NSw2MiBDNDUuNDM4NzQyMSw2MiA1MC40NzczNTM5LDU5LjA3NzcxNCA1Mi41NzUyMDk2LDU1LjQ3MjI0MzEgTDYyLjQyOTYyODIsMzguNTI4OTg0MiBDNjMuNDU2NDA5OCwzNi43NjE3MDM1IDYzLjk4MTIwOTIsMzQuNDUxNjkzIDY0LDMyLjEzMDc3MzMgTDY0LDMxLjg2ODk1MzkgQzYzLjk4MTIwOTIsMjkuNTQ5Mzk4IDYzLjQ1Nzc1MiwyNy4yMzkzODc1IDYyLjQyOTYyODIsMjUuNDcwNzQzIEw1Mi41NzUyMDk2LDguNTI3NDg0MjIgQzUwLjQ5NDM4NTcsNC45NTAyNDU1NSA0NS40OTA4OTY0LDIuMDMyNDE1NDIgNDEuMzc3ODc0MywyIEwyMi42MjE5NjgyLDIgQzE4LjUwNjQxMDMsMi4wMzIzNzc3NCAxMy41MTA5MTM5LDQuOTQzNDg4NjcgMTEuNDI2MDk5NCw4LjUyNzQ4NDIyIFoiIGlkPSJDbGlwLTItQ29weSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPg0KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0LjAwMDAwMCwgMTguMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjQsMCBDOS43NDk1MiwwIDYuMDI1NjgsMy43MTYyNTEwMiA1LjgyNzY4LDguMzYzMzgyOTMgQzIuNDU5NTIsOS4yOTEzNTQ4MSAwLDEyLjM2MTA4IDAsMTYuMDAwMjQyNCBDMCwyMC4zOTY0NzI4IDMuNTY3NiwyNCA3LjkyLDI0IEwyOS41MiwyNCBDMzMuMDgwNCwyNCAzNiwyMS4wNTA5OTg1IDM2LDE3LjQ1NDc0MzggQzM2LDE0LjYxODQ2NjEgMzQuMTI4LDEyLjIxMjcyMDggMzEuNjEyMzIsMTEuMzYzMjkyIEMzMS40NTk2OCw3LjA5OTQyMTIzIDI4LjAxNjY0LDMuNjM2MjUzNDUgMjMuNzYsMy42MzYyNTM0NSBDMjMuMDExOTIsMy42MzYyNTM0NSAyMi4zMTU2OCwzLjgyMjQyOTYyIDIxLjYyMjMyLDQuMDIzMTUwODEgQzIwLjA3NTA0LDEuNjQ1MDQxMDYgMTcuNDM2MjQsMCAxNC40LDAgTDE0LjQsMCBaIiBpZD0iUGF0aCIgc3Ryb2tlPSIjMDA0NENCIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4wMDAwMDAsIDEyLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMTguMDAwMDAwLCAtMTIuMDAwMDAwKSAiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTUiIHN0cm9rZT0iIzAwNDRDQiIgeD0iMjAiIHk9IjEyIiB3aWR0aD0iOCIgaGVpZ2h0PSI2IiByeD0iMyI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNS1Db3B5IiBzdHJva2U9IiMwMDQ0Q0IiIHg9IjEwIiB5PSIxMiIgd2lkdGg9IjgiIGhlaWdodD0iNiIgcng9IjMiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTgiIGZpbGw9IiNGRkZGRkYiIHg9IjE1IiB5PSIxNCIgd2lkdGg9IjcuNjc3NDE5MzUiIGhlaWdodD0iMiI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNiwxNSBMMjIsMTUiIGlkPSJMaW5lLUNvcHktNCIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
      width: 64px;
      height: 64px;
    }
    &.project {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1Qcm9qZWN0LVNtYWxsIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45NjY0NzYyLDIgQzEzLjg3OTgwNzcsMi4wMjM3NDM1NiAxMC4xMzMxODU0LDQuMTU4NTQ4NTUgOC41Njk1NzQ1OCw2Ljc4NjggTDEuMTc3NzUzOTYsMTkuMjExOCBDMC4zOTk3NjA3OTcsMjAuNTIxODU4NyAwLjAwNjE3Mzk1NjQ3LDIyLjIzODcxMSAwLDIzLjk2MDE0NzQgTDEuMDU1NTk4NjhlLTE3LDI0LjA0MDQ0NzQgQzAuMDA2MTY4NTY2MjIsMjUuNzU5ODg4NSAwLjM5Nzc1MTAzNSwyNy40NzU3NDUyIDEuMTc3NzUzOTYsMjguNzg3OCBMOC41Njk1NzQ1OCw0MS4yMTI4IEMxMC4xMzc5MzMxLDQzLjg1MDggMTMuOTI0OTQ1MSw0NS45OTk4IDE3LjAxODM3NjIsNDUuOTk5OCBMMzAuOTgxNTk4OSw0NS45OTk4IEMzNC4wNzkwNTY2LDQ1Ljk5OTggMzcuODU4MDE1NCw0My44NTY4IDM5LjQzMTQwNzIsNDEuMjEyOCBMNDYuODIyMjIxMSwyOC43ODc4IEM0Ny41OTIzMDczLDI3LjQ5MTggNDcuOTg1OTA2OSwyNS43OTc4IDQ4LDI0LjA5NTggTDQ4LDIzLjkwMzggQzQ3Ljk4NTkwNjksMjIuMjAyOCA0Ny41OTMzMTQsMjAuNTA4OCA0Ni44MjIyMjExLDE5LjIxMTggTDM5LjQzMTQwNzIsNi43ODY4IEMzNy44NzA3ODkzLDQuMTYzNTAzNTcgMzQuMTE4MTcyMywyLjAyMzc3MTIgMzEuMDMzNDA1OCwyIEwxNi45NjY0NzYyLDIgTDE2Ljk2NjQ3NjIsMiBaIiBpZD0iQ2xpcC0yIiBmaWxsPSIjQzhDQ0Q3Ij48L3BhdGg+DQogICAgICAgICAgICA8cGF0aCBkPSJNMjQuNSwxNC41IEwyNC41LDguNSIgaWQ9IkxpbmUtQ29weSIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4NCiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iVHJpYW5nbGUtQ29weSIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHBvaW50cz0iMTQgMzggMjQuNSAxNyAyNC41IDE3IDM1IDM4Ij48L3BvbHlsaW5lPg0KICAgICAgICAgICAgPHBhdGggZD0iTTEyLjM1NzE0MjksMzAgTDM2LjY1MzM1OTEsMzAiIGlkPSJMaW5lLUNvcHktMiIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4NCiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtQ29weSIgc3Ryb2tlPSIjMDA0NENCIiBmaWxsPSIjRDhEQkUyIiBjeD0iMjQuNSIgY3k9IjE3LjUiIHI9IjQuNSI+PC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
      width: 71px;
      height: 48px;
    }
    &.project-large {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1Qcm9qZWN0LUxhcmdlIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMS40MjYwOTk0LDguNTI3NDg0MjIgTDEuNTcwMzM4NjEsMjUuNDcwNzQzIEMwLjUzMzAxNDM5NiwyNy4yNTcxOTQ5IDAuMDA4MjMxOTQxOTYsMjkuNTk4MzY3NyAwLDMxLjk0NTc5MTYgQzAuMDA4MjI0NzU0OTYsMzQuMzk5OTk1MyAwLjUzMDMzNDcxMywzNi43Mzk4MTA0IDEuNTcwMzM4NjEsMzguNTI4OTg0MiBMMTEuNDI2MDk5NCw1NS40NzIyNDMxIEMxMy41MTcyNDQxLDU5LjA2OTUzMjEgMTguNTY2NTkzNSw2MiAyMi42OTExNjgzLDYyIEw0MS4zMDg3OTg1LDYyIEM0NS40Mzg3NDIxLDYyIDUwLjQ3NzM1MzksNTkuMDc3NzE0IDUyLjU3NTIwOTYsNTUuNDcyMjQzMSBMNjIuNDI5NjI4MiwzOC41Mjg5ODQyIEM2My40NTY0MDk4LDM2Ljc2MTcwMzUgNjMuOTgxMjA5MiwzNC40NTE2OTMgNjQsMzIuMTMwNzczMyBMNjQsMzEuODY4OTUzOSBDNjMuOTgxMjA5MiwyOS41NDkzOTggNjMuNDU3NzUyLDI3LjIzOTM4NzUgNjIuNDI5NjI4MiwyNS40NzA3NDMgTDUyLjU3NTIwOTYsOC41Mjc0ODQyMiBDNTAuNDk0Mzg1Nyw0Ljk1MDI0NTU1IDQ1LjQ5MDg5NjQsMi4wMzI0MTU0MiA0MS4zNzc4NzQzLDIgTDIyLjYyMTk2ODIsMiBDMTguNTA2NDEwMywyLjAzMjM3Nzc0IDEzLjUxMDkxMzksNC45NDM0ODg2NyAxMS40MjYwOTk0LDguNTI3NDg0MjIgWiIgaWQ9IkNsaXAtMi1Db3B5IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+DQogICAgICAgICAgICA8cGF0aCBkPSJNMzIuNSwxNi41IEwzMi41LDEwLjUiIGlkPSJMaW5lIiBzdHJva2U9IiMwMDQ0Q0IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPg0KICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJUcmlhbmdsZSIgc3Ryb2tlPSIjMDA0NENCIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHBvaW50cz0iMTggNTAgMzIuNSAyMSAzMi41IDIxIDQ3IDUwIj48L3BvbHlsaW5lPg0KICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjMDA0NENCIiBmaWxsPSIjRkZGRkZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGN4PSIzMi41IiBjeT0iMjIuNSIgcj0iNS41Ij48L2NpcmNsZT4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS41LDM5LjUgTDQ5LjUxNDcwMjcsMzkuNSIgaWQ9IkxpbmUiIHN0cm9rZT0iIzAwNDRDQiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
      width: 64px;
      height: 64px;
    }
    &.migration {
      background-image: url('data:image/svg+xml;base64,[encoded data, 4492 characters]');
      width: 64px;
      height: 44px;
    }
    &.migration-large {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9Ikljb24tTWlncmF0aW9uLUxhcmdlLS1TeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Ikljb24tTWlncmF0aW9uLUxhcmdlLS1JY29uLU1pZ3JhdGlvbi1MYXJnZSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNMjIuNjIxOTY4MiwyIEMxOC41MDY0MTAzLDIuMDMyMzc3NzQgMTMuNTEwOTEzOSw0Ljk0MzQ4ODY3IDExLjQyNjA5OTQsOC41Mjc0ODQyMiBMMS41NzAzMzg2MSwyNS40NzA3NDMgQzAuNTMzMDE0Mzk2LDI3LjI1NzE5NDkgMC4wMDgyMzE5NDE5NiwyOS41OTgzNjc3IDAsMzEuOTQ1NzkxNiBMMS40MDc0NjQ5MWUtMTcsMzIuMDU1MjkyMiBDMC4wMDgyMjQ3NTQ5NiwzNC4zOTk5OTUzIDAuNTMwMzM0NzEzLDM2LjczOTgxMDQgMS41NzAzMzg2MSwzOC41Mjg5ODQyIEwxMS40MjYwOTk0LDU1LjQ3MjI0MzEgQzEzLjUxNzI0NDEsNTkuMDY5NTMyMSAxOC41NjY1OTM1LDYyIDIyLjY5MTE2ODMsNjIgTDQxLjMwODc5ODUsNjIgQzQ1LjQzODc0MjEsNjIgNTAuNDc3MzUzOSw1OS4wNzc3MTQgNTIuNTc1MjA5Niw1NS40NzIyNDMxIEw2Mi40Mjk2MjgyLDM4LjUyODk4NDIgQzYzLjQ1NjQwOTgsMzYuNzYxNzAzNSA2My45ODEyMDkyLDM0LjQ1MTY5MyA2NCwzMi4xMzA3NzMzIEw2NCwzMS44Njg5NTM5IEM2My45ODEyMDkyLDI5LjU0OTM5OCA2My40NTc3NTIsMjcuMjM5Mzg3NSA2Mi40Mjk2MjgyLDI1LjQ3MDc0MyBMNTIuNTc1MjA5Niw4LjUyNzQ4NDIyIEM1MC40OTQzODU3LDQuOTUwMjQ1NTUgNDUuNDkwODk2NCwyLjAzMjQxNTQyIDQxLjM3Nzg3NDMsMiBMMjIuNjIxOTY4MiwyIEwyMi42MjE5NjgyLDIgWiIgaWQ9Ikljb24tTWlncmF0aW9uLUxhcmdlLS1DbGlwLTIiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4NCiAgICAgICAgICAgIDxnIGlkPSJJY29uLU1pZ3JhdGlvbi1MYXJnZS0tR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDExLjAwMDAwMCkiIHN0cm9rZT0iIzAwNDRDQiI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTIzLjk5OTg5NzEsMTIuODA4NTQyOCBDMTEuMTUzNzY0MiwxMi44MDg1NDI4IDAuNzAzNDU3MjI2LDE2LjQ5ODkxOTYgMC43MDM0NTcyMjYsMjEuMDM2MTM4NyBDMC43MDM0NTcyMjYsMjUuNTcyMzcwOCAxMS4xNTM3NjQyLDI5LjI2Mjc0NzcgMjMuOTk5ODk3MSwyOS4yNjI3NDc3IEMzNi44NDYwMywyOS4yNjI3NDc3IDQ3LjI5NzM0MjgsMjUuNTcyMzcwOCA0Ny4yOTczNDI4LDIxLjAzNjEzODcgQzQ3LjI5NzM0MjgsMTYuNDk4OTE5NiAzNi44NDYwMywxMi44MDg1NDI4IDIzLjk5OTg5NzEsMTIuODA4NTQyOCIgaWQ9Ikljb24tTWlncmF0aW9uLUxhcmdlLS1GaWxsLTI1Ij48L3BhdGg+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjQ2MzkyNjIsMC42ODk5MTM4NTEgQzExLjc5NzIyODQsMC42ODk5MTM4NTEgOS41NTc5NzAyNCwxLjUzNTc2OTE0IDcuOTc3NTU1MTcsMy4xNDQ1NzIwOSBDMi43MDc4MjA3OCw4LjUwNTkzMjU4IDUuNzEzMDM0NiwyMC44Nzc5MjMzIDE0LjY3NjEzMDMsMzAuNzIzMjA1MiBDMjAuNTIwODM2NywzNy4xNDI2MjUgMjcuODA1NDk5Miw0MS4xOTgxOTAyIDMzLjY4ODYwNDQsNDEuMzA3NzQ2OCBDMzYuNDYyNDE0OCw0MS4zNTExNzQ2IDM4Ljc4NjU1NDYsNDAuNTExMjQxMiA0MC40MTM0NTI1LDM4Ljg1NTA2MjUgQzQ1LjY4MzE4NjgsMzMuNDkzNzAyIDQyLjY3Nzk3MywyMS4xMjE3MTEzIDMzLjcxMzg2NjgsMTEuMjc2NDI5NCBDMjcuODcwMTcxLDQuODU3MDA5NTggMjAuNTg1NTA4NCwwLjgwMTQ0NDM2MiAxNC43MDI0MDMyLDAuNjkxODg3ODQyIEMxNC42MjI1NzQsMC42OTA5MDA4NDYgMTQuNTQyNzQ0OSwwLjY4OTkxMzg1MSAxNC40NjM5MjYyLDAuNjg5OTEzODUxIiBpZD0iSWNvbi1NaWdyYXRpb24tTGFyZ2UtLUZpbGwtMyI+PC9wYXRoPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC4yMjU4NTYsMC42OTAyMDQ1MzkgQzM0LjE0NzAzNzMsMC42OTAyMDQ1MzkgMzQuMDY3MjA4MiwwLjY5MTE5MTUzNSAzMy45ODczNzksMC42OTIxNzg1MyBDMjguMTA1Mjg0MywwLjgwMTczNTA1IDIwLjgxOTYxMTMsNC44NTczMDAyNyAxNC45NzU5MTU0LDExLjI3NjcyMDEgQzYuMDExODA5MTksMjEuMTIyMDAyIDMuMDA2NTk1MzcsMzMuNDkzOTkyNyA4LjI3NjMyOTc2LDM4Ljg1NTM1MzIgQzkuOTA0MjM4MTMsNDAuNTExNTMxOSAxMi4yMzM0MzA0LDQxLjM2NDI5NjIgMTUuMDAxMTc3OCw0MS4zMDgwMzc0IEMyMC44ODQyODMsNDEuMTk3NDkzOSAyOC4xNjg5NDU1LDM3LjE0MjkxNTcgMzQuMDEyNjQxNCwzMC43MjM0OTU5IEM0Mi45NzY3NDc2LDIwLjg3ODIxNCA0NS45ODE5NjE0LDguNTA2MjIzMjcgNDAuNzEyMjI3LDMuMTQ0ODYyNzggQzM5LjEzMTgxMiwxLjUzNjA1OTgzIDM2Ljg5MjU1MzgsMC42OTAyMDQ1MzkgMzQuMjI1ODU2LDAuNjkwMjA0NTM5IiBpZD0iSWNvbi1NaWdyYXRpb24tTGFyZ2UtLUZpbGwtMTQiPjwvcGF0aD4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
      width: 64px;
      height: 61px;
    }
    &.replica {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9Ikljb24tUmVwbGljYS1TbWFsbC0tU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJJY29uLVJlcGxpY2EtU21hbGwtLUljb24tUmVwbGljYS1TbWFsbCI+DQogICAgICAgICAgICA8cGF0aCBkPSJNMTYuOTY2NDc2MiwyIEMxMy44Nzk4MDc3LDIuMDIzNzQzNTYgMTAuMTMzMTg1NCw0LjE1ODU0ODU1IDguNTY5NTc0NTgsNi43ODY4IEwxLjE3Nzc1Mzk2LDE5LjIxMTggQzAuMzk5NzYwNzk3LDIwLjUyMTg1ODcgMC4wMDYxNzM5NTY0NywyMi4yMzg3MTEgMCwyMy45NjAxNDc0IEwxLjA1NTU5ODY4ZS0xNywyNC4wNDA0NDc0IEMwLjAwNjE2ODU2NjIyLDI1Ljc1OTg4ODUgMC4zOTc3NTEwMzUsMjcuNDc1NzQ1MiAxLjE3Nzc1Mzk2LDI4Ljc4NzggTDguNTY5NTc0NTgsNDEuMjEyOCBDMTAuMTM3OTMzMSw0My44NTA4IDEzLjkyNDk0NTEsNDUuOTk5OCAxNy4wMTgzNzYyLDQ1Ljk5OTggTDMwLjk4MTU5ODksNDUuOTk5OCBDMzQuMDc5MDU2Niw0NS45OTk4IDM3Ljg1ODAxNTQsNDMuODU2OCAzOS40MzE0MDcyLDQxLjIxMjggTDQ2LjgyMjIyMTEsMjguNzg3OCBDNDcuNTkyMzA3MywyNy40OTE4IDQ3Ljk4NTkwNjksMjUuNzk3OCA0OCwyNC4wOTU4IEw0OCwyMy45MDM4IEM0Ny45ODU5MDY5LDIyLjIwMjggNDcuNTkzMzE0LDIwLjUwODggNDYuODIyMjIxMSwxOS4yMTE4IEwzOS40MzE0MDcyLDYuNzg2OCBDMzcuODcwNzg5Myw0LjE2MzUwMzU3IDM0LjExODE3MjMsMi4wMjM3NzEyIDMxLjAzMzQwNTgsMiBMMTYuOTY2NDc2MiwyIEwxNi45NjY0NzYyLDIgWiIgaWQ9Ikljb24tUmVwbGljYS1TbWFsbC0tQ2xpcC0yIiBmaWxsPSIjQzhDQ0Q3Ij48L3BhdGg+DQogICAgICAgICAgICA8ZyBpZD0iSWNvbi1SZXBsaWNhLVNtYWxsLS1Hcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjAwMDAwMCwgOS4wMDAwMDApIiBzdHJva2U9IiNGQTE2NjEiPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTk5MjcxLDkuMTQ4OTU5MTUgQzcuOTAwNTgyOTgsOS4xNDg5NTkxNSAwLjQ5ODI4MjIwMiwxMS43ODQ5NDI2IDAuNDk4MjgyMjAyLDE1LjAyNTgxMzQgQzAuNDk4MjgyMjAyLDE4LjI2NTk3OTIgNy45MDA1ODI5OCwyMC45MDE5NjI2IDE2Ljk5OTkyNzEsMjAuOTAxOTYyNiBDMjYuMDk5MjcxMiwyMC45MDE5NjI2IDMzLjUwMjI4NDUsMTguMjY1OTc5MiAzMy41MDIyODQ1LDE1LjAyNTgxMzQgQzMzLjUwMjI4NDUsMTEuNzg0OTQyNiAyNi4wOTkyNzEyLDkuMTQ4OTU5MTUgMTYuOTk5OTI3MSw5LjE0ODk1OTE1IiBpZD0iSWNvbi1SZXBsaWNhLVNtYWxsLS1GaWxsLTI1Ij48L3BhdGg+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjI0NTI4MTEsMC40OTI3OTU2MDggQzguMzU2MzcwMTMsMC40OTI3OTU2MDggNi43NzAyMjg5MiwxLjA5Njk3Nzk2IDUuNjUwNzY4MjUsMi4yNDYxMjI5MiBDMS45MTgwMzk3Miw2LjA3NTY2NjEzIDQuMDQ2NzMyODQsMTQuOTEyODAyNCAxMC4zOTU1OTIzLDIxLjk0NTE0NjUgQzE0LjUzNTU5MjYsMjYuNTMwNDQ2NCAxOS42OTU1NjIsMjkuNDI3Mjc4NyAyMy44NjI3NjE1LDI5LjUwNTUzMzQgQzI1LjgyNzU0MzgsMjkuNTM2NTUzMyAyNy40NzM4MDk1LDI4LjkzNjYwMDkgMjguNjI2MTk1NSwyNy43NTM2MTYxIEMzMi4zNTg5MjQsMjMuOTI0MDcyOSAzMC4yMzAyMzA5LDE1LjA4NjkzNjYgMjMuODgwNjU1Nyw4LjA1NDU5MjQ1IEMxOS43NDEzNzExLDMuNDY5MjkyNTYgMTQuNTgxNDAxOCwwLjU3MjQ2MDI1OCAxMC40MTQyMDIzLDAuNDk0MjA1NjAyIEMxMC4zNTc2NTY2LDAuNDkzNTAwNjA1IDEwLjMwMTExMSwwLjQ5Mjc5NTYwOCAxMC4yNDUyODExLDAuNDkyNzk1NjA4IiBpZD0iSWNvbi1SZXBsaWNhLVNtYWxsLS1GaWxsLTMiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjQuMjQzMzE0NywwLjQ5MzAwMzI0MiBDMjQuMTg3NDg0OCwwLjQ5MzAwMzI0MiAyNC4xMzA5MzkxLDAuNDkzNzA4MjM5IDI0LjA3NDM5MzUsMC40OTQ0MTMyMzYgQzE5LjkwNzkwOTcsMC41NzI2Njc4OTMgMTQuNzQ3MjI0NiwzLjQ2OTUwMDE5IDEwLjYwNzk0MDEsOC4wNTQ4MDAwOSBDNC4yNTgzNjQ4NCwxNS4wODcxNDQzIDIuMTI5NjcxNzIsMjMuOTI0MjgwNSA1Ljg2MjQwMDI1LDI3Ljc1MzgyMzcgQzcuMDE1NTAyMDEsMjguOTM2ODA4NSA4LjY2NTM0NjU0LDI5LjU0NTkyNTkgMTAuNjI1ODM0MywyOS41MDU3NDEgQzE0Ljc5MzAzMzgsMjkuNDI2NzgxNCAxOS45NTMwMDMxLDI2LjUzMDY1NDEgMjQuMDkyMjg3NywyMS45NDUzNTQyIEMzMC40NDE4NjI5LDE0LjkxMzAxIDMyLjU3MDU1Niw2LjA3NTg3Mzc2IDI4LjgzNzgyNzUsMi4yNDYzMzA1NSBDMjcuNzE4MzY2OCwxLjA5NzE4NTU5IDI2LjEzMjIyNTYsMC40OTMwMDMyNDIgMjQuMjQzMzE0NywwLjQ5MzAwMzI0MiIgaWQ9Ikljb24tUmVwbGljYS1TbWFsbC0tRmlsbC0xNCI+PC9wYXRoPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
      width: 64px;
      height: 44px;
    }
    &.replica-large {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlJlcGxpY2EtTGFyZ2UtLVN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iUmVwbGljYS1MYXJnZS0tUmVwbGljYS1MYXJnZSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNMjIuNjIxOTY4MiwyIEMxOC41MDY0MTAzLDIuMDMyMzc3NzQgMTMuNTEwOTEzOSw0Ljk0MzQ4ODY3IDExLjQyNjA5OTQsOC41Mjc0ODQyMiBMMS41NzAzMzg2MSwyNS40NzA3NDMgQzAuNTMzMDE0Mzk2LDI3LjI1NzE5NDkgMC4wMDgyMzE5NDE5NiwyOS41OTgzNjc3IDAsMzEuOTQ1NzkxNiBMMS40MDc0NjQ5MWUtMTcsMzIuMDU1MjkyMiBDMC4wMDgyMjQ3NTQ5NiwzNC4zOTk5OTUzIDAuNTMwMzM0NzEzLDM2LjczOTgxMDQgMS41NzAzMzg2MSwzOC41Mjg5ODQyIEwxMS40MjYwOTk0LDU1LjQ3MjI0MzEgQzEzLjUxNzI0NDEsNTkuMDY5NTMyMSAxOC41NjY1OTM1LDYyIDIyLjY5MTE2ODMsNjIgTDQxLjMwODc5ODUsNjIgQzQ1LjQzODc0MjEsNjIgNTAuNDc3MzUzOSw1OS4wNzc3MTQgNTIuNTc1MjA5Niw1NS40NzIyNDMxIEw2Mi40Mjk2MjgyLDM4LjUyODk4NDIgQzYzLjQ1NjQwOTgsMzYuNzYxNzAzNSA2My45ODEyMDkyLDM0LjQ1MTY5MyA2NCwzMi4xMzA3NzMzIEw2NCwzMS44Njg5NTM5IEM2My45ODEyMDkyLDI5LjU0OTM5OCA2My40NTc3NTIsMjcuMjM5Mzg3NSA2Mi40Mjk2MjgyLDI1LjQ3MDc0MyBMNTIuNTc1MjA5Niw4LjUyNzQ4NDIyIEM1MC40OTQzODU3LDQuOTUwMjQ1NTUgNDUuNDkwODk2NCwyLjAzMjQxNTQyIDQxLjM3Nzg3NDMsMiBMMjIuNjIxOTY4MiwyIEwyMi42MjE5NjgyLDIgWiIgaWQ9IlJlcGxpY2EtTGFyZ2UtLUNsaXAtMiIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPg0KICAgICAgICAgICAgPGcgaWQ9IlJlcGxpY2EtTGFyZ2UtLUdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCAxMS4wMDAwMDApIiBzdHJva2U9IiNGQTE2NjEiPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy45OTk4OTcxLDEyLjgwODU0MjggQzExLjE1Mzc2NDIsMTIuODA4NTQyOCAwLjcwMzQ1NzIyNiwxNi40OTg5MTk2IDAuNzAzNDU3MjI2LDIxLjAzNjEzODcgQzAuNzAzNDU3MjI2LDI1LjU3MjM3MDggMTEuMTUzNzY0MiwyOS4yNjI3NDc3IDIzLjk5OTg5NzEsMjkuMjYyNzQ3NyBDMzYuODQ2MDMsMjkuMjYyNzQ3NyA0Ny4yOTczNDI4LDI1LjU3MjM3MDggNDcuMjk3MzQyOCwyMS4wMzYxMzg3IEM0Ny4yOTczNDI4LDE2LjQ5ODkxOTYgMzYuODQ2MDMsMTIuODA4NTQyOCAyMy45OTk4OTcxLDEyLjgwODU0MjgiIGlkPSJSZXBsaWNhLUxhcmdlLS1GaWxsLTI1Ij48L3BhdGg+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjQ2MzkyNjIsMC42ODk5MTM4NTEgQzExLjc5NzIyODQsMC42ODk5MTM4NTEgOS41NTc5NzAyNCwxLjUzNTc2OTE0IDcuOTc3NTU1MTcsMy4xNDQ1NzIwOSBDMi43MDc4MjA3OCw4LjUwNTkzMjU4IDUuNzEzMDM0NiwyMC44Nzc5MjMzIDE0LjY3NjEzMDMsMzAuNzIzMjA1MiBDMjAuNTIwODM2NywzNy4xNDI2MjUgMjcuODA1NDk5Miw0MS4xOTgxOTAyIDMzLjY4ODYwNDQsNDEuMzA3NzQ2OCBDMzYuNDYyNDE0OCw0MS4zNTExNzQ2IDM4Ljc4NjU1NDYsNDAuNTExMjQxMiA0MC40MTM0NTI1LDM4Ljg1NTA2MjUgQzQ1LjY4MzE4NjgsMzMuNDkzNzAyIDQyLjY3Nzk3MywyMS4xMjE3MTEzIDMzLjcxMzg2NjgsMTEuMjc2NDI5NCBDMjcuODcwMTcxLDQuODU3MDA5NTggMjAuNTg1NTA4NCwwLjgwMTQ0NDM2MiAxNC43MDI0MDMyLDAuNjkxODg3ODQyIEMxNC42MjI1NzQsMC42OTA5MDA4NDYgMTQuNTQyNzQ0OSwwLjY4OTkxMzg1MSAxNC40NjM5MjYyLDAuNjg5OTEzODUxIiBpZD0iUmVwbGljYS1MYXJnZS0tRmlsbC0zIj48L3BhdGg+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjIyNTg1NiwwLjY5MDIwNDUzOSBDMzQuMTQ3MDM3MywwLjY5MDIwNDUzOSAzNC4wNjcyMDgyLDAuNjkxMTkxNTM1IDMzLjk4NzM3OSwwLjY5MjE3ODUzIEMyOC4xMDUyODQzLDAuODAxNzM1MDUgMjAuODE5NjExMyw0Ljg1NzMwMDI3IDE0Ljk3NTkxNTQsMTEuMjc2NzIwMSBDNi4wMTE4MDkxOSwyMS4xMjIwMDIgMy4wMDY1OTUzNywzMy40OTM5OTI3IDguMjc2MzI5NzYsMzguODU1MzUzMiBDOS45MDQyMzgxMyw0MC41MTE1MzE5IDEyLjIzMzQzMDQsNDEuMzY0Mjk2MiAxNS4wMDExNzc4LDQxLjMwODAzNzQgQzIwLjg4NDI4Myw0MS4xOTc0OTM5IDI4LjE2ODk0NTUsMzcuMTQyOTE1NyAzNC4wMTI2NDE0LDMwLjcyMzQ5NTkgQzQyLjk3Njc0NzYsMjAuODc4MjE0IDQ1Ljk4MTk2MTQsOC41MDYyMjMyNyA0MC43MTIyMjcsMy4xNDQ4NjI3OCBDMzkuMTMxODEyLDEuNTM2MDU5ODMgMzYuODkyNTUzOCwwLjY5MDIwNDUzOSAzNC4yMjU4NTYsMC42OTAyMDQ1MzkiIGlkPSJSZXBsaWNhLUxhcmdlLS1GaWxsLTE0Ij48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
      width: 64px;
      height: 61px;
    }
    &.small-cloud {
      width: 80px;
      height: 32px;
      background-image: url('data:image/svg+xml;base64,[encoded data, 25724 characters]');
      &.vmware_vsphere {
        background-image: url('data:image/svg+xml;base64,[encoded data, 10268 characters]');
      }
      &.openstack {
        background-image: url('data:image/svg+xml;base64,[encoded data, 11812 characters]');
      }
      &.aws {
        background-image: url('data:image/svg+xml;base64,[encoded data, 28304 characters]');
      }
      &.azure {
        background-image: url('data:image/svg+xml;base64,[encoded data, 7088 characters]');
      }
      &.google-cloud {
        background-image: url('data:image/svg+xml;base64,[encoded data, 24400 characters]');
      }
      &.oracle_vm {
        background-image: url('data:image/svg+xml;base64,[encoded data, 9080 characters]');
      }
      &.opc {
        background-image: url('data:image/svg+xml;base64,[encoded data, 15500 characters]')
      }
    }
    &.large-cloud {
      width: 192px;
      height: 128px;
      background-image: url('data:image/svg+xml;base64,[encoded data, 30028 characters]');
      &.dim {
        background-image: url('data:image/svg+xml;base64,[encoded data, 30028 characters]');
      }
      &.dimmer {
        background-image: url('data:image/svg+xml;base64,[encoded data, 29892 characters]');
      }
      &.vmware_vsphere {
        background-image: url('data:image/svg+xml;base64,[encoded data, 9952 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 10060 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 10060 characters]');
        }
      }
      &.openstack {
        background-image: url('data:image/svg+xml;base64,[encoded data, 12124 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 11960 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 11960 characters]');
        }
      }
      &.aws {
        background-image: url('data:image/svg+xml;base64,[encoded data, 28256 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 28172 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 28172 characters]');
        }
      }
      &.azure {
        background-image: url('data:image/svg+xml;base64,[encoded data, 18608 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 18784 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 18784 characters]');
        }
      }
      &.google-cloud {
        background-image: url('data:image/svg+xml;base64,[encoded data, 24008 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 21612 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 22000 characters]');
        }
      }
      &.oracle_vm {
        background-image: url('data:image/svg+xml;base64,[encoded data, 18852 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 18916 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 18672 characters]');
        }
      }
      &.opc {
        background-image: url('data:image/svg+xml;base64,[encoded data, 14000 characters]');
        &.dim {
          background-image: url('data:image/svg+xml;base64,[encoded data, 13980 characters]');
        }
        &.dimmer {
          background-image: url('data:image/svg+xml;base64,[encoded data, 13980 characters]');
        }
      }
    }
    &.network {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3QgaWQ9IlJlY3RhbmdsZS02IiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGMUY0RjkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeD0iMCIgeT0iMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCI+PC9yZWN0PjxnIGlkPSJHcm91cC0yIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjAwMDAwMCwgOC4wMDAwMDApIj48cGF0aCBkPSJNMjkuMTI4MjA1MSwyNy4wMjIyMjIyIEMyNy45NjUxMDI5LDI3LjAyMjIyMjIgMjcuMDIyMjIyMiwyNy45NjUxMDM0IDI3LjAyMjIyMjIsMjkuMTI4MjA1MSBDMjcuMDIyMjIyMiwzMC4yOTEzMDY4IDI3Ljk2NTEwMjksMzEuMjM0MTg4IDI5LjEyODIwNTEsMzEuMjM0MTg4IEMzMC4yOTEzMDc0LDMxLjIzNDE4OCAzMS4yMzQxODgsMzAuMjkxMzA2OCAzMS4yMzQxODgsMjkuMTI4MjA1MSBDMzEuMjM0MTg4LDI3Ljk2NTEwMzQgMzAuMjkxMzA3NCwyNy4wMjIyMjIyIDI5LjEyODIwNTEsMjcuMDIyMjIyMiBMMjkuMTI4MjA1MSwyNy4wMjIyMjIyIFoiIGlkPSJTaGFwZSIgZmlsbD0iIzAwNTZCOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMTI4MjA1LCAyOS4xMjgyMDUpIHJvdGF0ZSgtNDUwLjAwMDAwMCkgdHJhbnNsYXRlKC0yOS4xMjgyMDUsIC0yOS4xMjgyMDUpICI+PC9wYXRoPjxwYXRoIGQ9Ik0yOS4xMjgyMDUxLDEzLjUxMTExMTEgQzI3Ljk2NTEwMjksMTMuNTExMTExMSAyNy4wMjIyMjIyLDE0LjQ1Mzk5MjMgMjcuMDIyMjIyMiwxNS42MTcwOTQgQzI3LjAyMjIyMjIsMTYuNzgwMTk1NyAyNy45NjUxMDI5LDE3LjcyMzA3NjkgMjkuMTI4MjA1MSwxNy43MjMwNzY5IEMzMC4yOTEzMDc0LDE3LjcyMzA3NjkgMzEuMjM0MTg4LDE2Ljc4MDE5NTcgMzEuMjM0MTg4LDE1LjYxNzA5NCBDMzEuMjM0MTg4LDE0LjQ1Mzk5MjMgMzAuMjkxMzA3NCwxMy41MTExMTExIDI5LjEyODIwNTEsMTMuNTExMTExMSBMMjkuMTI4MjA1MSwxMy41MTExMTExIFoiIGlkPSJTaGFwZS1Db3B5LTIiIGZpbGw9IiMwMDU2QjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjEyODIwNSwgMTUuNjE3MDk0KSByb3RhdGUoLTQ1MC4wMDAwMDApIHRyYW5zbGF0ZSgtMjkuMTI4MjA1LCAtMTUuNjE3MDk0KSAiPjwvcGF0aD48cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDA1NkI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjAwODU0NywgMTUuNjQ0NDQ0KSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMy4wMDg1NDcsIC0xNS42NDQ0NDQpICIgeD0iMCIgeT0iMTIuNjM1ODk3NCIgd2lkdGg9IjYuMDE3MDk0MDIiIGhlaWdodD0iNi4wMTcwOTQwMiIgcng9IjEuNDIyMjIyMjIiPjwvcmVjdD48cGF0aCBkPSJNMjkuMTI4MjA1MSwwIEMyNy45NjUxMDI5LDAgMjcuMDIyMjIyMiwwLjk0Mjg4MTE5IDI3LjAyMjIyMjIsMi4xMDU5ODI5MSBDMjcuMDIyMjIyMiwzLjI2OTA4NDYyIDI3Ljk2NTEwMjksNC4yMTE5NjU4MSAyOS4xMjgyMDUxLDQuMjExOTY1ODEgQzMwLjI5MTMwNzQsNC4yMTE5NjU4MSAzMS4yMzQxODgsMy4yNjkwODQ2MiAzMS4yMzQxODgsMi4xMDU5ODI5MSBDMzEuMjM0MTg4LDAuOTQyODgxMTkgMzAuMjkxMzA3NCwwIDI5LjEyODIwNTEsMCBMMjkuMTI4MjA1MSwwIFoiIGlkPSJTaGFwZS1Db3B5LTMiIGZpbGw9IiMwMDU2QjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjEyODIwNSwgMi4xMDU5ODMpIHJvdGF0ZSgtNDUwLjAwMDAwMCkgdHJhbnNsYXRlKC0yOS4xMjgyMDUsIC0yLjEwNTk4MykgIj48L3BhdGg+PHBhdGggZD0iTTYuMDE3MDk0MDIsMjEuNjYxNTA2MiBMNi4wMTcwOTQwMiwxMy4xODkxNDg5IEM2LjAxNzA5NDAyLDExLjIyMjAyMTkgNy42MDQyMjAwMSw5LjYyNzM1MDQzIDkuNTc1MzUwNDUsOS42MjczNTA0MyBMMTcuMDY2NjY2Nyw5LjYyNzM1MDQzIE0yMi4wNDQ0NDQ0LDkuNjI3MzUwNDMgTDI5LjU0MTA1MzEsOS42MjczNTA0MyBDMzEuNTAzMzAwOSw5LjYyNzM1MDQzIDMzLjA5NDAxNzEsMTEuMjI1Mzk3NyAzMy4wOTQwMTcxLDEzLjE4OTE1ODQgTDMzLjA5NDAxNzEsMjEuNjYxNTM4NSIgaWQ9IkxpbmUiIHN0cm9rZT0iIzAwNTZCOCIgc3Ryb2tlLXdpZHRoPSIxLjIzMDc2OTIzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOS41NTU1NTYsIDE1LjY0NDQ0NCkgcm90YXRlKC00NTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE5LjU1NTU1NiwgLTE1LjY0NDQ0NCkgIj48L3BhdGg+PHJlY3QgaWQ9IlJlY3RhbmdsZS03IiBmaWxsPSIjMDA1NkI4IiB4PSI3LjgyMjIyMjIyIiB5PSIxNC45MzMzMzMzIiB3aWR0aD0iMTcuNzc3Nzc3OCIgaGVpZ2h0PSIxLjIzMDc2OTIzIj48L3JlY3Q+PC9nPjwvc3ZnPg==');
      width: 48px;
      height: 48px;
    }
    &.vm {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ4IDQ4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OCA0ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0Q5RENFMzt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiMwMDQ0Q0I7fQ0KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojMDA0NENCO3N0cm9rZS1saW5lY2FwOnNxdWFyZTt9DQo8L3N0eWxlPg0KPHBhdGggaWQ9IlJlY3RhbmdsZS1Db3B5LTIiIGNsYXNzPSJzdDAiIGQ9Ik04LDBoMzJjNC40LDAsOCwzLjYsOCw4djMyYzAsNC40LTMuNiw4LTgsOEg4Yy00LjQsMC04LTMuNi04LThWOEMwLDMuNiwzLjYsMCw4LDB6Ii8+DQo8cGF0aCBpZD0iUGFnZS0xIiBjbGFzcz0ic3QxIiBkPSJNMjQsMTAuNmwtMTEuNSw2Ljd2MTMuNEwyNCwzNy40bDExLjUtNi43VjE3LjNMMjQsMTAuNnoiLz4NCjxwYXRoIGlkPSJQYWdlLTEtQ29weSIgY2xhc3M9InN0MSIgZD0iTTEyLjUsMTcuNnYwLjJMMjQsMjMuOWwxMS41LTYuMnYtMC4yIi8+DQo8cGF0aCBpZD0iTGluZSIgY2xhc3M9InN0MiIgZD0iTTI0LDI0djEzIi8+DQo8L3N2Zz4NCg==');
      width: 48px;
      height: 48px;
    }
    &.connector {
      &.migration {
        background-image: url('data:image/svg+xml;base64,[encoded data, 4944 characters]');
      }
      &.replica {
        background-image: url('data:image/svg+xml;base64,[encoded data, 5160 characters]');
      }
      background-image: url('data:image/svg+xml;base64,[encoded data, 4944 characters]');
      width: 60px;
      height: 32px;
      margin: 0 32px;
    }

  }
  .logo {
    &.coriolis-white {
        background-image: url(data:image/svg+xml;base64,[encoded data, 19588 characters]);
    }
  }
  .logo {
    &.coriolis-white-topbar {
	background-image: url(data:image/svg+xml;base64,[encoded data, 19068 characters]);
    }
  }
  .smallText {
    color: $gray;
    font-size: 10px;
  }
}

:global(.no-results) {
  font-size: 16px;
  text-align: center;
  padding: 40px 0;
  button {
    margin-top: 24px;
  }
}
:global {
  .noResultsLarge {
    padding: 80px;
    border-radius: $border-radius;
    text-align: center;
    .icon {
      margin-bottom: 48px;
      display: inline-block;
    }
    h3 {
      margin: 0 0 16px;
      font-weight: 400;
      font-size: 18px;
      color: #202234;
    }
    p {
      margin-bottom: 32px;
      font-weight: 400;
      font-size: 14px;
      color: #616870;
      letter-spacing: 0;
      line-height: 18px;
    }
    button {
      width: 192px;
    }
  }
}
:global(.icon-delete) {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPjxtYXNrIGlkPSJtYXNrLTIiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiUyM3BhdGgtMSI+PC91c2U+PC9tYXNrPjwvZGVmcz48ZyBpZD0iR3JvdXAtMiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBpZD0iT3ZhbC0yIiBzdHJva2U9IiUyMzAwNTZCOCIgbWFzaz0idXJsKCUyM21hc2stMikiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0iJTIzRkZGRkZGIiB4bGluazpocmVmPSIlMjNwYXRoLTEiPjwvdXNlPjwvZz48cGF0aCBkPSJNNCw4IEwxMiw4IiBpZD0iTGluZSIgc3Ryb2tlPSIlMjMwMDU2QjgiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==');
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
:global(.arrow) {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSI2IDIgMjEgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBvbHlsaW5lIGlkPSJQYXRoLTE4MS1Db3B5LTQiIHN0cm9rZT0iI0E0QUFCNSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBwb2ludHM9IjIxIDIuNSAyNiA4IDIxIDEzLjUiPjwvcG9seWxpbmU+PHBhdGggZD0iTTcsOCBMMjYsOCIgaWQ9IkxpbmUiIHN0cm9rZT0iI0E0QUFCNSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi41MDAwMDAsIDguMDAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuNTAwMDAwLCAtOC4wMDAwMDApICI+PC9wYXRoPjwvc3ZnPg==');
  background-size: contain;
  background-repeat: no-repeat;
  width: 21px;
  height: 12px;
  display: inline-block;
}
:global(.status-pill) {
  text-align: center;
  display: inline-block;
  line-height: 16px;
  font-size: 10px;
  padding: 0 5px;
  color: #FFF;
  min-width: 64px;
  border-radius: $border-radius;
  background-color: $black;
  &:global(.RUNNING) {
    $bgWidth: 128px;
    background-image: url('data:image/svg+xml;utf8,<svg width="128px" height="16px" viewBox="0 0 128 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pattern id="pattern-1" width="12.4264706" height="12.4264706" x="-12.4264706" y="-12.4264706" patternUnits="userSpaceOnUse"><use xlink:href="%23image-2" transform="scale(0.155330882,0.155330882)"></use></pattern><image id="image-2" width="80" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABGdBTUEAALGPC/xhBQAAAeJJREFUeAHt3FtuwyAQBdCkq/EOmyWkO/RuWk+jtHlgDMMA87h8WUZ3BEdIlozxeV3X75NsuyzL8iVbkl9tm9/nlr7yK+STH/nu6t5QeKQjCRgOTxIwJJ4UYFg8CcDQeK2A4fFaAIFHelvjPIWBd7NjAQLvAY8ua1Yg8F7wagCBl8ArBQTeDl4JIPAyeEeAwDvAywECrwBvDxB4hXgpQOBV4L0CAq8S7xEQeAy8OyDwmHgUOzdkxaO9N4DEB3w6XdQAWsSj3UcVgFbxaEVPB7SMNx3QOt5UQA940wC94E0B9IQ3HNAb3lBAj3jDAL3iDQH0jNcd0DteV8AIeN0Ao+B1AYyEJw4YDU8UMCKeGGBUPBHAyHjNgNHxmgCBR3zMV/rAu+GxAIH3j1cNCLxnvCpA4L3jFQMCL41XBAi8fbxDQODl8bKAwDvG2wUEXhleEhB45XhvgMCrw3sCBF493h8g8Hh4v4DA4+NRko67dvspTdvQkml1H8TXnBdOzmjgTXV429yvVgBV4tHisQCoFs8CoGo87YDq8TQDmsDTCmgGTyOgKTxtgObwNAGaxNMCaBZPA6BpvNmA5vFmArrAmwXoBm8GoCu80YDu8EYCusQbBegWbwSga7zegO7xegKGwCPAH6jFkxG1FP01AAAAAElFTkSuQmCC"></image></defs><rect id="Base" stroke="none" fill="%230056B8" fill-rule="evenodd" x="0" y="0" width="$bgWidth" height="16"></rect><rect id="Base" stroke="none" fill="url(%23pattern-1)" fill-rule="evenodd" opacity="0.440443841" style="mix-blend-mode: luminosity;" x="0" y="0" width="$bgWidth" height="16"></rect></svg>');
    animation: bgMotion 1s infinite linear;
  }
  &:global(.PAUSED) {
    background-color: $gray;
  }
  &:global(.COMPLETED) {
    background-color: $green;
  }
  &:global(.ERROR) {
    background-color: $red;
  }
}

input[type="text"], input[type="password"] {
  height: 32px;
  border-radius: 4px;
  background-color: #FFF;
  border: 1px solid $gray;
  font-size: 14px;
  color: $gray-dark;
  padding: 0 8px 0 16px;
  font-weight: $weight-regular;
  transition: all $animation-swift-out;
  box-sizing: border-box;
  &:hover {
    border-color: $blue;
  }
  &:focus {
    border-color: $blue;
    outline: none;
  }
  &:disabled {
    border-color: $gray-dark;
    background-color: $gray-lighter;
  }
}
textarea {
  border-radius: 4px;
  background-color: #FFF;
  border: 1px solid $gray;
  font-size: 14px;
  color: $gray-dark;
  padding: 8px 8px 8px 16px;
  resize: none;
}


input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* Normal Track */
input[type="checkbox"]:global(.ios-switch) + div {
  vertical-align: middle;
  width: 40px;	height: 20px;
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: .4s;
  -webkit-transition-property: background-color, box-shadow;
  box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
  cursor: pointer;
}

/* Checked Track (Blue) */
input[type="checkbox"]:global(.ios-switch):checked + div {
  width: 40px;
  background-position: 0 0;
  background-color: #3b89ec;
  border: 1px solid #0e62cd;
  box-shadow: inset 0 0 0 10px rgba(59,137,259,1);
}

/* Tiny Track */
input[type="checkbox"]:global(.tinyswitch.ios-switch) + div {
  width: 34px;	height: 18px;
}

/* Big Track */
input[type="checkbox"]:global(.bigswitch.ios-switch) + div {
  width: 50px;	height: 25px;
}

/* Green Track */
input[type="checkbox"]:global(.green.ios-switch):checked + div {
  background-color: #00e359;
  border: 1px solid rgba(0, 162, 63,1);
  box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

/* Normal Knob */
input[type="checkbox"]:global(.ios-switch) + div > div {
  float: left;
  width: 18px; height: 18px;
  border-radius: inherit;
  background: #ffffff;
  -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-property: transform, background-color, box-shadow;
  -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
  -moz-transition-duration: 0.4s;
  -moz-transition-property: transform, background-color;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  margin-top: 0px;
  margin-left: 1px;
}

/* Checked Knob (Blue Style) */
input[type="checkbox"]:global(.ios-switch):checked + div > div {
  -webkit-transform: translate3d(20px, 0, 0);
  -moz-transform: translate3d(20px, 0, 0);
  background-color: #ffffff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Tiny Knob */
input[type="checkbox"]:global(.tinyswitch.ios-switch) + div > div {
  width: 16px; height: 16px;
  margin-top: 1px;
}

/* Checked Tiny Knob (Blue Style) */
input[type="checkbox"]:global(.tinyswitch.ios-switch):checked + div > div {
  -webkit-transform: translate3d(16px, 0, 0);
  -moz-transform: translate3d(16px, 0, 0);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Big Knob */
input[type="checkbox"]:global(.bigswitch.ios-switch) + div > div {
  width: 23px; height: 23px;
  margin-top: -1px;
  margin-left: 0;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"]:global(.bigswitch.ios-switch):checked + div > div {
  -webkit-transform: translate3d(25px, 0, 0);
  -moz-transform: translate3d(16px, 0, 0);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Green Knob */
input[type="checkbox"]:global(.green.ios-switch):checked + div > div {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
}


/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

:global(.hidden) {
  display: none;
}
:global(.invisible) {
  opacity: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}
/*
 * Browser upgrade prompt
 * ========================================================================== */

:global(.browserupgrade) {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/*
 * Print styles
 * Inlined to avoid the additional HTTP request:
 * http://www.phpied.com/delay-loading-your-print-css/
 * ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

// TODO: Move datepicker style somewhere appopriate
:global {
  .react-datepicker__tether-element-attached-top .react-datepicker__triangle, .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow {
    margin-left: -8px;
    position: absolute;
  }
  .react-datepicker__tether-element-attached-top .react-datepicker__triangle, .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow, .react-datepicker__tether-element-attached-top .react-datepicker__triangle::before, .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before {
    box-sizing: content-box;
    position: absolute;
    border: 8px solid transparent;
    height: 0;
    width: 1px;
  }
  .react-datepicker__tether-element-attached-top .react-datepicker__triangle::before, .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before {
    content: "";
    z-index: -1;
    border-width: 8px;
    left: -8px;
    border-bottom-color: #aeaeae;
  }

  .react-datepicker__tether-element-attached-top .react-datepicker__triangle {
    top: 0;
    margin-top: -8px;
  }
  .react-datepicker__tether-element-attached-top .react-datepicker__triangle, .react-datepicker__tether-element-attached-top .react-datepicker__triangle::before {
    border-top: none;
    border-bottom-color: #f0f0f0;
  }
  .react-datepicker__tether-element-attached-top .react-datepicker__triangle::before {
    top: -1px;
    border-bottom-color: #aeaeae;
  }

  .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow {
    bottom: 0;
    margin-bottom: -8px;
  }
  .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow, .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before {
    border-bottom: none;
    border-top-color: #fff;
  }
  .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
  .react-datepicker__month-read-view--down-arrow::before {
    bottom: -1px;
    border-top-color: #aeaeae;
  }

  .react-datepicker {

    font-size: 0.8rem;
    background-color: #fff;
    color: #000;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    display: inline-block;
    position: relative;
  }

  .react-datepicker__triangle {
    position: absolute;
    left: 50px;
  }

  .react-datepicker__tether-element-attached-bottom.react-datepicker__tether-element {
    margin-top: -20px;
  }

  .react-datepicker__header {
    text-align: center;
    background-color: #f0f0f0;
    border-bottom: 1px solid #aeaeae;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    padding-top: 8px;
    position: relative;
  }

  .react-datepicker__year-dropdown-container--select,
  .react-datepicker__month-dropdown-container--select,
  .react-datepicker__year-dropdown-container--scroll,
  .react-datepicker__month-dropdown-container--scroll {
    display: inline-block;
    margin: 0 2px;
  }

  .react-datepicker__current-month {
    margin-top: 0;
    color: #000;
    font-weight: $weight-semibold;
    font-size: 0.944rem;
  }

  .react-datepicker__navigation {
    line-height: 1.7rem;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 10px;
    width: 0;
    border: 0.45rem solid transparent;
    z-index: 1;
  }
  .react-datepicker__navigation--previous {
    left: 10px;
    border-right-color: #ccc;
  }
  .react-datepicker__navigation--previous:hover {
    border-right-color: #b3b3b3;
  }
  .react-datepicker__navigation--next {
    right: 10px;
    border-left-color: #ccc;
  }
  .react-datepicker__navigation--next:hover {
    border-left-color: #b3b3b3;
  }
  .react-datepicker__navigation--years {
    position: relative;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .react-datepicker__navigation--years-previous {
    top: 4px;
    border-top-color: #ccc;
  }
  .react-datepicker__navigation--years-previous:hover {
    border-top-color: #b3b3b3;
  }
  .react-datepicker__navigation--years-upcoming {
    top: -4px;
    border-bottom-color: #ccc;
  }
  .react-datepicker__navigation--years-upcoming:hover {
    border-bottom-color: #b3b3b3;
  }

  .react-datepicker__month-container {
    display: inline;
    float: left;
  }

  .react-datepicker__month {
    margin: 0.4rem;
    text-align: center;
  }

  .react-datepicker__week-number {
    color: #ccc;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
  }

  .react-datepicker__day-name,
  .react-datepicker__day {
    color: #000;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
  }

  .react-datepicker__day {
    cursor: pointer;
  }
  .react-datepicker__day:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0;
  }
  .react-datepicker__day--today {
    font-weight: bold;
  }
  .react-datepicker__day--highlighted {
    border-radius: 0.3rem;
    background-color: #3dcc4a;
    color: #fff;
  }
  .react-datepicker__day--highlighted:hover {
    background-color: #32be3f;
  }
  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
    border-radius: 0.3rem;
    background-color: #216ba5;
    color: #fff;
  }
  .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
    background-color: #1d5d90;
  }
  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
    background-color: rgba(33, 107, 165, 0.5);
  }
  .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
    background-color: #f0f0f0;
    color: #000;
  }
  .react-datepicker__day--disabled {
    cursor: default;
    color: #ccc;
  }
  .react-datepicker__day--disabled:hover {
    background-color: transparent;
  }

  .react-datepicker__input-container {
    position: relative;
    display: inline-block;
  }

  .react-datepicker__year-read-view,
  .react-datepicker__month-read-view {
    border: 1px solid transparent;
    border-radius: 0.3rem;
  }
  .react-datepicker__year-read-view:hover,
  .react-datepicker__month-read-view:hover {
    cursor: pointer;
  }
  .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
    border-top-color: #b3b3b3;
  }
  .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow {
    border-top-color: #ccc;
    float: right;
    margin-left: 20px;
    top: 8px;
    position: relative;
    border-width: 0.45rem;
  }

  .react-datepicker__year-dropdown,
  .react-datepicker__month-dropdown {
    background-color: #f0f0f0;
    position: absolute;
    width: 50%;
    left: 25%;
    top: 30px;
    text-align: center;
    border-radius: 0.3rem;
    border: 1px solid #aeaeae;
  }
  .react-datepicker__year-dropdown:hover,
  .react-datepicker__month-dropdown:hover {
    cursor: pointer;
  }
  .react-datepicker__year-dropdown--scrollable,
  .react-datepicker__month-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
  }

  .react-datepicker__year-option,
  .react-datepicker__month-option {
    line-height: 20px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .react-datepicker__year-option:first-of-type,
  .react-datepicker__month-option:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
  }
  .react-datepicker__year-option:last-of-type,
  .react-datepicker__month-option:last-of-type {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
  }
  .react-datepicker__year-option:hover,
  .react-datepicker__month-option:hover {
    background-color: #ccc;
  }
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
    border-bottom-color: #b3b3b3;
  }
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
    border-top-color: #b3b3b3;
  }
  .react-datepicker__year-option--selected,
  .react-datepicker__month-option--selected {
    position: absolute;
    left: 15px;
  }

  .react-datepicker__close-icon {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 0;
    outline: 0;
    padding: 0;
    vertical-align: middle;
  }
  .react-datepicker__close-icon::after {
    background-color: #216ba5;
    border-radius: 50%;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    content: "\00d7";
    cursor: pointer;
    font-size: 12px;
    height: 16px;
    width: 16px;
    line-height: 1;
    margin: -8px auto 0;
    padding: 2px;
    position: absolute;
    right: 7px;
    text-align: center;
    top: 50%;
  }

  .react-datepicker__today-button {
    background: #f0f0f0;
    border-top: 1px solid #aeaeae;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
    clear: left;
  }

  .react-datepicker__tether-element {
    z-index: 2147483647;
  }

  .react-datepicker__portal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 2147483647;
  }
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 3rem;
    line-height: 3rem;
  }
  @media (max-width: 400px), (max-height: 550px) {
    .react-datepicker__portal .react-datepicker__day-name,
    .react-datepicker__portal .react-datepicker__day {
      width: 2rem;
      line-height: 2rem;
    }
  }
  .react-datepicker__portal .react-datepicker__current-month {
    font-size: 1.44rem;
  }
  .react-datepicker__portal .react-datepicker__navigation {
    border: 0.81rem solid transparent;
  }
  .react-datepicker__portal .react-datepicker__navigation--previous {
    border-right-color: #ccc;
  }
  .react-datepicker__portal .react-datepicker__navigation--previous:hover {
    border-right-color: #b3b3b3;
  }
  .react-datepicker__portal .react-datepicker__navigation--next {
    border-left-color: #ccc;
  }
  .react-datepicker__portal .react-datepicker__navigation--next:hover {
    border-left-color: #b3b3b3;
  }

}


/////////////////////
/// NOTIFICATIONS///
///////////////////

:global {
  .notifications-br {
    width: 244px !important;
  }
  .notifications-wrapper {
    .notification-action-button {
      background: $blue !important;
      font-weight: 400 !important;
      border-radius: 4px !important;
      margin-top: 8px !important;
      padding: 4px 16px !important;
      line-height: 1;
      width: auto;
    }
    .notification {
      border-radius: $border-radius !important;
      background-color: $gray-light !important;
      box-shadow: none !important;
      border-top: none !important;
      height: auto !important;
    }
    .notification-dismiss {
      background-color: $gray !important;
      border-radius: 4px !important;
      width: 16px !important;
      height: 16px !important;
      color: $gray-light !important;
      font-size: 16px !important;
      top: 8px !important;
      right: 8px !important;
    }
    .notification-title {
      padding-left: 24px !important;
      background-repeat: no-repeat;
      background-position: 0 0;
      font-size: 14px !important;
      color: $black !important;
      letter-spacing: 0 !important;
      line-height: 18px !important;
      margin-bottom: 1px !important;
      font-weight: 400 !important;
      width: 160px;
      margin-bottom: 8px !important;
    }
    .notification-message {
      font-size: 14px !important;
      color: $black !important;
      letter-spacing: 0 !important;
      line-height: 18px !important;
      font-weight: 400 !important;
    }
    .notification-info {
      .notification-title {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1JbmZvLS1XaGl0ZSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNOC4wMDAzMzg2MiwwIEMzLjU4MTk2ODI1LDAgMCwzLjU4MTI5MTAxIDAsNy45OTk2NjEzOCBDMCwxMi40MTgwMzE3IDMuNTgxOTY4MjUsMTYgOC4wMDAzMzg2MiwxNiBDMTIuNDE4MDMxNywxNiAxNiwxMi40MTgwMzE3IDE2LDcuOTk5NjYxMzggQzE2LDMuNTgxMjkxMDEgMTIuNDE4MDMxNywwIDguMDAwMzM4NjIsMCBMOC4wMDAzMzg2MiwwIFoiIGlkPSJGaWxsLTEtQ29weSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTkuNTc0OTQxOCw1LjAzMTI4MDQyIEM5LjMzNjU1MDI2LDUuMjU0MDk1MjQgOS4wNDgwNDIzMyw1LjM2NDQ4Njc3IDguNzExNDQ5NzQsNS4zNjQ0ODY3NyBDOC4zNzU1MzQzOSw1LjM2NDQ4Njc3IDguMDg1NjcxOTYsNS4yNTQwOTUyNCA3Ljg0Mzg5NDE4LDUuMDMxMjgwNDIgQzcuNjA0ODI1NCw0LjgwOTE0Mjg2IDcuNDgyOTIwNjMsNC41Mzk1OTc4OCA3LjQ4MjkyMDYzLDQuMjI0IEM3LjQ4MjkyMDYzLDMuOTA4NDAyMTIgNy42MDQ4MjU0LDMuNjM2ODI1NCA3Ljg0Mzg5NDE4LDMuNDEzMzMzMzMgQzguMDg1NjcxOTYsMy4xODg0ODY3NyA4LjM3NTUzNDM5LDMuMDc2NzQwNzQgOC43MTE0NDk3NCwzLjA3Njc0MDc0IEM5LjA0ODA0MjMzLDMuMDc2NzQwNzQgOS4zMzY1NTAyNiwzLjE4ODQ4Njc3IDkuNTc0OTQxOCwzLjQxMzMzMzMzIEM5LjgxNDAxMDU4LDMuNjM2ODI1NCA5LjkzMzg4MzYsMy45MDg0MDIxMiA5LjkzMzg4MzYsNC4yMjQgQzkuOTMzODgzNiw0LjUzOTU5Nzg4IDkuODE0MDEwNTgsNC44MDkxNDI4NiA5LjU3NDk0MTgsNS4wMzEyODA0MiBMOS41NzQ5NDE4LDUuMDMxMjgwNDIgWiIgaWQ9IlBhdGgiIGZpbGw9IiMwMDQ0Q0EiPjwvcGF0aD4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjY2NTY5MzEyLDEyLjM5ODM5MTUgQzkuMjUzMjQ4NjgsMTIuNTYxNjA4NSA4LjkyNjEzNzU3LDEyLjY4NDE5MDUgOC42ODAyOTYzLDEyLjc2OTUyMzggQzguNDM0NDU1MDMsMTIuODU0ODU3MSA4LjE1MDAxMDU4LDEyLjg5ODIwMTEgNy44MjU2MDg0NywxMi44OTgyMDExIEM3LjMyNzE1MzQ0LDEyLjg5ODIwMTEgNi45MzkwODk5NSwxMi43NzYyOTYzIDYuNjYyNzcyNDksMTIuNTMyNDg2OCBDNi4zODY0NTUwMywxMi4yODkzNTQ1IDYuMjQ4OTczNTQsMTEuOTgxMjA2MyA2LjI0ODk3MzU0LDExLjYwNjY4NzggQzYuMjQ4OTczNTQsMTEuNDYxNzU2NiA2LjI1OTEzMjI4LDExLjMxMjc2MTkgNi4yNzk0NDk3NCwxMS4xNjAzODEgQzYuMzAwNDQ0NDQsMTEuMDA5MzU0NSA2LjMzMzYyOTYzLDEwLjgzODAxMDYgNi4zNzkwMDUyOSwxMC42NDcwMjY1IEw2Ljg5NDM5MTUzLDguODI1OTA0NzYgQzYuOTM5NzY3Miw4LjY1MTE3NDYgNi45NzkwNDc2Miw4LjQ4NTkyNTkzIDcuMDEwMjAxMDYsOC4zMzA4MzU5OCBDNy4wNDEzNTQ1LDguMTc0MzkxNTMgNy4wNTYyNTM5Nyw4LjAzMTQ5MjA2IDcuMDU2MjUzOTcsNy45MDIxMzc1NyBDNy4wNTYyNTM5Nyw3LjY3MDUxODUyIDcuMDA4MTY5MzEsNy41MDc5Nzg4NCA2LjkxMjY3NzI1LDcuNDE3MjI3NTEgQzYuODE2NTA3OTQsNy4zMjUxMjE2OSA2LjYzMzY1MDc5LDcuMjc5NzQ2MDMgNi4zNjI3NTEzMiw3LjI3OTc0NjAzIEM2LjIzMDAxMDU4LDcuMjc5NzQ2MDMgNi4wOTI1MjkxLDcuMzAwMDYzNDkgNS45NTIzMzg2Miw3LjM0MTM3NTY2IEM1LjgxMzUwMjY1LDcuMzgzMzY1MDggNS42OTM2Mjk2Myw3LjQyMjY0NTUgNS41OTQwNzQwNyw3LjQ2MDU3MTQzIEw1LjczMDIwMTA2LDYuODk5MTMyMjggQzYuMDY3NDcwOSw2Ljc2MTY1MDc5IDYuMzkwNTE4NTIsNi42NDQ0ODY3NyA2LjY5ODY2NjY3LDYuNTQ2OTYyOTYgQzcuMDA2ODE0ODEsNi40NDg3NjE5IDcuMjk4MDMxNzUsNi40IDcuNTcyMzE3NDYsNi40IEM4LjA2NzM4NjI0LDYuNCA4LjQ0OTM1NDUsNi41MTkxOTU3NyA4LjcxODIyMjIyLDYuNzU4MjY0NTUgQzguOTg1NzM1NDUsNi45OTczMzMzMyA5LjEyMDUwNzk0LDcuMzA4MTkwNDggOS4xMjA1MDc5NCw3LjY5MDgzNTk4IEM5LjEyMDUwNzk0LDcuNzcwMDc0MDcgOS4xMTEwMjY0Niw3LjkwODkxMDA1IDkuMDkyNzQwNzQsOC4xMDg2OTg0MSBDOS4wNzQ0NTUwMyw4LjMwODQ4Njc3IDkuMDM5OTE1MzQsOC40OTA2NjY2NyA4Ljk4OTc5ODk0LDguNjU3MjY5ODQgTDguNDc3MTIxNjksMTAuNDcyMjk2MyBDOC40MzUxMzIyOCwxMC42MTcyMjc1IDguMzk3ODgzNiwxMC43ODQ1MDc5IDguMzY0MDIxMTYsMTAuOTcxNDI4NiBDOC4zMzA4MzU5OCwxMS4xNTY5OTQ3IDguMzE0NTgyMDEsMTEuMjk5MjE2OSA4LjMxNDU4MjAxLDExLjM5NDcwOSBDOC4zMTQ1ODIwMSwxMS42MzY0ODY4IDguMzY4MDg0NjYsMTEuODAwMzgxIDguNDc2NDQ0NDQsMTEuODg3NzQ2IEM4LjU4MzQ0OTc0LDExLjk3NTExMTEgOC43NzEwNDc2MiwxMi4wMTkxMzIzIDkuMDM2NTI5MSwxMi4wMTkxMzIzIEM5LjE2MTgyMDExLDEyLjAxOTEzMjMgOS4zMDIwMTA1OCwxMS45OTY3ODMxIDkuNDYwNDg2NzcsMTEuOTUzNDM5MiBDOS42MTgyODU3MSwxMS45MDk0MTggOS43MzEzODYyNCwxMS44NzE0OTIxIDkuODAzMTc0NiwxMS44MzgzMDY5IEw5LjY2NTY5MzEyLDEyLjM5ODM5MTUgWiIgaWQ9IlBhdGgiIGZpbGw9IiMwMDQ0Q0EiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==");

      }
    }
    .notification-success {
      .notification-title {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1PayI+DQogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTIiIGZpbGw9IiM0Q0Q5NjQiIGN4PSI4IiBjeT0iOCIgcj0iOCI+PC9jaXJjbGU+DQogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlN0cm9rZS0zIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSIxMiA2IDcuMDgzMDc0MTkgMTEgNCA4LjAwMzk3NTQyIj48L3BvbHlsaW5lPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
      }
    }
    .notification-error {
      .notification-title {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1FcnJvci1XaGl0ZSI+DQogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTIiIGZpbGw9IiNGRkZGRkYiIGN4PSI4IiBjeT0iOCIgcj0iOCI+PC9jaXJjbGU+DQogICAgICAgICAgICA8cGF0aCBkPSJNMTEuNDI4NTcxNCw0LjU3MTQyODU3IEw0LjU3MTQyODU3LDExLjQyODU3MTQiIGlkPSJMaW5lIiBzdHJva2U9IiNGQTE2NjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTExLjQyODU3MTQsMTEuNDI4NTcxNCBMNC41NzE0Mjg1Nyw0LjU3MTQyODU3IiBpZD0iTGluZS1Db3B5IiBzdHJva2U9IiNGQTE2NjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
      }
    }
  }
}


@keyframes bgMotion {
  0% {
    background-position: -12px 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes :global(rotate) {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
