kahuna/public/stylesheets/main.css

/* ==========================================================================
   Notes
   ==========================================================================

z-index
=======
1  = everything
10 = things to be just above everything
20 = user controls i.e. panels
30 = the top layer i.e. top-bar.
40 = overlay layer i.e. modals, dnd overlay.

========================================================================== */

/* ==========================================================================
   Common
   ========================================================================== */

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-cyrillic-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtE6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-cyrillic_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWvU6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-greek-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtU6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-greek_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWuk6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-hebrew_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWu06FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-vietnamese_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtk6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-latin-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWt06FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-latin_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWuU6FxZCJgg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-cyrillic-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtE6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-cyrillic_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWvU6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-greek-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtU6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-greek_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWuk6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-hebrew_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWu06FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-vietnamese_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWtk6FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-latin-ext_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWt06FxZCJgvAQ.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-italic-latin_memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvX8mqWuU6FxZCJgg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-cyrillic-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSKmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-cyrillic_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSumu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-greek-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSOmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-greek_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSymu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-hebrew_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTS2mu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-vietnamese_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSCmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-latin-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSGmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-latin_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTS-mu0SC55I.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-cyrillic-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSKmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-cyrillic_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSumu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-greek-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSOmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-greek_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSymu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-hebrew_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTS2mu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-vietnamese_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSCmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-latin-ext_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTSGmu0SC55K5gw.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 87.5%;
  src: url("fonts/open-sans-v34-regular-latin_memvYaGs126MiZpBA-UvWbX2vVnXBbObjwSVTS-mu0SC55I.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin - medium */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 87.5%;
  src: url("fonts/opensans-semibold-webfont.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin - italic - medium */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  font-stretch: 87.5%;
  src: url("fonts/opensans-semibolditalic-webfont.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* see http://google.github.io/material-design-icons/#icon-font-for-the-web */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/MaterialIcons-Regular.woff2") format('woff2'),
         url("fonts/MaterialIcons-Regular.woff") format('woff');
}

@keyframes spin {
    from   { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from   { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

html {
    overflow-x: hidden;
    font: 62.5%/1.5 "Open Sans", sans-serif;
}

body {
    background-color: #333;
    color: #ccc;
    font-size: 1.6rem;
    margin: 0;
    padding: 0 0 0 0;
    font-synthesis: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-family: inherit;
    font-weight: normal;
    margin: 0;
}

figure, ul, li, dl, dd {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

a {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: white;
}

.coloured-link {
    color: #00adee;
}

input,
option,
select,
textarea,
button {
    font-family: "Open Sans", sans-serif;
    font-size: 1.4rem;
}

.text-input {
    background-color: #444;
    color: #ccc;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
}

.text-input::placeholder {
    color: #888;
}

textarea {
    resize: vertical;
}

/* annoyingly we have to have these seperate as the moz-placeholder breaks the
Chrome selector */
input[disabled],
textarea[disabled],
.disabled {
    color: #666;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #666;
}
input::-moz-placeholder,
textarea:disabled::-moz-placeholder {
    color: #666;
}

button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
}

.button {
    border: 0;
    background: #00adee;
    border-radius: 2px;
    box-shadow: 0 2px #00729c;
    box-sizing: border-box;
    color: white;
    display: block;
    padding: 5px 10px;
    font-size: 1.4rem;
    position: relative;
}
.button:hover {
    background: #008fc5;
}
.button:active {
    box-shadow: none;
    top: 2px;
}
.button:focus,
a:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -3px;
}

button[disabled],
.button[disabled] {
    background-color: #999;
    box-shadow: 0 2px #666;
    color: #ccc;
}
.button--green {
    background: forestgreen;
    box-shadow: 0 2px darkgreen;
}

.button-shy {
    padding: 2px 5px;
    color: #ccc;
    background: transparent;
    box-shadow: 0 2px #888;
    border: 1px solid #888;
    font-size: inherit;
}
.button-shy:not([disabled]):hover {
    background: #888;
}
.button-ico {
    padding: 4px;
}
.button-ico-square {
    height: 36px;
}

.button-save {
    background: #00adee;
    color: white;
    /* above the edit button of a field below */
    z-index: 10;
}
.button-save[disabled] {
    background: #888;
    cursor: auto;
}

.button-save:hover {
    background-color: #008fc5;
}

.button-cancel,
.button-edit {
    background-color: #898989;
}

.button-cancel:hover,
.button-edit:hover {
    background-color: #666666;
}

.button-save,
.button-cancel,
.button-edit {
    padding: 0 5px;
    height: 24px;
    color: white;
}

.button-save,
.button-cancel {
    margin-left: 5px;
}

.button--confirm-delete {
    background: red;
}

.button--confirm-delete gr-icon {
    padding-right: 5px;
}

.button--confirm-delete:hover {
    background: #960000;
}

.loader {
    text-align: center;
}
.loader:after {
    border: 12px solid white;
    border-bottom-width: 35px;
    content: "g";
    height: 90px;
    width: 80px;
    display:  block;
    box-sizing:  border-box;
    background:  #ddd;
    margin: auto;
    color:  #005689;
    font-size: 2.6rem;
    margin-top: 10px;

    animation-duration: 1500ms;
    animation-name: flipper;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-name: flipper;
    -webkit-animation-iteration-count: infinite;
}
@keyframes flipper {
    0% {}
    95% {}
    100% { transform: rotateY(360deg); }
}
@-webkit-keyframes flipper {
    0% {}
    95% {}
    100% { transform: rotateY(360deg); }
}

.saving {
    display: inline;
    width: 15px;
    line-height: 15px;
    text-align: center;
    padding: 0 2px;
    color: #00adee;

    animation-name: spin;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-timing-function: linear;
}

.spin {
    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;

    -webkit-animation-name: spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 500ms;
    -webkit-animation-timing-function: ease-out;
}

.full-width {
    width: 100%;
}

.flex-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flex-container {
    display: flex;
}
.flex-container--rtl {
    flex-direction: row-reverse;
}

.flex-spacer {
    flex-grow: 1;
}

.flex-no-shrink {
    flex-shrink: 0;
}

.inline-block {
    display: inline-block;
}

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

.side-padded {
    padding: 0 10px;
}

.clickable:hover {
    background-color: #666666;
    color: white;
    cursor: pointer;
}

.inner-clickable {
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.inner-clickable--disabled {
  opacity: 0.7;
}

.button-right-side {
    padding-left: 5px;
    margin-left: -4px
}

.section {
    margin-bottom: 25px;
}

.section-heading {
    font-size: 1.8rem;
    margin: 10px 0;
    border-bottom: 1px solid #999;
}

.text-small {
    font-size: 13px;
}

.separator-left {
    border-left: 1px solid #565656;
}

.separator-right {
    border-right: 1px solid #565656;
}

.fill-height {
    height: 100%;
}

.bg-light {
    background-color: #444;
    color: white;
}

.hover-parent .hover-child {
    display: none;
}
.hover-parent:hover .hover-child {
    display: initial;
}

.visibly-hidden {
    position: absolute;
    left: -9999px;
    font-size: 0;
}

/* ==========================================================================
   Angular
   ========================================================================== */

/* FIXME: we use the element to be more specific, which is baloney */
input.ng-invalid,
textarea.ng-invalid {
    border-color: #ed5935;
}


/* ==========================================================================
   Top bar
   ========================================================================== */

#share-with-url {
    display: flex;
}
.top-bar-item__label {
    padding-left: 5px;
}

.top-bar-item {
    margin-left: -4px;
    vertical-align: middle;
    line-height: 50px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-left: 2px solid #565656;
    height: 50px;
}

.top-bar-item:first-child {
    margin-left: 0;
}

.top-bar-item:last-child {
    border-right: 2px solid #565656;
}

.top-bar-item__form {
    display: inline-flex;
}

.top-bar-item__form__input {
    background-color: #444;
    color: #ccc;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    max-width: 65px; /*width of four digits for pixel width and height */
}

.user-actions {
    margin-right: -10px;
    padding: 0 5px;
    margin-top: 12px;
}

.home-link {
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    background: url(/assets/images/grid-logo.svg) no-repeat center;
    margin-right: 0;
    vertical-align: top;
    float: left;
}

.home-link:hover {
    background-color: #666666;
}

.logout {
    color: inherit;
    font-size: 1.3rem;
    position: fixed;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    padding: 10px;
}

@media screen and (max-width: 950px) {
    .top-bar-item .gr-confirm-delete {
        min-width: inherit;
    }

    gr-top-bar-actions {
      min-width: 128px;
    }

    .results-toolbar-item .gr-confirm-delete gr-icon-label {
        padding: 0
    }

    .top-bar-item button gr-icon {
        margin-right: 0;
    }

    /* only use this class if you want it to hide */
    .icon-label {
        display: none;
    }
}

/* ==========================================================================
   Page
   ========================================================================== */
.page-wrapper {
    margin: 0 auto;
    max-width: 900px;
    padding-top: 10px;
}

/* ================================
   Notifications
   ================================ */
.global-notifications {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 87px;
  z-index: 39;
  text-align: left;
  max-width: 100%;
}

/* ==========================================================================
   Errors / status
   ========================================================================== */
.global-errors {
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 5px;
    z-index: 40;
    text-align: center;
    max-width: fit-content;
}

.global-error {
    display: inline-block;
    border-radius: 5px;
}

.global-error__close {
    padding-left: 10px;
    cursor: pointer;
}

.global-error__close:hover {
    color: white;
}

.error {
    background: darkred;
    color: white;
    padding: 20px 40px;
}
.error--small {
    padding: 5px 10px;
    font-size: 13px;
}

.warning {
    background: #ffbc01;
    color: black;
    padding: 20px 40px;
    text-align: center;
}
.warning--small {
  padding: 5px 10px;
}

.full-error {
    margin-top: 3rem;
    text-align: center;
    font-size: 3rem;
}

.success {
    background: #D5E5CF;
    color: black;
    padding: 20px 40px;
    text-align: center;
}
.status {
    color: white;
    background-color: orange;
}

.status--info {
  background-color: #5E9ED6;
}

.status--info a {
  color: #0e1831;
}

.status--info a:hover {
  color: #1B2E5F;
}

.status--valid {
    background-color: green;
}

.status--invalid {
    background-color: red;
}

#clipboard a {
    position: relative;
    top: 2px;
    right: 1px;
    color: black;
}

#clipboard span {
    position: relative;
    display: inherit;
    bottom: 2px;
    border-bottom-color: black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    width: 28px;
}
/* ==========================================================================
   Search
   ========================================================================== */

.search-query {
    display: flex;
    /* Fill the container for larger clickable area */
    align-items: stretch;

    background-color: #444;
    color: #ccc;
    border: 1px solid #999;
    box-sizing: border-box;

    min-width: 300px;
    flex-grow: 1;
}

.search {
    margin-top: 10px;
    display: flex;
    height: 30px;
    line-height: 12px;
}

.search-query__magnifier {
    /* Better vertical centering */
    align-self: center;
}

.search-query__query {
    flex: 1;
    /* Better vertical centering */
    align-self: center;
    overflow: hidden;
}

.search__modifier {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 25px;
  align-items: center; /* vertical align all filters */
}

.search__modifier-sort {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; /* vertical align all filters */
  margin-left: 0px;
  margin-right: 8px;
}

.search__modifier-item {
    padding: 1px;
    margin-right: 5px;
}

.search__modifier-container {
    position: relative;
    display: flex;
}

.search__modifier-toggle {
    display: none;
}
.search__modifier-toggle__icon {
    display: none;
}

.search__modifier-checkbox label {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.search__modifier-checkbox label:hover {
    cursor: pointer;
}

.search__modifier-checkbox label input[type="checkbox"] {
    margin-right: 6px;
}

.search__modifier-checkbox label input[type="checkbox"]:hover {
    cursor: pointer;
}

.search__advanced-toggle-lbl {
  margin-right: 6px;
}

@media screen and (max-width: 850px) {
    .search__advanced-toggle {
        display: none;
    }
}

/* Note: order matters for cascade ;_; */
@media screen and (max-width: 750px) {
    .search__modifier-toggle__text {
        display: none;
    }
}

@media screen and (max-width: 1380px) {
    .search__modifier-toggle {
        display: flex;
        flex-direction: row;
        align-items:center;
        margin-left: 15px;
    }
    .search__modifier-toggle:hover {
        filter: brightness(200%);
    }
    .search__modifier-container:last-of-type .search__modifier-toggle {
        margin-right: 15px;
    }
    .search__modifier-toggle__icon {
        display: inline;
    }
    .search__modifier {
        display: inherit;
        position: absolute;
        top: 25px;
        left: 0;
        width: 150px;
        background-color: #333;
        position: absolute;
        padding: 10px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    }
    .order__option--hide,
    .search__filter--hide {
        display: none;
    }
    .order__option--show,
    .search__filter--show {
        display: block;
        margin-left: 0px;
    }
    .search__filter-item {
        display: list-item;
    }

    .search .search__filter {
        margin-left: 0;
    }
}

.search-query__icon {
    padding: 0 5px;
}

.search-query__clear {
    outline: none;
}

/* fade in/out */
.search-query__clear.ng-hide-add,
.search-query__clear.ng-hide-remove {
    -webkit-transition: 0.2s ease-out all;
    transition: 0.2s ease-out all;
}
.search-query__clear.ng-hide {
    opacity: 0;
}
.search-query__clear.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}


.clear-button {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.clear-button:hover {
    color: white;
}

.advanced-search-help {
    top: 49px;
    max-height: 95vh;
    overflow: auto;
    background-color: #444444;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    max-width: 680px /*width of input box and advance button in topbar*/
}

.advanced-search-help__cancel {
    float: right;
    padding: 10px;
}

.advanced-search-help__cancel:hover {
    color: white;
}

.advanced-search-help__section {
    margin-bottom: 10px;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
}

.advanced-search-help__section__title {
    font-weight: bold;
    font-size: 16px;
}

.advanced-search-help__section__sub-heading {
    font-size: 16px;
    margin-bottom: 5px;
}

.advanced-search-help__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 13px 5px;
}

.advanced-search-example {
    display: flex;
}

.advanced-search-example__field {
    margin-bottom: 5px;
    display: inline-flex;
    flex-basis: 50%;
}

.advanced-search-example__explanation {
    margin-bottom: 5px;
    flex-basis: 50%;
}

.advanced-search-example__input {
    background-color: #444;
    color: #ccc;
    border: 1px solid #999;
    padding: 2px 4px;
    box-sizing: border-box;
}

.search__advanced-toggle {
    margin-left: 10px;
}

.search__advanced-toggle:hover {
    color: white;
}

.search__advanced-toggle:focus {
    outline: none; /*stops blue box appearing around tooltip*/
}

.search__date {
    display: inline-block;
}

.search__overlay {
    background-color: #333;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    padding: 10px;
    position: absolute;
    right: 0px;
    min-width: 520px;
}

.search__overlay__title {
    font-weight: bold;
}

/* ==========================================================================
   File uploader
   ========================================================================== */

.file-uploader__file {
    display: none;
}

.file-uploader__select-files {
    padding: 5px 10px;
}

/* ==========================================================================
   Results
   ========================================================================== */

.results {
    display: flex;
    flex-wrap: wrap;
    top: 35px;
    position: relative;
}

.results-controls {
    background: white;
    padding: 10px;
    box-shadow: 0 1px 5px #999;
}

.results__control {
    display: inline;
    margin-right: 5px;
}

.result {
    position: relative;
    border: 5px solid transparent;
    box-sizing: border-box;
    margin: 5px;
    background-color: #393939;
}

.result--seen {
    opacity: .5;
}

.result-placeholder {
    position: relative;
    border: solid 5px #333;
    box-sizing: border-box;
    background: #393939;
}

.result__select input[type=checkbox] {
    visibility: hidden;
}

.result__select {
    position: absolute;
    display: none;

    /* above thumbnail and overlay */
    z-index: 2;
}

.result__select--no-pointer-events {
    pointer-events: none;
}

.result__select__checkbox__label {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.result__select .result__select__checkbox__label gr-icon {
    font-size: 25px;
    color: white;
}

.result__select--selected .result__select__checkbox__label gr-icon {
    color: #00adee;
}

/* Hacky: Hide gr-archiver-status "Add to Library" (unarchived state) unless hovering */
.result .gr-archiver-status--unarchived {
    display: none;
}

.result:hover .result__select,
.result:hover .preview__fade,
.result:hover .image-actions,
.result:hover .gr-archiver-status--unarchived {
    display: block;
}

.result:hover .gr-add-label--inactive {
    display: inline-block;
}

.result:hover {
    background-color: #404040;
}

.result--selected:hover .preview__fade {
    display: none;
}

.result__select--selected {
    display: initial;
}

.validity,
.cost {
    color: white;
    font-size: 1.4rem;
    padding: 0 10px 0;
    text-align: center;
    vertical-align: middle;
}
.validity--invalid,
.cost--pay,
.cost--no_rights,
.cost--overquota {
    background-color: red;
}
.validity--warning,
.cost--conditional {
    background-color: orange;
}
.validity--leased,
.cost--leased {
  background-color: teal;
}
.cost--free {
    background-color: green;
}

.costs li {
    display: inline-block;
}

.costs .image-notice {
    padding: 6px 12px;
    margin: 0 3px 3px 0;
}

/* Hacky pointer to some element above */
.validity--point-up {
    position: relative;
}
.validity--point-up::before {
    content: "";
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    position: absolute;
    top: -9px;
    right: 30px;
    z-index: 200;
    border-bottom-width: 10px;
    border-bottom-style: solid;
}
.validity--invalid::before {
    border-bottom-color: red;
}
.validity--warning::before {
    border-bottom-color: orange;
}
.validity--leased::before {
  border-bottom-color: teal;
}

/* ==========================================================================
   Results bar
   ========================================================================== */

.results-toolbar {
    font-size: 1.4rem;
    margin: 0 0 0;
    height: 35px;
    display: flex;
    background-color: #333;
    width: 100%;
    border-bottom: 1px solid #565656;
    position: fixed;
    z-index: 20;
    left: 0;
}

.results-toolbar__right {
    margin-left: auto;
}

.results-toolbar__right gr-downloader gr-icon-label, .results-toolbar__right gr-delete-image gr-icon-label {
  padding: 0px;
}

.results-toolbar-item {
    vertical-align: middle;
    border-width: 0 1px;
    border-color: #565656;
    border-style: solid;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

.results-toolbar-item:hover {
    background-color: #666666;
}

.results-toolbar-item--static,
.results-toolbar-item gr-icon-label {
    padding: 0 10px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.results-toolbar-item--inline {
  display: flex;
  align-items: center;
  padding-left: 3.5px;
}

.results-toolbar-item--left {
    border-left: 0;
}

.results-toolbar-item--right {
    border-right: 0;
}

.results-toolbar-item--disabled {
    color: #666;
}

.results-toolbar-item--no-hover:hover {
    background: #333;
}

.results-toolbar-item--active {
    background-color: #444;
}

.results-toolbar-item--disabled:hover {
    color: #666;
    background-color: transparent;
}

/* --static is for top bar items that perform no action, only display information */
.results-toolbar-item--static:hover {
    background-color: transparent;
}

.results-toolbar-item__clear-selection {
    width: 105px;
}

.results-toolbar-item__sort-direction {
    padding: 0px;
}

.results-toolbar-item__progress {
    /* updated in JS to show progress */
    background: linear-gradient(90deg, #00adee 0%, transparent 0%);
    color: white;
}

.results-toolbar-item .inner-clickable {
  display: inline-flex;
}

.image-results-count__new {
    font-family: inherit;
    background-color: #00adee;
    color: white;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 2px;
    margin-left: 5px;
}

.image-results-count__org-owned {
    font-family: inherit;
    background-color: #005689;
    color: white;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 2px;
    margin-left: 5px;
}

.image-results-count {
    border-left: 0;
    line-height: 35px;
}

.image-results-count,
.sort-direction {
    display: inline-block;
}


.image-results-more {
    margin: 40px 0;
    text-align: center;
}
.image-results-more__heading {
    font-size: 36px;
}
.image-results-more__instructions {
    font-size: 20px;
}

.image-loading-results,
.image-no-results {
    font-size: 3rem;
    text-align: center;
    margin-top: 4rem;
}

.image-loading-results {
    color: #999;
}


/* ==========================================================================
   Preview
   ========================================================================== */
.preview {
    position: relative;
}

.preview__link,
.preview__no-link {
    display: block;
    height: 190px;
}

.preview__link--large, .preview__no-link--large {
    height: auto;
    max-height: calc(100vh - 190px);
    max-width: 100%;
}

.preview__image {
    display: block;
    max-width: 100%;
    max-height: 98%;
    margin: 0 auto;
    pointer-events: none;
}

.is-potentially-graphic > img {
  filter: blur(15px);
  transition: filter 0.6s;
}
.is-potentially-graphic::after {
  content: "POTENTIALLY GRAPHIC IMAGE \A (hover to reveal)";
  white-space: pre;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  transition: opacity 0.6s;
}
.is-potentially-graphic:hover > img {
  filter: none;
}
.is-potentially-graphic:hover::after {
  opacity: 0;
}

.graphic-image-blur-explainer__background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 10vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.graphic-image-blur-explainer__spotlight {
  z-index: 101;
  position: relative;
  outline: white solid 1px;
  outline-offset: 3px;
  border-radius: 3px;
}
.graphic-image-blur-explainer__tooltip {
  z-index: 101;
  position: absolute;
  width: 410px;
  top: -4px;
  left: -430px;
  background: white;
  color: black;
  padding: 5px;
  border-radius: 3px;
  word-break: normal;
  white-space: normal;
}
.graphic-image-blur-explainer__tooltip a {
  color: black;
  text-decoration: underline;
}
.graphic-image-blur-explainer__tooltip a:focus {
  outline: #00adee solid 2px;
  outline-offset: 3px;
}

.preview__image.preview__image--staff {
    border: 10px solid #005689;
    box-sizing: border-box;
}

.preview__info {
    font-size: 1.3rem;
    padding-left: 10px;
    margin: 5px 0px 0px 0px;
}
.preview__bottom-icons {
    font-size: 1.3rem;
    padding-left: 7px;
    margin: 5px 0;
    display: inline;
}
.preview__bottom-icons-align-right {
    float: right;
}

.preview__info--large {
    font-size: 1.4rem;
    max-width: 800px;
    margin: 0 auto;
}

.preview__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.preview__description--gallery {
    white-space: normal;
}

/*
FIXME: this is a little targeted
FIXME: what to do with touch devices
*/

.preview__labeller {
    /*25px - auto height of div on hover, stops shifting when off hover */
    height: 25px;
    white-space: nowrap;
    overflow: hidden;
}

.preview .gr-add-label--inactive {
    display: none;
}

.preview__upload-time {
    font-size: 1.2rem;
    color: #999;
}

.preview__has-crops {
    cursor: help;
}

.preview__collections {
    margin-right: 2px;
    height: 25px;
    display: block;
    white-space: nowrap;
}

.preview__collections__collection {
    /*important to overwrite tooltips styling*/
    display: inline-flex !important;
    margin: 0 5px 5px 0;
}

.preview__collections__collection__value,
.preview__collections__collection__remove {
    color: #fff;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 2px;
    /*this will be overwritten if the collection has a background-colour*/
    background-color: #555;
}

.preview__collections__collection__remove {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.preview__collections__collection__value:hover,
.preview__collections__collection__remove:hover {
    /*need important to overwrite the inline style*/
    background-color: #fff !important;
    color: black;
}

.preview__collections__collection__apply-all {
    margin-left: 10px;
    line-height: 20px;
    font-size: 1.6rem;
}

.preview__cost {
    margin-left: 5px;
}

.preview__bottom-bar {
    font-size: 1.4rem;
    margin-top: 0px;
}

.preview__bottom-bar--large {
    font-size: 1.6rem;
    max-width: 800px;
    margin: 0 auto 40px;
}

.preview__quick-select {
    cursor: pointer;
}

.preview__select {
  cursor: default;
}

.preview__fade {
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    height: 35px;
    position: absolute;
    top: 0;
    display: none;
}

.bottom-bar {
    display: flex;
}
.bottom-bar__meta {
    flex: 1;
    padding-left: 10px;
}
.bottom-bar__meta .preview__upload-time {
    margin-right: 5px;
}
.bottom-bar__meta-item {
    font-size: 1.2rem;
}
.bottom-bar__meta-item gr-icon{
    color: #999;
    position: relative;
    top: -3px;
}
.bottom-bar__action {
    display: inline-block;
}

.bottom-bar__action--cost {
    width: 20px;
}
/*
.bottom-bar__action .allow {
    background-color: green;
}
.bottom-bar__action .deny {
    background-color: red;
}
*/
.bottom-bar__action--lease {
    text-align: center;
}
.bottom-bar__action--lease .access {
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 2px;
}

/* ==========================================================================
   Image actions
   ========================================================================== */
.image-actions-container .image-actions {
    display: none;
}

.image-actions {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .75);
    display: none;
    text-align: center;
    font-size: 1.2rem;
    /* above preview__fade */
    z-index: 1;
}

.image-action {
    line-height: 24px;
    width: 24px;
    color: #999;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, .3);
}
.image-action--first {
    border-top: 0;
}

.image-action:hover {
    color: white;
}


/* ==========================================================================
   Results editor
   ========================================================================== */

.result-editor {
    display: flex;
}

.result-editor__result {
    flex-shrink: 0;
    position: relative;
    width: 256px;
}

.result-editor__save-status-container {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.4rem;
}

.result-editor__save-status {
    background: rgba(0, 0, 0, .75);
    color: #00adee;
    padding: 2px 5px;
    display: inline-block;
}

.result-editor__save-status--error {
    background: red;
    color: white;
}

.result-editor__img,
.result-editor__img-link {
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.result-editor__editor {
    flex-grow: 1;
    margin-left: 10px;
}

.result-editor__info {
    display: flex;
}

.result-editor__info-item {
    flex: 1;
    margin-left: 1px;
    font-size: 1.4rem;
}

.results-editor__top-heading {
  margin-bottom: 15px;
}

.results-editor__heading {
  margin-bottom: 15px;
  margin-top: 15px;
}

.result-editor__info-item--png-warning {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(256, 0, 0, .7);
    text-align: center;
}

.result-editor__info-item--first {
    margin-left: 0;
}

.result-editor__status {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 2px 5px;
}

.result-editor__archiver {
    background: #444;
    padding: 0 5px;
}

.result-editor__field-container {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}

.result-editor__field-container__labels,
.result-editor__field-container__collections {
    display: flex;
    font-size: 1.4rem;
}

.result-editor__field-container__labels--hidden {
    display: inline;
}

.result-editor__field-container__add-button {
    font-size: 1.3rem;
    padding-bottom: 5px;
}

.result-editor__field-container__add-button:hover {
    color: white;
}

.result-editor__field-label {
    width: 130px;
    line-height: 24px;
}

.result-editor__field-value {
    font-size: 1.4rem;
    line-height: 24px;
}


.result-editor__usage-rights-container {
    flex-grow: 1;
}

.result-editor__usage-rights-container .image-info__edit {
    position: relative;
    margin-left: 10px;
}

.result-editor__field-container.image-info__wrap:hover .image-info__edit {
    display: inline-block;
}

.result-editor__usage-rights .ure {
    padding: 10px;
    background: #444;
    font-size: 1.4rem;
}

/* ==========================================================================
   Full Image / crop
   ========================================================================== */

.easel {
    display: block;
    text-align: center;
}

.easel__canvas {
    height: calc(100vh - 50px); /* viewport - top-bar */
    vertical-align: middle;
    overflow: hidden;
}

.easel__image-container {
    /*style rules also affect the cropper preview*/
    display: inline-block;
    height: calc(100% - 60px);
    width: calc(100% - 60px);
    margin-top: 30px;
}

.easel__image--checkered__background {
     background-color: #bdbdbd;
     background-image:
         linear-gradient(45deg, white 25%, transparent 25%),
         linear-gradient(135deg, white 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, white 75%),
         linear-gradient(135deg, transparent 75%, white 75%);

    background-size: 20px 20px;

    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;

}

.easel__image {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 20px); /* 20px here for padding */
  max-height: calc(100vh - 68px);
  pointer-events: none;
  image-orientation: none;
}

.easel__image:fullscreen,
.easel__image--checkered__background:fullscreen,
.easel__image::backdrop,
.easel__image--checkered__background::backdrop {
    background-color: #333;
    background-image: none;
}

.easel__image--cropper {
    visibility: hidden;
}

.circular-mask-toggle-container {
  position: absolute;
  right: 0;
  padding: 10px;
  user-select: none;
}


.image-details {
    box-sizing: border-box;
    font-size: 1.3rem;
}
/* HACK: This is here until we start using the panelled-content here */
.image-details--full-image {
    float: right;
    height: calc(100vh - 50px); /* viewport - top-bar */
    width: 300px;
    border-left: 1px solid #565656;
    display: flex;
    flex-direction: column;
}

.image-details--scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.image-details--crop {
    float: left;
    width: 130px;
    border-right: 1px solid #565656;
    border-left: none;
    position: relative;
    height: calc(100vh - 50px); /* viewport - top-bar */
    display: flex;
    flex-direction: column;
}

.image-details__delete-crops {
    width: 100%;
}

.image-details:after {
    clear: both;
    content:  " ";
    display:  table;
}

/*to clear the set widths of the side panels */
.image-holder {
    margin-right: 300px;
    margin-left: 130px;
}

.image-info__group {
    padding: 10px;
    border-bottom: 1px solid #565656;
}

.image-info__group--last {
    border-bottom: 0;
    clear: both;
}

.image-info__group table {
    border-collapse: collapse;
}

.image-info__group--list {
    width: 100%;
}

.image-info__group--list td {
    position: relative;
}

.image-info__group--dl {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

/*flex-basis values chosen to accommodate longest key*/
.image-info__group--dl__key {
    flex-basis: 40%;
}

.image-info__group--dl__value {
    flex-basis: 60%;
    position: relative;
    /* cut long words */
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-info__group--dl__key--panel {
    flex-basis: 30%;
}

.image-info__group--dl__value--panel {
    flex-basis: 70%;
    position: relative;
}

.image-info__group--dl__key--full-metadata {
    flex-basis: 45%;
}

.image-info__group--dl__value--full-metadata {
    flex-basis: 55%;
    position: relative;
}

.image-info__title {
    color: #eee;
}

.image-info__file-size {
    color: #eee;
    font-size: 1.2rem;
    font-weight: normal;
}

.image-info__heading {
    color: #aaa;
    font-weight: bold;
    padding-bottom: 3px;
    display: flex;
    justify-content: space-between;
}

.image-info__heading--crops {
    flex-basis: 100%;
    max-width: 100%;
}

.image-info__heading--first {
    margin-top: 0;
}

.image-info__image-type {
  color: #eee;
}
.image-info__description,
.image-info__special-instructions {
    /* respect newlines in text */
    white-space: pre-line;
    color: #eee;
}

.image-info__description--options {
    padding-bottom: 10px;
}


.image-info__heading--lease {
    width: 90%;
    float: left;
}

.image-info__heading--lease-preview {
  float: none;
}

.image-info--editor__input-preview,
.image-info__description-preview,
.image-info__image-type-preview
.image-info__title-preview,
.image-info__special-instructions-preview{
  border: 1px solid #ffbc01;
  padding-left: 5px;
}

.image-info__keyword li {
    display: inline-block;
    background-color: #222;
    color: #aaa;
    border-radius: 8px;
    padding: 0 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 1.3rem;
}

.image-info__keyword li a {
    color: inherit;
}

.image-info__wrap {
    position: relative;
    vertical-align: top;
    /* cut long words */
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-info__wrap:hover .image-info__edit {
    display: block
}

.image-info__edit,
.edit-button {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 21px;
    width: 21px;
    border-radius: 50%;
    color: #222;
    background-color: white;
}
.edit-button {
    display: block;
    position: relative;
}

.image-info__edit:hover,
.edit-button:hover {
    color: white;
    background-color: #222;
    border: 1px solid white;
    margin-top: -1px;
    margin-bottom: -1px;
}

.image-info__wrap .editable-wrap,
.image-info__wrap .editable-input {
    width: 100%;
}

.image-info__wrap .editable-error {
    text-align: right;
    font-size: 12px;
    color: #BB1212;
}

.image-info__wrap .editable-empty,
.image-info__wrap .editable-empty:hover {
    color: #aaa;
}

.image-info__wrap .editable-wrap .image-info__editor--error {
    border: 1px solid #BB1212;
    outline: none;
}

.image-info__wrap .editable-wrap .image-info__editor--saving {
    border: 1px dashed #ccc;
    outline: none;
}

/* targetting .image-info__wrap to win on specificity against default xeditable style */
.image-info__wrap .editable-input.editable-has-buttons {
    width: 100%;
}

/* targetting .image-info__wrap to win on specificity against default xeditable style */
.image-info__wrap .editable-buttons {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
    margin-bottom: 5px;
}

.image-info__usage-rights .ure {
    background: #333;
    padding: 10px;
}

.image-info--multiple {
    font-style: italic;
}

.image-notice {
    padding: 10px;
}

.metadata-line {
    color: #999;
}

.metadata-line__info {
    color: #eee;
    padding-bottom: 10px;
}

.select-all-wrap {
    user-select: all;
}

.metadata-line__info--crop {
    padding-bottom: 0;
}

.metadata-line__info a {
    color: inherit;
    border-bottom: 1px solid #999;
}
.metadata-line__info--nowrap {
  white-space: nowrap;
}
.metadata-line__key {
    font-weight: bold;
    color: #aaa;
    vertical-align: top;
    text-align: left;
}

.metadata-reveal {
    color: #aaa;
    font-size: 1.4rem;
    font-family: inherit;
}

.metadata {
    font-family: "Open Sans", sans-serif;
}

.metadata__heading {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

.metadata__description {
  margin: 10px 0;
}

.metadata__body {
    font-size: 1.3rem;
}

.image-crops {
    display: flex;
    flex-wrap: wrap;
}

.image-crop {
    margin-bottom: 10px;
    min-width: 100%;
    box-sizing: border-box;
    background-color: #333;
}

.image-crop:hover .image-crop__creator{
    display: inline;
}

.result--selected,
.result--selected:hover {
    border-color: #00adee;
}

.image-crop--selected {
    border: solid 2px #00adee;
}

.image-crop--disabled {
  color: #999;
  cursor: not-allowed;
}

.image-crop__image--disabled {
  opacity: 0.5;
}

.result--selected .preview {
    background-color: #4c4c4c;
}

.image-crop__creator {
    display: none;
    border-radius: 50%;
    background-color: #6E6E6E;
    opacity: 0.5;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.image-crop__creator:hover {
    opacity: 1;
}

.image-crop__image {
    display: block;
    max-width: 100%;
    max-height: 64px;
    margin: 0 auto;
    pointer-events: none;
}

.image-crop__info {
    background: #333;
    padding: 2px;
    font-size: 1.2rem;
}

.image-crop__more-info {
    line-height: 22px;
}

.image-crop__info--selected {
    color: #FFFFFF;
}

/* ==========================================================================
   Uploads
   TODO: remove unused classes
   ========================================================================== */

.jobs {
    border-collapse: collapse;
}

.job-status {
    padding: 5px 10px;
    border-radius: 5px;
}

.job-info {
    vertical-align: top;
    padding: 20px 30px 20px;
    border-bottom: 1px dashed #ccc;
    position: relative;
}

.job-info--thumbnail {
    /* reserve space */
    width: 200px;
    max-height: 150px;
    padding-left: 0;
    padding-right: 0;
}
.job-info--thumbnail__image {
    max-width: 100%;
    max-height: 100%;
}

.job-file {
    color: #aaa;
    font-size: 1.2rem;
    margin-top: 10px;
}

.job-info--editor__field {
    display: flex;
    margin-bottom: 5px;
    position: relative;
}
.job-info--editor__label {
    width: 130px;
    vertical-align: top;
}
.job-info--editor__input {
    display: inline-block;
    flex-grow: 1;
}
.job-info--editor__input--with-batch {
    padding-right: 25px;
}

.job-info--editor__input--description {
    height: 4em;
}

.job-info__credit {
    width: 100%;
}

.job-edit-disabler {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.job-editor:after {
    clear: both;
    content: " ";
    display: table;
}

.job-editor__buttons {
    text-align: right;
}

.job-editor__button {
    display: inline-block;
    margin-bottom: 5px;
}

.job-labels {
    margin-top: 10px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 2px;
    font-size: 1.4rem;
}
.job-labels:after {
    clear: both;
    content: " ";
    display: table;
}

.job-labeller {
    clear: both;
    text-align: right;
    font-size: 1.4rem;
    margin-top: 10px;
    display: block;
}

.job-apply-to-all {
    float: right;
}

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

.job-editor__apply-to-all {
    position: absolute;
    /* These positions are so that we don't overlay the input borders */
    right: 1px;
    top: 1px;
    z-index: 1;
    padding: 0 5px;
}

.job-editor__apply-to-all:hover {
    color: #FFF;
}


.metadata-applicator {
    font-size: 1.4rem;
    text-align: right;
    /* FIXME: This is to get the text to lay next to the save button of the
    `metadata-editor` */
    padding-right: 80px;
    margin-top: -25px;
}

.metadata-applicator__button {
    font-weight: bold;
    text-decoration: underline;
}

.upload-result + .upload-result {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px dashed #999;
}

.upload-result .gr-confirm-delete {
    padding: 0 10px;
}

.upload-result:hover .image-actions {
    display: block;
}


/* ==========================================================================
   jCrop
   ========================================================================== */


.jcrop-holder {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.jcrop-holder .easel__image {
    top: 50% !important;
}

.jcrop-keymgr {
    opacity: 0;
}

/* ==========================================================================
   Drag and drop
   ========================================================================== */
.dnd-uploader {
    border: 5px dashed #00adee;
    background: rgba(20, 20, 20, .75);
    width: calc(100vw - 10px);
    height: calc(100vh - 10px); /* border-box doesn't work with v units */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    text-align: center;
}

.dnd-uploader__info {
    border: 0 solid #00adee;
    color: white;
    background: #00adee;
    max-width: 500px;
    border-radius: 2px;
    text-align: center;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-duration: 2000ms;
    animation-name: heartbeat;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-name: heartbeat;
    -webkit-animation-iteration-count: infinite;
}

.dnd-uploader__heading {
    font-size: 2.6rem;
}

@-webkit-keyframes heartbeat {
    0% { border-width: 0; }
    10% { border-width: 10px; }
    90% { border-width: 10px; }
    100% { border-width: 0; }
}

/* ==========================================================================
   Drop menu e.g top level navigation
   ========================================================================== */

.drop-menu {
    position: relative;
}

.drop-menu__button {
    padding: 5px;
    background-color: #333;
    line-height: 1.6rem;
}

.drop-menu__button:hover i {
    filter: brightness(200%)
}

.drop-menu__button--nopad {
    padding: 0;
}

.drop-menu__close {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px;
}

.drop-menu__items {
    background-color: #333;
    position: absolute;
    padding: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    top: calc(100% + 8px);
    z-index: 4;
    /* Drop items should win over everything */
    white-space: nowrap;
    line-height: normal;
    right: 0;
}

.drop-menu__items--right {
    right: 0;
}

.drop-menu__items--nopad {
    top: 100%;
}

.drop-menu__items--action {
    background-color: grey;
}

.drop-menu__items__separator {
    border-bottom: 1px solid #565656;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

/* ==========================================================================
   Dropdown menu e.g. autocomplete
   ========================================================================== */

.dropdown-menu {
    z-index: 1;
    background: #333;
    padding: 5px;
}

.dropdown-menu li {
    cursor: pointer;
    color: #ccc;
    padding: 5px;
}

.dropdown-menu li:hover {
    background-color: #00adee
}


/* ==========================================================================
   Datalist
   ========================================================================== */

.datalist {
    position: relative;
    width: 100%;
}

.datalist__options {
    position: absolute;
    width: 100%;
    z-index: 1;
    border: 1px solid #999;
    background: #444;
    color: #ccc;
    padding: 5px;
    padding-right: 15px; /* hack to reserve some space for the scrollbar */
    font-size: 1.2rem;
    box-sizing: border-box;
    max-height: 400px;
    overflow-y: auto;
}

.datalist__input {
    width: 100%;
    box-sizing: border-box;
}

.datalist__option {
    cursor: pointer;
    padding: 5px;
}

.datalist__option--selected {
    background-color: #00adee;
    color: white;
}

/* ==========================================================================
   Heard not seen
   ========================================================================== */

.tracking-image {
    display: none;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {
    display: flex;
}

.form-label__error,
.form-label__notice {
    font-size: 1.2rem;
    flex-grow: 1;
    text-align: right;
}
.form-label__error { color: #ed5935; }
.form-label__notice { color: orange; }

.form-property {
    display: block;
    margin-bottom: 10px;
}

.form-property--last {
    margin-bottom: 0;
}

.form-input-text {
    width: 100%;
}

.radio-list {
    display: flex;
    overflow: hidden;
}
.radio-list--invalid {
    border: 1px solid #ed5935;
}
.radio-list__item {
    flex-grow: 1;
    display:flex;
}
.radio-list__item:last-child {
    border-right: 1px;
}
.radio-list__label {
    flex-grow: 1;
    color: #CCC;
    background-color: #444;
    text-align: center;
    cursor: pointer;
    border: 1px solid #565656
}

.radio-list__label:hover {
    color: #ffffff;
}

.radio-list--selected .radio-list__label-value {
    background-color:#666;
}

.radio-list--selected .radio-list__selection-state {
    background: #00adee;
}

.radio-list--disabled .radio-list__label-value {
    color: #777;
}

.radio-list__circle {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.radio-list__circle:focus-visible + .radio-list__label {
    outline: 1px solid #5E9ED6;
    outline: auto -webkit-focus-ring-color;
}

.radio-list__selection-state {
    height: 3px;
    background: transparent;
}

.radio-list__label-value {
    padding: 5px 10px;
}

.drag-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: #CCCCCC;
}

.drag-count {
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    background-color: #666666;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

@media print {

    /* ==========================================================================
       Image page
    ========================================================================== */

    /*!important is used to overwrite the component stylesheet (labeller.css) loaded after*/
    /*main.css*/

    button,
    gr-top-bar,
    gr-add-label,
    .image-details--crop,
    .image-info__group--full-metadata,
    .radio-list {
        display: none !important;
    }

    .image-details {
        border: none;
    }

    .metadata-line__info,
    .image-info__title,
    .image-info__description,
    .image-info__special-instructions,
    .label__value,
    .image-info__keyword li {
        color: black !important;
    }

    .easel__canvas {
        overflow: visible;
    }

    .easel__image {
        float: left;
        max-width: 100%;
        max-height: 450px;
        transform: none;
        position: static;
    }

    .image-canvas, .image-details {
        height: auto;
        width: auto;
    }

    .image-info__description, .image-info__keyword li {
        max-height: 80px;
        overflow: hidden;
    }

    .image-info__group, .metadata-line__info, .image-holder {
        padding: 0;
        margin: 0;
    }

    .image-info__group, .metadata-line__info a {
        border: none;
    }

    .image-info__group--dl__key {
        flex-basis: 20%;
    }

    .image-info__group--dl__value {
        flex-basis: 80%;
    }

    /* ==========================================================================
       Results page
    ========================================================================== */

    /*!important is used to overwrite the component stylesheet (panel.css) loaded after*/
    /*main.css*/

    .global-error,
    .gr-panel,
    .gr-panel__content,
    .results-toolbar {
        display: none !important;
    }

    .result-placeholder {
        border: none;
    }

    .preview__link {
        height: auto;
    }

    .preview__image {
        max-height: 150px;
    }

}

.result__select__overlay {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* above thumbnail */
  z-index: 1;

  /* preserve original tooltip behavior */
  pointer-events: none;
}

.result__select__overlay.alert {
  background-color: red;
  opacity: 0.3;
}

.result__select__overlay.warning {
  background-color: orange;
  opacity: 0.3;
}

.result__select__overlay.lease_attached {
  background-color: teal;
  opacity: 0.3;
}

.result__select__overlay__text {
  position: relative; /* z-index will not work with default position static */
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  padding: 5px 10px;
  text-align: left;

  /* above thumbnail and overlay */
  z-index: 2;
}
.result__select__overlay__text.alert {
  background-color: red;
}
.result__select__overlay__text.warning {
  background-color: orange;
  color: black;
}
.result__select__overlay__text.lease_attached {
  background-color: teal;
  color: white;
}